Pixel or 2 Between Navigation and Search Bar in Different Browsers

I have increased the padding for my navigation bar to a specific amount (10px 16.175px) however it is flush in Firefox for the PC but not in IE or Safari (all latest versions). Same thing for Firefox and Safari for the Mac. I understand browsers interpret CSS differently however there must be a way to get rid of this small space and make it flush.

Any suggestions? My website is here.

Could you provide an example of the code I need to implement to set classes on all my LIs’

Hi,
Yes, This Example shows the classes set on the anchors. There is no need to set dimensions on the LI since a dimension on the “a” will expand the floated LI.

Just view the page source and you should get an idea of how to go about it. :wink:

As Ralph has mentioned you can’t declare fractions of pixels.

You are depending on the font-size and the side padding to set the width, not only that you are depending on the amount of characters in the text to define the width of the LI.

If I change the last link from “Contact Us” to “Contact” it falls short. That is what I mean by counting characters. Additionally all I have to do in FF or Safari is “Zoom Text Only” and the whole thing falls apart.

If you really want that menu to flush up with the search box you will need to set classes on all your LIs’ and set separate widths for each one. Then remove the side padding and use text-align:center;

That will allow it to survive a couple of zooms and keep the search box flush.

I don’t think you can get away with specifying fractions of pixels, as screen s divide everything into pixels but nothing smaller. Unless you are willing to set a specific width on each of the LIs instead of using padding on the As, it’s going to be hard/impossible to get the menu exactly the same width on each browser.

Thank you both for your reply. Could you provide an example of the code I need to implement to set classes on all my LIs’ (and set separate widths for each one)? Removing the side padding and using text-align:center seems self-explanatory. I am a newbie to website development so I will certainly appreciate your help.