5 px height difference in IE/FF

[snooper]

Hey folks!

I have a list navigation which should line up with the bottom of the header image.
It all seems to work out fine - either in IE7 OR in FF2 - but not in both at the same time....

There seems to be a 5 pixel difference between the 2.

Could someone pls take a look at the following link and let me know if there is a way to overcome this (without IE if hacks)

http://www.isra****plus.com/test/1.html (sorry for the hassle, pls remove the stars from the link – I don’t want it indexed)

Also, it seems that in IE7, the BG images isn’t showing in the "li a" (in FF2 it is, so pls compare with that) - this seems related to the problem detailed above - the 'missing 5 px' in IE.

Relevant CSS: (watch for the commented line below)

body {
      background-color: #F1F1F1 ;
      text-align: center; 
      padding: 0; margin: 0;
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size: 11px;
      color:#000000;
      }

#mainContainer {
      width: 760px;
      text-align:center;
      margin: auto;
      }
#header {
      background:url(../images/ui1/header.jpg) center top no-repeat;
      height: 137px;
      }


#nav { 
      text-align:center; 
      padding: 0px; 
      clear:both; 
      font-size: 11px; 
      margin-top: 107px; }  /*   <--------  this is fine for FF2.  change this to 112px, and it will suit IE7. */

#nav ul {
      list-style: none;      
      margin: 0;      
      padding: 0 0 0 2px; 
      text-align:left; }
      
#nav ul li             {
      display:inline; 
      padding: 0; 
      margin: 0 1px; }
      
#nav ul li a { 
      padding: 4px; 
      text-decoration:none; 
      color:#000000; 
      background: #CCCCCC url(../images/ui1/nav_off.jpg) bottom left repeat-x;}
      
#nav ul li.current a { 
      padding: 4px; 
      text-decoration:none; 
      color:#000000; 
      background: white none;}
#nav ul li a:hover {background:#FFFFFF none; }

[boogyman]

you should use EM's for width purposes as they are better supported between the two... and for future reference wrap your scripts in [c.ode][/c.ode] tags please

[mburt]

Without the dots, though .

[snooper]

you should use EM's for width purposes as they are better supported between the two

i would agree with you for fonts, widths, but there my height has to be accurate to the dot, for the header, that why the px is crucial - especially for the issue i am experiencing here.

and for future reference wrap your scripts in [c.ode][/c.ode] tags please

sorry mate, you're right

[boogyman]

i would agree with you for fonts, widths, but there my height has to be accurate to the dot, for the header, that why the px is crucial - especially for the issue i am experiencing here.

There is nothing you can really do to make them the same unless you make a separate style for IE and Standards Compliant Browsers, this is because yet again IE has a bug that you need to account for. EMs are better supported from all browsers, as it depends on the size of the actual text on the page.

[snooper]

i guess different style sheets it is

the bummer is that in IE6 it looks perfect. IE7 is a big step backwards

[mburt]

IE7 is actually closer to the "standards" list then IE6, but I remember testing a site I made in IE7 a couple of weeks ago on my laptop, and it's spacing was a bit off. Also, it makes PNG's brighter for some reason.

[snooper]

thanks Mike.

as it turns out, that since my last post a few mind ago, i solved the issue (after 3 days!)

i added a "position:relative;" under the a in #nav li a
and it now works perfectly in IE6/7 & FF

i cant though explain WHY this solves it...

thanks all.

[mburt]

It positions it relative to its parent element, so it won't leave the current container's parameters.

[Twey]

EMs are better supported from all browsers

Although not for fonts.

IE7 is actually closer to the "standards" list then IE6

Very slightly. They've barely made a dent in it, I'm afraid.

Also, it makes PNG's brighter for some reason.

That's PNG gamma correction for you. This one isn't an IE bug. If you save the PNG without gamma information, this probably won't occur.

It positions it relative to its parent element, so it won't leave the current container's parameters.

Parameters? Either way, that's not very helpful... we're more interested in knowing why it helps