Forum Moderators: not2easy
I am building my first site layout that is based on DIV and CSS positioning. I set up a simple structure to start with, but noticed differences between how Mozilla and IE position the DIVs.
Here is the CSS I have:
.menu {position: absolute; top: 85px; left: 10px; width:200px; border: 1px solid #cccccc; background-color: #ffffff; text-align:right; padding:4px;}
.menu1 {position: absolute; top: 258px; left: 10px; width:200px; border: 1px solid #cccccc; background-color: #ffffff; text-align:right; padding:4px;}
.main {position: absolute; top: 85px; left: 228px; width:550px; border: 1px solid #cccccc; background-color: #ffffff; padding:7px;}
With this layout Firefox on Windows (latest release) shows a about 13 pixels vertical spacing between menu and menu1, while in IE there is no verticle spacing between the two. I noticed this is caused by the way IE and Mozilla diplay 'menu'. In IE one of the links wraps, making the menu longer. In Mozilla the DIV is widened as if there were a nowrap attribute like you have with tables. How can I let text links wrap in Mozilla/Firefox? Is there another perhaps better approach to building a CSS layout?
In IE one of the links wraps, making the menu longer. In Mozilla the DIV is widened as if there were a nowrap attribute
Here's what happens when each browser builds that #menu box...
IE: IE creates a box that is 200px wide, then packs your 1px wide border (that's 2px left/right combined) and 4px of padding (that's 8px left/right combined) INSIDE of that 200px. This effectively reduces the content space of the box by 10px, leaving you only 190px worth of usable space for things like links to occupy. The link in question is probably slightly longer than 190px wide, and so it is wrapping to a new line.
FF: FF creates a box that is 200px wide, but reserves all 200px for the content, and instead ADDS the 2px of border and 8px of padding to the OUTSIDE of the box. Leaving 200px of usable space for your link, which then displays on one line.
As a side note, IE is the one doing things wrong here (some people like the IE way better, think it's more intuitive, but it's still wrong). FF follows the W3 specs for box generation [w3.org].
How to fix it?
To make IE not wrap the link, you'll need to increase the value of the width property. 210px would obviously do it, since it would leave you 200px workable space.
The problem, though, is that FF will now have a box that is 220px wide, which may break the layout in other ways. So ultimately, you'll need to use one of the various box model hacks/work-arounds to get crossbrowser uniformity.
One way is to feed IE it's 'special' values via IE specific browser hacks that other browsers ignore. Check out this page [positioniseverything.net] for details.
Another is to nest the div inside of another div, assign this container the wdith value and leave the padding on the div inside. This results in a fixed width box (outer) with a non-fixed width box (inner) with padding inside of it. The key is never putting width and padding/border/margin on the same element...
html:
<div id="outer">
<div id="inner">Lorem ipsum...</div>
</div>
css:
#outer {
width: 200px;
}
#inner {
border: 1px solid #000;
padding: 4px;
}
One last thing to note: although you can fix this problem now, bear in mind that it could easily crop up again for your users should they resize the text on your page. Since the link in question obviously just barely fits in the container, any text increase will cause that link to wrap in both browsers and break the layout.
You might want to think about ways around this, including the possibility of sizing the <div>'s width in EMs, so that any increase in font size will also increase the box's width. Just a thought.
cEM
Now for some more testing to get a robust and hopefully browser independent layout..
Glad you got your problem solved. :)
