css layout issue

This is a pretty specific CSS question, but I do not see a CSS forum anywhere so i'm hoping someone here can help.


In my site, I have assigned a background image to the <div> that contains my secondary navigation. I'm attempting to overlay my navigation buttons so that they line up at an exact position over the background image. It is working fine and Internet Explorer 6, but seems to be off by pixel or two and Netscape 7.1.

http://www.budonk.com/budonk.php?prim=workwedo

If you view this page in both browsers (looking specifically at the images beneath the logo), you will see that the text of the buttons lines up perfectly with the shape of the button (which is part of the bg image) and Internet Explorer, while in Netscape, the text for each button is too low by one or two pixels.

You can view the page's source to see all of the CSS. I'm thinking it has something to do with the style #leftpane and/or .sNavImg ... but not too sure ...

Any ideas?

Both MSIE and Mozilla Firefox browsers render it properly. But I do see the problem you indicated in both Netscape and Opera browsers.

It's probably something in the stylesheet but I have no time right now to look at it. Perhaps later or tomorrow.

thanks, i'll stay tuned ...

it was a whitespace issue.

I was using a foreach statement in php to render out those secondary nav buttons and in my trying to keep the code readable and organized, some funky spaces and line breaks were put into the html sent to the browser. And of course, this whitespace was not rendered consistently between browsers

tightened everything up and it seems to work fine