2 replies [Last post]
Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

The magenta line in "menu.gif" blends perfectly in with the magenta line in "header.jpg" when viewed in Safari, Firefox, or Opera. When viewed through IE, though, the height difference of the line is the tiniest bit off, which is enough to make it less than seamless.

Have a look:

http://www.digitalpawprint.com/test.html

I'm guessing it's somewhere within here:

div#header { height: 187px; background-position: center; background-color: #000; position: relative; }
	
#header h1 { text-indent: -9999px; height: 150px; background: url(./images/header.jpg) no-repeat; background-position: center; }
	
#header ul  { text-indent: -9999px; list-style: none; width: 567px; height: 70px; background: url(./images/menu.gif); margin: 0 auto; padding: 0; position: absolute; bottom: 0; right: 25px; }
	
#header li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
	
#header li, #header a { height: 70px; display: block; text-indent: -9999px; text-decoration: none; }

Any ideas on how can this be corrected?

Thanks!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[Solved] Lining up Nav image with Header image

Sometimes IE's always going to be just that little bit off. My solution in these cases (it may not be the best but if no-one else suggests anything then you have the option of using it) would be to do either of the following:

*html #header ul {
	height: 69px;
}

*html #header ul {
	bottom: -1px;
}


Both do the same thing.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

[Solved] Lining up Nav image with Header image

Tyssen, you're the BEST! Laughing out loud

That worked perfectly. Thank you, thank you, thank you.