Forums

matt25

This site I am building for learning and testing things works fine in firefox, IE8, opera and Safari but it doesn't look right in IE6/7 (I haven't tested versions below that?) Why would it be doing that?

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
    <head>
		<title>South west THT Young Leaders</title>
		<link rel=\"stylesheet\" type=\"text/css\" href=\"/layout.css\" />
	</head>
    <body id=\"home\">
        <div id=\"page-wrap\">
        <ul id=\"nav\">
        <li class=\"home\"><a href=\"#\">Home</a></li>
        <li class=\"forum\"><a href=\"#\">Forum</a></li>
        <li class=\"contact\"><a href=\"#\">Contact</a></li>
        </ul>
        <div id=\"main-content\">
        <p>Lorem ipsum.........................................................................................esque id, euismod.</p>
        </div>
        <div id=\"footer\">
        </div>
		</div> <!-- END page-wrap-->
    </body>
</html>

body
{
background:url('images/header.jpg') repeat-x top;
background-color: #ffffcc
}

div#page-wrap {
margin: 0 auto;
width: 920px;
background: url(images/page_bg.jpg) repeat-y;
}

ul#nav {
    height: 200px; width: 900px;
    background: url('/images/banner_ctr.gif') no-repeat;
    margin: -8px 0px 0px 0px; 
    list-style: none;
    }
    ul#nav li {
    display: inline;
    }
        ul#nav li a {
        display: block;
        height: 98px;
        float: left;
        text-indent: -9999px;
        }
            ul#nav li.home a {
            width: 319px;
            background: url(/images/nav_home.jpg) bottom center no-repeat;
            margin: 150px -20px -6px -40px;
            }
            ul#nav li.forum a {
            width: 286px;
            background: url(/images/nav_forum.jpg) bottom center no-repeat;
            margin: 150px 0px 0px 20px;
            }
            ul#nav li.contact a {
            width: 315px;
            background: url(/images/nav_contact.jpg) bottom center no-repeat;
            margin: 150px 0px 0px 0px;
                    }
                ul#nav li a:hover {
                   background-position: center center;
                   }
                
#main-content {
padding: 30px 50px 30px;
}
    
#footer {
min-height:57px;
background:url(images/footer_bg.jpg) no-repeat;

begetolo

Add

* {margin:0; padding:0}

to your CSS to reset the default margin...

gr. Bert

matt25

But that just breaks it in the other browsers aswell then.

begetolo

"matt25" said:
But that just breaks it in the other browsers aswell then.

Remove the margin-top:-8px
That should do it...

gr. Bert

treehouse : what would you like to learn today?

Forums

problems veiwing in IE7/6