Forum Moderators: not2easy
I'm having a problem with my top navigation bar.
The layout is currently as follows:
[ "toolbox" w. sitemap, contact link etc.] [ primary nav links ] [ homepage link ]
Toolbox and homepage links are set to font-size 85%; primary nav to 90%.
At the moment, I have forced the coloured divs within which all the text links sit to align top and bottom exactly by setting the height explicitly in px.
I would prefer to do it in ems/percentages (I have several "VIP" users who use unusual text sizes), but I can't figure out how to do so in a way that will result in equivalent heights in spite of the differing text sizes.
Any ideas here?
With many thanks,
R.
Try substituting line-height for height. While height, in compliant browsers, does not alter with content size, line-height is always based on the current, active element font. If the font size increases, so does the line-height. So try switching your height setting to a line-height setting.
Line-height takes a number value that is used as a multiplier of the font size. So line-height: 2.0 is two times the height of the font. You can use units with line-height, but that would defeat the purpose here.
If that doesn't work, try this...
If you set the BOX height in EMs, then wrap the text in an inner div and give it a different font size, it might work...
html:
<div id="outerbox">
<div id="innertextbox">Link</div>
</div>
css:
#outerbox{
height: 3.0em;
}
#innertextbox{
font-size: 12px;
}
Theoretically, this should base the box line-height on the font of the parent element (body, if there isn't any other), not the font inside #innertextbox. As long as #innertextbox doesn't get any explicit dimensions, it ought to expand and fill #outerbox. I didn't test this, but I think the theory's sound.
