Forums

futureknight

Hey there,

I followed exactly the video tutorial "Converting a Photoshop Mockup: Part Two, Episode Two".
I have a problem with IE 6 not displaying the navigation properly. In FF and Safari it works.

IE 6 only displays the hover part.
Can someone take a look? I've tried a lot of different things. e.g. making 2 image instead of 1 (didn't work in IE).

site: http://stefanbrauchli.com/version2

CSS:

ul#nav {
	float: right;
	padding-right: 60px;
	padding-top:27px;
}
ul#nav li {
	display:inline;
}
ul#nav li a {
	display:block;
	height:9px;
	text-indent:-9999px;
	overflow: hidden;
}
ul#nav li.portfolio a {
	background:transparent url(images/portfolio.jpg) no-repeat scroll center bottom;
	float:left;
	width:79px;
}

...

ul#nav .selected {
	background-position:center top !important;
}

ul#nav li a:hover {
	background-position:center top;
}

HTML (PHP):

              <div id=\"header\">
                <ul id=\"nav\">
                  <li class=\"portfolio\"><a href=\"?page=portfolio\"<? if ($page==\"portfolio\") echo ' class=\"selected\"'; ?>>portfolio</a></li>
                  <li class=\"aboutme\"><a href=\"?page=aboutme\"<? if ($page==\"aboutme\") echo ' class=\"selected\"'; ?>>about me</a></li>
                  <li class=\"links\"><a href=\"?page=links\"<? if ($page==\"links\") echo ' class=\"selected\"'; ?>>links</a></li>
                  <li class=\"contact\"><a href=\"?page=contact\"<? if ($page==\"contact\") echo ' class=\"selected\"'; ?>>contact</a></li>
                </ul>
              </div>

Thanks

futureknight

Nobody replied, meanwhile I've found the solution:

ul#nav li.portfolio a {
	background:transparent url(images/portfolio.jpg) no-repeat scroll 0px -9px;
	float:left;
	width:79px;

Use 0px -9px (where 0px -9px is up to you to adjust // the first one (0px) is the horizontal axis and the second (-9px) is the vertical).

treehouse : what would you like to learn today?

Forums

IE 6 doen't show nav (center top/bottom) correctly [SOLVED]