I’ve tried a lot , searched a lot , read even more but nothing seems to solve this problem .
I simply want the li elements to align at the bottom of ul just like in this picture :
Opera and (suprisingly) IE seem to cope well while Chrome ,Mozilla and Safari add this wonderfull ( or more) pixels at the bottom of ul , creating a gap that ruins my design :
I’ve reconstructed your page from the code you gave but it doesn’t really contain enough for us to see what’s causing the gap—unless it’s the image in the first LI, but I doubt it. Any chance of a live link? Otherwise, post more code, along with the images.
The universal selector on its own will do all that *{etc…}.)
However you should be careful with removing padding and borders from form elements because many browsers will not let you re-instate the defaults and indeed the look of form controls will change of you remove borders. That’s the reason that the universal selector was rejected in favour of more precise reset systems.
@Paul I’ve tried setting a height before but quickly abandoned becaused it didnt work on all browsers .I tried it again.It seems to solve the problem except Chrome which pushes the ul on the submenu (the dark area below menu) that causes a dark line because of the transparency . But when i set height to auto on mozilla it works but in none of the other browsers .
Line height … it doesnt work maybe because li are set to inline and i think an inline object cant do much with height or anything else with that has to do with above and below settings .
About the reset code… the are people who use the universal selector and others that support it would be better using specific tags… well i thought using both wouldnt cause any trouble . But now i am using the universal one as you said .
It would work in all browsers because when you give a height then the browser will obey it (apart from Ie6) although you would need ot address the list and anchors also.
The problem is that you are applying background images to inline elements which means that you are leaving it to chance that font-size + padding + line-height is going to be the same cross browser. However it won’t be the same as they all vary in the half leading that they add and the way that it is all rounded up together.
When you need elements to be an exact height as in the case of the tabs you are using then you need to use an explicit height and not use inline elements (background images on inline elements are not fully defined in the specs anyway so browsers are allowed to differ).
Therefore you should float the list and anchors or use display:inline-block instead and then you can size the elements exactly. This will ensure that the elements are the same cross browser.
You may be able to increase the line-height on the nav_)menu instead of using the height I mentioned earlier and I get consistent results with this:
#nav_menu {line-height:38px;}
However, the more robust way is to float the list elements and anchors or use display:inline-block and size them to fit.
@Paul Thats brilliant …it works just fine in all browsers . thanks you very much .
I would use float but i didnt know how to center it .
Since approach works perfectly i wont use line-height .
Also what is the purpose of this ( i mean the selectors) :
* html #nav_menu li a, * html #nav_menu li { display:inline }
*+html #nav_menu li a, *+html #nav_menu li { display:inline }
Thanks ralph . A really dont understand why microsoft didnt go with w3c rules . Its a headache trying to make a site look at least near in IE to what expected .