CSS Forum

**imafrknninja** · 11:26 PM

I am working on a portfolio website so I can try to get a job as an entry level web or graphic designer somewhere. My xhtml and css are valid. The page looks exactly how I want it to in Firefox 3, which is what I was testing it in, Internet Explorer 8, and Opera. I am encountering problems with nearly every other browser I try. I am not sure if the problem is with my code or with just browser wierdness (but with it being so many broswers its looking like my code).

The problems all have to do with the logo and navigation at the top of the page. The different browsers don't all have the same problem though. Additional information: I am using a image rollever effect in the navigation with CSS. I'll explain the individual errors and include links to screenshots showing the problem (screenshots from browsershots.org).

In Safari the Logo and the Navigation images are dropped down over the beginning of the content. Screenshot: http://www.tylerwalters.com/images/b...windows-xp.png

Same problem in Chrome. Screenshot: http://www.tylerwalters.com/images/b...windows-xp.png

In Firefox 2 and earlier the Logo and Navigation images do not appear but text that shouldn't appear does. Screenshots: http://www.tylerwalters.com/images/b...windows-xp.png and http://www.tylerwalters.com/images/b...windows-xp.png

In Internet Explorer 7 (I don't have IE6 screenshots right now but I will hopefully be able to edit this post later to add them) nothing shows up where the Logo and Navigation should be. Screenshot: http://www.tylerwalters.com/images/b...ndows-2003.png

Here is the URL for the website: http://tylerwalters.com.

Here is the HTML code for the website:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>tylerwalters.com - Online Portfolio of Tyler W. Walters</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    
    <meta name="description" content="tylerwalters.com - Online Portfolio of Tyler W. Walters" />
    <meta name="keywords" content="Keywords" />
    
    <meta name="author" content="Tyler Walters" />
    
    <style type="text/css" media="all">@import "css/master.css";</style>
    
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
    <![endif]-->
    
    <script type="text/javascript" src="src/shadowbox-2.0.js"></script>
    <script type="text/javascript"> 
        Shadowbox.loadSkin('classic', 'src/skin'); 
        window.onload = Shadowbox.init;
    </script>

    
</head>
<body>

    <div id="container">

    <div id="header">
    <a href="index.shtml" class="logo">Tyler W. Walters</a><img src="http://www.webmaster-talk.com/images/background.jpg" class="spacer" alt="spacer" /><a href="index.shtml" class="menuitem1">Home</a><a href="about.shtml" class="menuitem2">About</a><a href="services.shtml" class="menuitem3">Services</a><a href="contact.shtml" class="menuitem4">Contact</a>
    </div>

    <div id="blurb_box1">
    <div class="blurb_1"><p><span class="headline">Hello there!</span> Thanks for visiting my online portfolio. My name is Tyler W. Walters and I am a 24 year old designer in Gilbert, Arizona. This paragraph is going to be a short introduction about me just to get an idea about who I am. Links to the about page. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor, massa quis malesuada aliquam, massa quam elementum nulla, sed venenatis mauris sapien non felis. Maecenas posuere risus sed nisl. <a href="about.shtml">Read more</a>.</p></div>
    <div class="blurb_2"><p><span class="headline">Hello there!</span> This paragraph will probably briefly cover my design philosophy and what I can do. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor, massa quis malesuada aliquam, massa quam elementum nulla, sed venenatis mauris sapien non felis. Maecenas posuere risus sed nisl. Fusce sit amet diam nec nibh tempor vehicula. Nunc ultricies bibendum libero. Nulla consectetur metus id orci. Etiam semper. <a href="about.shtml">Read more</a>.</p></div>
    <div class="blurb_3"><p><span class="headline">Other text!</span> This paragraph will descibe my experience and inlcude a link to my resume and the contact page. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor, massa quis malesuada aliquam, massa quam elementum nulla, sed venenatis mauris sapien non felis. Maecenas posuere risus sed nisl. Fusce sit amet diam nec nibh tempor vehicula. Nunc ultricies bibendum libero. Nulla consectetur metus id orci. Etiam semper. <a href="about.shtml">Read more</a>.</p></div>
    <div class="clear"></div>
    </div>

    <div id="content">
    <p><a rel="shadowbox[terranostra]:title=Client: Terra Nostra. Sample: Photography, images, css, xhtml." href="http://www.webmaster-talk.com/images/terranostra_homepage.jpg" title="Click to view full size."><img class="portfolio_1" src="http://www.webmaster-talk.com/images/terranostra_thumb.jpg" alt="Terra Nostra" /></a><a rel="shadowbox:title=A turtle illustration I did on my tablet in Photoshop." href="http://www.webmaster-talk.com/images/turtleillustration_1.jpg" title="Click to view full size."><img class="portfolio_2" src="http://www.webmaster-talk.com/images/turtleillustration_thumb.jpg" alt="Turtle Illustration" /></a><a rel="shadowbox:title=My first illustration with my new tablet." href="http://www.webmaster-talk.com/images/pandaillustration_1.jpg" title="Click to view full size."><img class="portfolio_3" src="http://www.webmaster-talk.com/images/pandaillustration_thumb.jpg" alt="Panda Illustration" /></a><a rel="shadowbox:title=Photo manipulation including GoMedia watercolor textures." href="http://www.webmaster-talk.com/images/watercolor_1.jpg" title="Click to view full size."><img class="portfolio_1" src="http://www.webmaster-talk.com/images/watercolor_thumb.jpg" alt="Watercolor Photo Manipulation" /></a></p>
    <p><a rel="shadowbox[dansaban]:title=Client: Dan Saban for Sheriff. Sample: Images, css, xhtml, word processing." href="http://www.webmaster-talk.com/images/dansaban_myspace.jpg" title="Click to view full size."><img class="portfolio_1" src="http://www.webmaster-talk.com/images/dansaban_thumb.jpg" alt="Dan Saban for Sheriff Campaign" /></a><a rel="shadowbox:title=A poster for a contest I entered." href="http://www.webmaster-talk.com/images/contestposter_1.jpg" title="Click to view full size."><img class="portfolio_2" src="http://www.webmaster-talk.com/images/contestposter_thumb.jpg" alt="Contest Poster" /></a><a rel="shadowbox[republicansforsaban]:title=Republicans for Dan Saban Sample: Images, css, xhtml." href="http://www.webmaster-talk.com/images/republicansforsaban_1.jpg" title="Click to view full size."><img class="portfolio_3" src="http://www.webmaster-talk.com/images/republicansforsaban_thumb.jpg" alt="Republicans for Dan Saban" /></a></p>
    <div class="clear"></div>
    </div>

    <div id="blurb_box2">
    
    <div class="blurb_1"><h2>My Social Media</h2>
    <p>You can find me on various Social Networking sites. Hit me up. Obviously, some other text should go here.
    <br /><br />Follow me on <a href="http://twitter.com/tylerwwalters">Twitter</a>.
    <br />View my <a href="http://www.flickr.com/photos/tylerwalters/">Flickr</a> photostream.
    <br />Find me on <a href="http://www.facebook.com/profile.php?id=10044544&amp;ref=name">Facebook</a>.
    <br />Friend me on <a href="http://myspace.com/imafrknninja">Myspace</a>.
    <br />Check out my <a href="http://tylerwalters.deviantart.com/">DeviantArt</a> profile.</p>
    </div>
    
    <div class="blurb_2"><h2>My Twitter Feed</h2>
    <p id="twitter_update_list"></p>
    <p>Follow me on <a href="http://twitter.com/tylerwwalters">Twitter</a>.</p>
    </div>
    
    <div class="blurb_3">
    <div id="flickr">
       <h2>My Flickr Photostream</h2>
       <p><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&amp;display=random&amp;size=s&amp;layout=x&amp;source=user&amp;user=8173266%40N02"></script></p>
       </div>
    </div>    
    
    </div>
    
    <div class="clear"></div>
    <p><span class="width827">Copyright &copy; 2007 - 2009 Tyler W. Walters</span><a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tylerwalters.com%2F">Valid XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/validator?profile=css21&amp;warning=0&amp;uri=http%3A%2F%2Fwww.tylerwalters.com%2F">Valid CSS</a></p>
    </div>
    
    <div style="display: none;">
    <a rel="shadowbox[terranostra]:title=I did a full website and I typed up and formatted their new menu." href="http://www.webmaster-talk.com/images/terranostra_menu.jpg"></a>
    <a rel="shadowbox[terranostra]:title=Terra Nostra - Map and Location" href="http://www.webmaster-talk.com/images/terranostra_location.jpg"></a>
    <a rel="shadowbox[terranostra]:title=Terra Nostra - Bottom of the Homepage" href="http://www.webmaster-talk.com/images/terranostra_bottom.jpg"></a>
    <a rel="shadowbox[dansaban]:title=I did print and web jobs for the Dan Saban for Sheriff Campaign." href="http://www.webmaster-talk.com/images/dansaban_flyer.jpg"></a>
    <a rel="shadowbox[dansaban]:title=Jobs included myspace account, flyers, visual aids, indentity work." href="http://www.webmaster-talk.com/images/dansaban_visualaid.jpg"></a>
    <a rel="shadowbox[republicansforsaban]:title=The Republicans for Dan Saban campaign asked me to do their website." href="http://www.webmaster-talk.com/images/republicansforsaban_2.jpg"></a>    
    </div>

    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/tylerwwalters.json?callback=twitterCallback2&amp;count=4"></script>
    
</body>
</html>

Here is the CSS for the website:

Code:

/* -------------------- */
/*        Reset         */
/* -------------------- */

* {margin:0; padding:0;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
}

ol, ul {
    list-style: none;
}

/* -------------------- */
/*        Common        */
/* -------------------- */

body {
    font-family: helvetica, arial, verdana, sans-serif;
    font-size: 75%;
    color: #6b6b6b;
    background: url(../images/background.jpg);
    background-repeat: repeat-x;
    background-color: #fff;
}

html>body {
    font-size: 12px;
}

html, body {
    height: 100%;
}

/* -------------------- */
/*        Layout        */
/* -------------------- */

#container {
    width: 960px;
    text-align: left;
    margin-left: auto; 
    margin-right: auto;
}

#header {
    height: 73px;
}

#blurb_box1 {
    width: 960px;
    border-style: dotted; 
    border-color: #aeaeae; 
    border-width: 0 0 1px 0
}

#blurb_box2 {
    width: 960px;
    padding: 18px 0 0 0;
}    

.blurb_1 {
    width: 308px;
    float: left;
    display: block;
}

.blurb_2 {
    width: 308px;
    padding-left: 18px;
    padding-right: 18px;
    float: left;        
    display: block;    
}

.blurb_3 {
    width: 308px;    
    float: right;    
    display: block;
}

.floatright {
    float: right;
}

.floatleft {
    float: left;
}

#twitter_update_list {
    width: 308px;
    margin: 0;
    padding: 0;
} 

#content {
    width: 960px;
    border-style: dotted; 
    border-color: #aeaeae; 
    border-width: 0 0 1px 0;
}

img.portfolio_1 {
    width: 226px;
    height: 226px;
}    

img.portfolio_2 {
    width: 226px;
    height: 226px;
    padding-left: 18px;
    padding-right: 10px;
}

img.portfolio_3 {
    width: 226px;
    height: 226px;
    padding-left: 10px;
    padding-right: 18px;
}

.clear {
   clear: both;
}

#twitter_update_list {
    margin-top: 1em;
    margin-bottom: 1.5em;
}

#twitter_update_list li {
    list-style: none;
    padding-top: .5em;
    padding-bottom: .5em;
    border-bottom: 1px dotted #aeaeae;
}

#flickr {
    width: 308px;
}

#flickr a img {
    float: left;
    width: 92px;
    height: 92px;
    border: 1px;
    border-style: dotted; 
    border-color: #aeaeae; 
}

#flickr a {
      display: block;
      float: left;
      position: relative;
      height: 92px;
      width: 92px;
    margin: 4px;
}

#flickr a:hover {
      font-size: 100%;
      z-index: 1;
}

#flickr a:hover img {
    border: 1px;
    border-style: dotted; 
    border-color: #aeaeae;
      position: absolute;
      width: 105px;
      height: 105px;
      top: -7px;
      left: -4px;
}

/* -------------------- */
/*      Navigation      */
/* -------------------- */

a.logo {
    width: 277px;
    height: 73px;
    text-decoration: none;
    background: url(../images/logo.jpg);
    text-indent: -3000px;    
    display: inline-block;
    overflow: hidden;
}

a.menuitem1 {
    width: 128px;
    height: 73px;
    text-decoration: none;
    background: url(../images/nav_home.jpg);
    text-indent: -3000px;
    display:inline-block;
    overflow:hidden;

}

a.menuitem1:hover {
    background-position: 0px -73px;
}

a.menuitem2 {
    width: 128px;
    height: 73px;;
    text-decoration: none;
    background: url(../images/nav_about.jpg);
    text-indent: -3000px;
    display:inline-block;
    overflow:hidden;
}

a.menuitem2:hover {
    background-position: 0px -73px;
}

a.menuitem3 {
    width: 128px;
    height: 73px;
    text-decoration: none;
    background: url(../images/nav_services.jpg);
    text-indent: -3000px;
    display:inline-block;
    overflow:hidden;
}

a.menuitem3:hover {
    background-position: 0px -73px;
}

a.menuitem4 {
    width: 129px;
    height: 73px;
    text-decoration: none;
    background: url(../images/nav_contact.jpg);
    text-indent: -3000px;
    display:inline-block;
    overflow:hidden;
}

a.menuitem4:hover {
    background-position: 0px -73px;
}

.spacer {
    width: 170px;
    height: 73px;
}

/* -------------------- */
/*      Typography      */
/* -------------------- */

p { 
    line-height: 1.5em;
    font-size: 1em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

h1 {
    font-size:1.5em;
    line-height: 1em;
    margin-top: 0;
    margin-bottom: 1em;
    font-variant: small-caps;
    letter-spacing: .1em;
    font-weight: normal;
}

h2 {
    font-family: georgia, times new roman, times;
    font-size:1.3334em;
    line-height: 1.125em;
    margin-top: 0em;
    margin-bottom: 0.5625em;
    font-weight: bold;
    color: #000;
}

h3 {
    font-family: georgia, times new roman, times;
    font-size: 1.75em;
    line-height: 1em;    
    margin-bottom: -.75em;
    font-weight: bold;
    color: #000;
}

.headline {
    font-family: georgia, times new roman, times;
    font-size: 1.75em;
    line-height: 1em;    
    margin-bottom: -.75em;
    font-weight: normal;
    color: #000;
}

A:link {
    color: #ff0000;
    text-decoration: none;
}
A:active {    
    color: #ff0000;
    text-decoration: none;
}
A:visited {    
    color: #ff0000;
    text-decoration: none;
}
A:hover {
    color: #ff0000;
}

#blurb_box1 A:link, #blurb_box2 A:link {
    color: #ff0000;
    text-decoration: none;
    border-style: dotted; 
    border-color: #ff0000; 
    border-width: 0 0 1px 0;
}

#blurb_box1 A:active, #blurb_box2 A:active {    
    color: #ff0000;
    text-decoration: none;
    border-style: dotted; 
    border-color: #ff0000; 
    border-width: 0 0 1px 0;
}

#blurb_box1 A:visited, #blurb_box2 A:visited {    
    color: #ff0000;
    text-decoration: none;
    border-style: dotted; 
    border-color: #ff0000; 
    border-width: 0 0 1px 0;
}

#blurb_box1 A:hover, #blurb_box2 A:hover {
    color: #ff0000;
    border-style: solid; 
    border-color: #ff0000; 
    border-width: 0 0 1px 0;
}
.width827 {
    width: 827px;
    float: left;
}

**imafrknninja** · 02-06-2009, 12:15 AM

I found the solution I think. It was actually embarrassingly simple. I just added some float tags in the appropriate spots. I haven't tested it in IE 6 or 7 yet but it works in Chrome and Safari now.