I seriously have never asked for help with CSS in like 5 years, and now I am really feeling my age. the menu on this site development.3angelstube.com is off I see that it looks great in some browsers and in other it looks like crap. any CSS code suggestions would be greatly appropriated.
And I am using meyerweb’s CSS Reset… I think its time for them to update that lovely piece of code.
It would help if you say what you see that is wrong with the menu as I didn’t notice much different between the browsers that I checked it in. I do notice that there will be an issue if text is resized or a user selcts a larger text size because you have made the menu fit the width by virtue of the length of the text plus padding on either side.
Browsers vary greatly on the amount of space that a line of text will take up and you must leave ample room for the text to breathe or it may break to the next line in some browsers.
If space is tight then I would float all the menu items except for the last menu item which would be display:block and have overflow:hidden applied (so that it forms a rectangular block almost like another float) and then centred in the remaining space with text-align:center. The last item would have no side padding and that would allow breathing space should browsers render the other elements wider than you expect.
And I am using meyerweb’s CSS Reset… I think its time for them to update that lovely piece of code.
Actually it would be time for you to update it yourself as I believe Eric Meyer never really meant people to just cut and paste code but to use it as a basis for constructing their own resets. I just use a small reset for the most common elements and even then I’d prefer to set them to what was needed rather than set them to zero. The most important thing to understand is why the need arose in the first place and to understand which elements are problem elements and why.
Once you know that elements like lists have default left margin for the bullets in some browsers and a default left padding in others then you can take care of that as you code and reset them to the required value.