2 replies [Last post]
jpath
Offline
newbie
Last seen: 15 years 9 weeks ago
Joined: 2004-05-12
Posts: 2
Points: 0

I've set a width in the body selector in my style sheet to prevent my page content from being 'pushed around' when resizing the browser window. So, all content stays put, and the browser adds scrollbars if the the content is larger than the window size.

Additionally, I have a table inside a div that gets pushed down below a sidebar, unless I set the body width as described above.

All this works fine, except that IE ignores 'width' when set in the body selector. The suggested workaround is to put a div immediately inside the body, and reset the width there. Not optimal, but I was willing to try it just to get the project up and running.

Here's the relevant css:

body {  width : 1000px;
       }

/* For IE's benefit: it ignores width in the body element. */
div.bodydiv { width : 1000px; }

/* Negate the preceding  for good browsers */
body>div.bodydiv { width :  100%;
                   margin : 0;}



I'm developing in Firefox where all is well. I test in IE6: all is well. The site is launched, and I immediately get email stating that the table with all the content is 'pushed down'. I contacted a colleague who is using the exact same version of IE that I tested in, and it's broken for her too.

Does anyone know how this could be? Is there another workaround that I should try that will work everywhere? I'm at a loss

Thanks,
j

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 36 weeks 4 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Getting around IE's ignorance of 'width' property in body

Hi

If you don't have a fully tabled design, IE is just not happy to prevent the problem you face. As long as your design is fluid width IE can' cope. HOWEVER, if (like you) you are prepared to go fixed width, help is at hand.

Make the width setting in the body min-width (just for Gecko browsers, and the next version of Safari when it gets released). DO NOT have a width setting in the body.

Instead, make a page container div, and put the width on that. EVERYTHING in the page must be inside this div. This div must have position:relative;

This will stop IE from floating things around, unless your floats are % width based. If they ar % based, as the screen size changes, so do they, but any fixed width element in with them will cause them to drop down.

Trevor

jpath
Offline
newbie
Last seen: 15 years 9 weeks ago
Joined: 2004-05-12
Posts: 2
Points: 0

Getting around IE's ignorance of 'width' property in body

Thanks, but no dice. I added the position:relative to the body div that I already had, and changed width to min-width in the body selector: no change.

The really bizarre thing is that all this works great on the IE6 that I'm testing on (I'm developing in firefox). However, colleagues that are using the exact same version of IE are experiencing the pushed down table effect. How can this be?

One thing I'm relying on to position the table in question is IE's lack of support for child selectors. So, to centre the table in it's containing div:

/*  IE will pick up this rule */
/* IE doesn't appear to grok 'auto' */
div.tabtable table { margin: 3em 12em 3em 12em;
                     }

/* IE should ignore this, due to child selector */
/* This will do it right for sane browsers */
div.tabtable>table { width : 75%;
                     margin: 2em auto 2em auto;}

Is this a reliable assumption? (about the child selectors?) Or could IE be picking up that floating width in the second rule and wreaking havoc as you said it might?