View Full Version : Firefox vs IE: Margins and H-Scroll bars with CSS

08-24-2005, 02:29 AM
I'm having some difficulties getting a page to display consistently in Firefox (1.04) and IE (6.whatever).
I'm using CSS with an absolute position to put my main content to the right of a menu. Code from the CSS is below:

#content {
position: absolute;
top: 0;
margin-left: 15em;
wrap: on;

In Firefox, the text in the main document wraps as you'd expect, and no horizontal scroll-bar is evident. So far so good.

If IE, some of the text is off the screen and there is a horizontal scroll bar. The text still wraps, eventually, but it's as if the scroll bar was created to make the overall page width larger by the size of the left margin.

I've had a good look around various forums and FAQ's and haven't found anything that has an effect yet.

Any pointers would be greatly appreciated.


08-24-2005, 03:22 AM
Why even use absolute positioning?
If you float your menu to the left and give your content enough left margin to clear the menu then you shouldn't need absolute positioning. What the heck is wrap:on? That isn't valid CSS.

10-04-2005, 03:03 PM
Thanks for the reply. You're right about the wrap:on thing of course, it was some rubbish left over from some desparate attempts to get things working.

Regardless of the positioning model I use, the effect remains unchanged.

I've got a test page at:
with a link to a version without the menu/css, without the CSS it's fine in both browsers, with it, the flaky behaviour is still present in IE.

I suspect it's to do with the margin-left shifting the starting point for the content division, but increasing the page width by the margin.

Any ideas would be greatly appreciated.

I've included my entire CSS file below (sans header comments):

li { margin-left: 0em; }

ul#navigation {
left: 0;
width: 13em;
margin-left: 0em;
margin-right: 0;
padding-left: 0em;

ul#navigation li {
margin-left: 0;
margin-right: 0;
padding-left: 0em;
list-style: none;
background-color: #039;
border-top: solid 1px #039;
text-align: left;
width: 13em;
ul#navigation li a {
display: block;
text-decoration: none;
padding: .25em;
border-bottom: 1px solid #3399FF;
border-right: 1px solid #3399FF;
width: 12.5em;

#content {
position: absolute; /* Was absolute */
top: 0;
margin-left: 15em;
color: white;

body {
color: white;
background: black;

a:link, a:visited { color: white; } /*Already vistited links*/
a:hover, a:active { color: yellow; } /*text color while highlighted*/
a:hover { backround-color: yellow; } /*background colour while highlighted #fff */

h1 { color: red }
h2 { color: yellow}
h3 { color: yellow }
h4 { color: white }
h5 { color: red }

p {color: white }

10-04-2005, 09:14 PM
I'm not sure what you mean, but maybe it helps if you consider using a unique id. Navigation is defined twice.

Also your code could be much more compact. If you just put in #navigtion * { margin:0; padding: 0 } it would already take a few bytes.

Also, the headings and paragraph's, you're already saying you want it white in body. So there's no need to define them there anyway.

And I also have to nag about the <font>, "orange" is no valid value. #FFA500, or even better, #f90, is the right value.

OK, I see. The problem probably lies in the fact of absolute positioning. Float #navigation, give #content a margin-left of the width of the menu, and fix the 3px bug in IE (http://www.positioniseverything.net/explorer/threepxtest.html).

10-05-2005, 02:19 AM
Thanks. I'm not sure what you mean by "navigation" being defined twice - arent't the repeats simply more specific cases?

At any rate, I've floated the navigation items as suggested but to no avail.

I've tried playing with the content position value, and found the following:

position: absolute; /* Works as before, looks OK in FF, extra width (and therefore scroll bars) in IE */

position: static; /* Static fixes the H-scroll problem, but the content starts below the bottom of the menu i(vertically) in both FF and IE */

position: fixed; /* Same as static for IE, OK in FF! */

Again, I don't think the left margin is to blame as such, but it seems as though the width of the content section is fixed at the fill browser width, even though it's offset by the margin.

I've updated the test page to be a little more helpful, but you get the idea:

Also, thanks for the optimisation tips, I'll take them on board, but I'm trying to get the site looking functional first. I've already fixed the orange colour reference, thanks.

10-05-2005, 11:45 PM
Position static is what you get without any styles applied. Document flow. Position fixed isn't supported by IE.

Blablabla (http://validator.w3.org/check?uri=http%3A%2F%2Fhome.exetel.com.au%2Foas%2Ftestmain.php&verbose=1)

Validating will make your work much easier.

10-06-2005, 05:26 AM
I ended up going through the validation processes for both the html and css. A combination of the error messages, some RoTFM and a bit of trial and error with IE and FF sorted me out.

Thanks to all who pointed me in the right direction. Your advice and patience is appreciated.

10-06-2005, 09:36 AM
No problem. I'm glad I helped you. :)