Formula for configuring EM for width mathematically

[Girard Ibanez]

Is there a simple logic when using ems for the width when making a navigational css menu?

If I wanted 8 main menu catagories, can the width be computed mathematically?

My problem happens at the sub level width of the menu.

[jscheuer1]

Well, em's for dimensions are tied to the font-size in effect of the element being styled. With a default font and font-size, you can generally divide the desired pixel dimension by 16 to arrive at the em dimension. If your font and/or especially font-size is different, you need to use a different divisor but, this usually can be fairly quickly arrived at via trial and error.

Incidentally, if you are going to set dimensions by em's and are not using the default font size, it is best to set the font-size style as a percentage. All sorts of inconsistencies can arise in IE if you use anything else. In fact, for best design results in general, font-size should always be set as a percent or not at all.

[Twey]

Yes:
xem = 1em × x:) The exact size of 1em is dictated by the user's font settings.

[jscheuer1]

Yes:
xem = 1em × x:) The exact size of 1em is dictated by the user's font settings.

That's unhelpful from a design perspective. If you set things so that they work with the font size you have, as outlined in my previous post in this thread, you generally will arrive at a design that can adapt to the viewer's font-size. That's the whole point.

However, the keyword is generally. There are many novice design practices that could result in a mess when the user changes font-size. The best way to tell is to experiment with the design, viewing it in the browser with different font-sizes to see the result.

Incidentally this method of designing, using em's for dimensions is becoming less important with many browsers using a more or less true zoom in favor of text size changes. Due to a number of factors however, for the foreseeable future, em dimensions will continue to be a key accessibility feature of a well thought out design.

[Twey]

Not so. It will no longer be important due to explicit text resizing, but default font sizes still vary, even if the user doesn't specifically adapt them for the page.

ems are also a good measure of what a user considers acceptable: 1em will always be a readable font size.

[jscheuer1]

Not so.

Huh? What's not so? The fact that em designing is becoming less important or the fact that for the foreseeable future it still will be important? Something else?

[mburt]

Back to the original post... the user wants to know how to use em's for the width of his/her menu. I suppose he/she wants to automatically calculate the width of the menu depending on the font size of the page.

[Twey]

The fact that em designing is becoming less important or the fact that for the foreseeable future it still will be important?The former, sorry for being vague.

[jscheuer1]

I'm sorry, it simply is less important. It still is important but, with most users now with the available ability to scale a page rather than its fonts, it is clearly less important, if only slightly. This trend will most likely continue though so that, at some point, it will no longer be much of a consideration at all.

[Twey]

The only time at which it will cease to be a serious consideration is when all users have exactly the same font size, which I must say is quite an unlikely event.

[Girard Ibanez]

The problem I have when using px is that some browser when zoomed in renders differently. But when I use ems in the design, using control + keys seems to scale the page alot better.

Most of my design are menus I copied from various web site but then I taylor it to my taste. Given, some use px I try an convert to ems for the sake of scaling properly, but only find my self using the "trial and error" method.

This becomes a less logical and thus is quite time consuming. More so a problem when trying to make the design page compatible with those using IE. Until such a time that IE decides to give up and follow some sort of standards.

I appreciate all your advice and comments as it does adds all angles of ones perspective, thus making this topic more informative.

Thanks again.

[jscheuer1]

There is a difference between finding the em size of a given dimension using trial and error and finding the proper divisor of its pixel dimension by trial and error. What I was trying to convey is that a standard em is 16 standard pixels. So, if everything is standard, just divide by 16. If things are different however, they will usually be different in the same way for an entire set of elements. Once the correct divisor for those elements is determined, it becomes a much easier chore.

If you work with this a lot, you get a sense for what the most likely conversion will be.

Note: To Twey about font sizes: They will continue to be less important as the size that a viewer sees will be determined by other factors. The web will become more like paper and the user's adjustments to it more like using reading glasses.

Note: On my note - this is only if the current trend continues.

[Twey]

Note: To Twey about font sizes: They will continue to be less important as the size that a viewer sees will be determined by other factors. The web will become more like paper and the user's adjustments to it more like using reading glasses.I disagree entirely. This is what PDF is for. Even if this were so, the default font size would still be different, and the default zoom level would be one that fits nicely onto the user's screen. Forcing the user to zoom would be something like providing horizontal scrollbars is at the moment.
What I was trying to convey is that a standard em is 1/16th of a standard pixel. So, if everything is standard, just divide by 16. If things are different however, they will usually be different in the same way for an entire set of elements. Once the correct divisor for those elements is determined, it becomes a much easier chore.1/16th of a pixel? o.@ I presume you mean one em is sixteen pixels, that you realise that the width and height values will differ, and that sixteen is only an example?

[Girard Ibanez]

What would be the best method or solution in regards to the box model problems with IE using IE 5.XXX to 6? Looking ahead as to modify if IE updates. Please not that I design using Fire Fox first then taylor to IE specific needs.

1) Use the IE hacks within the CSS style sheet.
2) Use an external IE.CSS. IF so how would it be link to detect browser type.


Thanks again guys

[Twey]

Definitely 2). Use IE's conditional comments to supply the correct stylesheet:
<!--[if IE]> <link href="ie-hacks.css" rel="stylesheet" type="text/css"> <![endif]-->

[jscheuer1]

If you are only adjusting for IE 6 and earlier, it can sometimes be more efficient to use a hack but, it is always safer to use conditional comments. It does get more complicated when they must be IE version specific conditionals.

Notes: Previous math error noted and corrected to:


a standard em is 16 standard pixels

This business about PDF's is a red herring, those are for other types of content entirely and are woefully inadequate for everyday presentational use over the web. This new zoom technology in web browsers, if it is here to stay and is improved slightly, will render ems and font size irrelevant. Everyone will browse in their favored zoom level and all pages will have font-sizes relative to 100% with the standard font-size on all pages being 100%. It won't make any difference how you declare variations in font size as, they will all be set relative to 100% and zoomed accordingly.

As I say, this may not catch on, Opera - which does it real well and I think started it, and IE 7 (MS entering into this and making it more prominent than font size adjust is a possible harbinger of this taking over) are the only two so far that I know of but, I can see how appealing it is to the average Joe. Takes the worry out of font sizes and vastly improves accessibility on computers at least. It does remove the current quaint quality of web pages that 'flow' (and unfortunately sometimes don't or worse). But, it will be a long time before that is useless (as noted earlier).

[Twey]

Everyone will browse in their favored zoom level and all pages will have font-sizes relative to 100&#37; with the standard font-size on all pages being 100%.But they won't. The default zoom level will be dictated by the size and resolution of the display.

[jscheuer1]

But they won't. The default zoom level will be dictated by the size and resolution of the display.

Zoom level is not font size, window size, or resolution, it is a user defined choice and could be preset. You are so used to adapting to the vagaries of the web as regards those things that you have lost all concept of how Zoom could standardize the experience.

I'm not saying that this would be a good thing or a bad thing, it certainly would make web design easier. I am saying that we are now seeing the glimmers of this as the wave of the future though, that may not be how things go. As it stands now, most users do not or soon will not rely upon font-size or text size as a means for making web pages more legible.

For some time now Opera hasn't even had this text sizing feature, or if they do, it is buried somewhere that the average user will not find it - I've looked for it and haven't found it anywhere that is convenient to use. IE 7 has done a similar thing, the Zoom feature is on top and has hot keys on the menu for it, the text sizing is two levels deep and has no hot keys associated with it on the menu for it.

[Girard Ibanez]

I'll probably change this so that the fonts are in PX. My other site menu zooms without the fonts wrapping. Using em on the font causes the fonts to scale accordingly but then it bleeds out of the containing menu.

In the mean time, I spent a great number of days modifying and learning this code from Stu's site and just need one fix.


Here's my code ... I got the faulty ie box width aligned and fixed for IE 5.5, 6, and Fire Fox. I can't get IE 7 to work.

Problem is on the last menu tab "JARYD". Sub level menu does not fully align to the edge of the wrapper.


CSS for Fire Fox




body{
margin: 0.3em 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: #e8e8e8;
text-align: center;
}

#nav-001-wrapper {
margin: 0 auto;
padding: 0;
width: 49em;
height: 25em;
border: #000 solid 0;
background-color: red;
text-align: left;
}


.menu {
font-size: 0.85em;
width: 100%;
}


.menu ul {
padding: 0;
margin: 0;
list-style-type: none;
height: 1.8em;
background: transparent;
}

.menu ul ul {
width: 15em;
}


.menu ul li {
float: left;
height: 1.8em;
line-height: 1.8em;
display: block;
}


.menu ul ul li {
display: block;
width: 12em;
height: auto;
line-height: 1em;
}


.menu a,
.menu a:visited {
display: block;
float: left;
height: 100%;
width: 7.44em;
font-size: 0.875em;
text-decoration: none;
color: #000;
background: #949e7c url(padding_files/top_grad.gif) center center;
padding: 0 0.3em;
border-left: 1px solid #eee;
border-right: 1px solid #000;
text-align: center;
}


.menu ul ul a,
.menu ul ul a:visited {
display: block;
background: #5b8686 url(padding_files/sub_grad.gif);
color: #fff;
width: 10em;
height: 100%;
line-height: 1em;
padding: 0.5em 1em;
border-bottom: 1px solid #7aa;
font-size: 0.875em;
text-align: left;
}


.menu ul ul ul a,
.menu ul ul ul a:visited {
background: #b4be9c url(padding_files/sub_grad.gif);
}


.menu ul ul ul ul a,
.menu ul ul ul ul a:visited {
background: #c4ceac url(padding_files/sub_grad.gif);
}


.menu ul :hover a.sub1 {
background: #447b7b;
}


.menu ul ul :hover a.sub2 {
background: #447b7b;
}

.menu li:hover {
position: relative;
}

.menu :hover > a {
color: #ff0;
background: #d4d8bd url(top_grad_2.gif) center center;
}

.menu ul ul li:hover {
position: relative;
}

.menu ul ul :hover > a {
color: #ff0;
background: #7aa;
}

.menu ul ul ul :hover > a {
background: #7aa;
}


.menu ul ul ul ul a:hover {
background: #7aa;
position: relative;
z-index: 130;
}


.menu ul ul {
visibility: hidden;
position: absolute;
height: 0;
top: 1.8em;
left: 0;
width: 14em;
}



.menu ul :hover ul.left-001 {
left: -6.5em;
}

.menu ul :hover ul :hover ul.left-002{
left: -12em;
}


.menu ul ul ul{
left: 12em;
top:0;
width:14em;
}


.menu ul :hover ul{
visibility: visible;
height: auto;
padding: 0 3em 3em 3em;
background: transparent url(padding_files/trans.gif);
left: -3em;
}


.menu ul :hover ul ul{
visibility: hidden;
}


.menu ul :hover ul :hover ul ul{
visibility: hidden;
}


.menu ul :hover ul :hover ul{
visibility: visible;
left: 6em;
}


.menu ul :hover ul :hover ul :hover ul {
visibility: visible;
}






IE Hack






* html #nav-001-wrapper {
width: 49em;
w\idth: 49em;
}


* html .menu ul li {
height: 1.8em;
line-height: 1.8em;
}


* html .menu ul li ul li{
height: 1em;
line-height: 1em;
}


* html .menu a,
* html .menu a:visited {
width: 8.3em;
w\idth: 7.45em;
}


* html .menu a,
* html .menu a:visited {
width: 8.3em;
w\idth: 7.45em;
}


* html .menu ul ul a,
* html .menu ul ul a:visited {
width: 12.2em;
w\idth: 10.2em;
}


* html .menu a:hover {
color: #ff0;
background: #d4d8bd url(padding_files/top_grad_2.gif) center center;
position: relative;
z-index: 100;
}

* html .menu ul ul a:hover{
color: #ff0;
background: #7aa;
position: relative;
z-index: 110;
}


* html .menu ul ul ul a:hover {
background: #7aa;
position: relative;
z-index: 120;
}


* html .menu ul :hover ul.left-001 {
left: -6.5em;
lef\t: -6.6em;
}

* html .menu ul :hover ul :hover ul.left-002{
left: -12em;
lef\t: -12.1em;
}


* html .menu ul :hover ul{
left: -3.1em;
lef\t: -3.1em;
}


* html .menu ul :hover ul :hover ul{
left: 5.9em;
lef\t: 5.9em;
}


.menu table {
border-collapse: collapse;
padding: 0;
margin: -1px;
width: 0;
height: 0;
font-size: 1.15em;
z-index: 1;
}

[Girard Ibanez]

Here's the HTML






<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST-001</title>
<meta name="Author" content="G Ibanez">
<link rel="stylesheet" media="all" type="text/css" href="test-001.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="iehacks_test-001.css""><![endif]-->


</head>

<body>

<div id="nav-001-wrapper">
<div class="menu">
<ul>
<li><a href="#">MMM MMM MMM
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="#">MMM MMM MMM MMM</a></li>
<li><a href="#" title="#">Aileron Control Linkage</a></li>
<li><a href="#" title="#">styled form</a></li>
<li><a href="#" title="#">active focus</a></li>
<li><a class="sub1" href="#" title="#">hover/click with no borders
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="#">styled form</a></li>
<li><a href="#" title="#">removing active/focus borders</a></li>
<li><a class="sub2" href="#nogo">FLYOUT third level
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Third level-1</a></li>
<li><a href="#nogo">Third level-2</a></li>
<li><a href="#nogo">Third level-3</a></li>
<li><a href="#nogo">Third level-4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" title="#">hover/click</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#" title="#">shadow boxing</a></li>
<li><a href="#" title="#">image map for detailed information</a></li>
<li><a href="#" title="#">fun with background images</a></li>
<li><a href="#" title="#">fade scrolling</a></li>
<li><a href="#" title="#">em image sizes compared</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Building Tips
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="#">a coded list of spies</a></li>
<li><a href="#" title="#">vertical menu</a></li>
<li><a href="#" title="#">enlarging unordered list</a></li>
<li><a href="#" title="#">link images</a></li>
<li><a href="#" title="#">non-rectangular</a></li>
<li><a href="#" title="jigsaw links">jigsaw links</a></li>
<li><a href="#" title="#">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Linkages
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="#">drop down menu</a></li>
<li><a href="#" title="#">cascading menu</a></li>
<li><a href="#" title="#">content:</a></li>
<li><a href="#" title="#">mozzie box</a></li>
<li><a href="#" title="#">I can build a rainbow with transparent borders</a></li>
<li><a href="#" title="#">a snooker cue using border art</a></li>
<li><a href="#" title="#">target practise</a></li>
<li><a href="#" title="#">two tone headings</a></li>
<li><a href="#" title="#">shadow text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Electronics
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="#">the first example for Internet Explorer</a></li>
<li><a href="#" title="#">weft fonts</a></li>
<li><a href="3" title="#">vertically aligning text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">MY GALLERY
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="#">the first example for Internet Explorer</a></li>
<li><a href="#" title="#">weft fonts</a></li>
<li><a href="3" title="#">vertically aligning text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">MY COMPUTER
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="#">the first example for Internet Explorer</a></li>
<li><a href="#" title="#">weft fonts</a></li>
<li><a href="3" title="#">vertically aligning text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">CONTACT ME
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#" title="#">the first example for Internet Explorer</a></li>
<li><a href="#" title="#">weft fonts</a></li>
<li><a href="3" title="#">vertically aligning text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li><a href="#">jaryd
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left-001">
<li><a href="#" title="#">a colour wheel using opaque colours</a></li>
<li><a href="#" title="3">a menu using opacity</a></li>
<li><a href="#" title="#">partial opacity</a></li>
<li><a href="#" title="#">partial opacity II</a></li>
<li><a class="sub1" href="#" title="#">HOVER/CLICK
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left-002">
<li><a href="#" title="#">styled form</a></li>
<li><a href="#" title="#">removing active/focus borders</a></li>
<li><a href="#" title="#">hover/click</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
</body>
</html>

[Twey]

Zoom level is not font size, window size, or resolution, it is a user defined choice and could be preset. You are so used to adapting to the vagaries of the web as regards those things that you have lost all concept of how Zoom could standardize the experience.Not so. Presuming that a document is built that is 800&#215;600, a user with a 1600&#215;1200 display is probably going to zoom in to 1:2, not 1:4, since 1:4 would make the document a total of 3200&#215;2400 pixels, and it wouldn't fit on the display, requiring some manner of scrollbars or other inconveniences to operate.

[mburt]

Doesn't zoom also work out of 100?
zoom:150&#37; ?

[Twey]

150% is equivalent to 2:3.

[Girard Ibanez]

I found the solution for the IE7 hack that I was having.

I just use a period in from of the css selector, like .left:

Thks guys.

[Twey]

Ah, that's a class selector, and unless your element has a class of "left", that will disable that block of style for any browser.

[jscheuer1]

Not so. Presuming that a document is built that is 800×600, a user with a 1600×1200 display is probably going to zoom in to 1:2, not 1:4, since 1:4 would make the document a total of 3200×2400 pixels, and it wouldn't fit on the display, requiring some manner of scrollbars or other inconveniences to operate.

You keep saying 'not so' without qualifying exactly what isn't so. Anyways, that is the beauty of Zoom from a simplicity point of view. Most sites will look good in the user's default zoom. If they encounter one that is too small or too large they can easily zoom in or out with a touch of a key. In fact, that is how it already is when browsing with Opera. As long as a site isn't too big for the screen while at the same time having a font that is too small to read, everything works out. I cannot remember the last time I saw a case like that. As long as a developer/designer doesn't code for a huge viewport and uses 100% as the default font with only slight variations, that will never happen. Easy to code for.

BTW, and I don't know exactly when this was added (it may have been around for awhile) but, the developer's extension in FF has a sort of Zoom feature built in but, it keeps reverting on page reload or change.

[Twey]

If they encounter one that is too small or too large they can easily zoom in or out with a touch of a key.At the cost of decreasing the text size, or introducing horizontal scrollbars.

[jscheuer1]

At the cost of decreasing the text size, or introducing horizontal scrollbars.

At the very least, you overstate your case, this would be about as rare as it is today in my experience with Opera, which is almost never. If you leave out fixed width sites that require more than 800 pixels of viewport, even less.

That sort of thing would only happen if designers ignored simple rules. Rules you left out when quoting me out of context. Rules that are much simpler to follow than all of the rigmarole of em's and flowing web pages. Incidentally, if a sensible page were made up following the more complex rules, it would still render well in browsers that zoom instead of altering text size for legibility/access.

[Twey]

The context was directly above, I quoted you only in order to highlight the precise area I was addressing.

The point I am trying to make is that the user's default zoom level will be one that uses the maximum available space, without introducing unnecessary scrollbars. Anything other than that is suboptimal.
As long as a developer/designer doesn't code for a huge viewport and uses 100% as the default font with only slight variations, that will never happen.But it still ignores the extreme cases, very small screens and very large screens, which is one problem that web standards are trying to address. The idea is that the content is what is important, and the page should adjust itself to the user's setup, not the other way around. The user's setup and the page design should coexist happily, not requiring zooming, text resizing, or anything else.

[jscheuer1]

The context was directly above, I quoted you only in order to highlight the precise area I was addressing.

The point I am trying to make is that the user's default zoom level will be one that uses the maximum available space, without introducing unnecessary scrollbars. Anything other than that is suboptimal.But it still ignores the extreme cases, very small screens and very large screens, which is one problem that web standards are trying to address. The idea is that the content is what is important, and the page should adjust itself to the user's setup, not the other way around. The user's setup and the page design should coexist happily, not requiring zooming, text resizing, or anything else.

Web standards do nothing in extreme cases either. Blow up the font size enough on a compliant page coded with em's and good design flow or shrink it. If you do it enough times (to simulate an extreme case) you get either micro-illegible text or text that is so huge that, you might as well forget about it and, talk about horizontal scroll bars . . . Not to mention how even very well thought out design flow can break down.

However you code your page, if you follow a few simple guidelines, you will be fine with Zoom. With standards compliance, the list is long and complex.

I really don't want to advocate for one or the other method. I just see the potential in Zoom and see that because of that, it may well become the wave of the future.