Sent by Holly Bergevin on 5 February 2005 17:05
From: Scott Chesnut [EMAIL-REMOVED]>
>I'm working on a liquid layout with a floated div on the left and a
>table holding images on the right.
> in IE 6 the table of
>images drops down the page when the browser window shrinks in width.
>How do I prevent this?
>http://www.nutdesign.com/testmodule.html
Hi Scott,
I have a possible solution for you, if you're willing to go this route. It involves a negative
margin and (sorry) a spacer div...
To help IE emulate min-width, add a div with a non-breaking space in your HTML just above the last
closing div tag. Give it a class attribute of "spacer" - see below (spaces added to prevent the html
from displaying in *my* mail client)
< /table >
< div class="spacer" >& nbsp ;< /div >
< /div >
Then in your CSS, you'll need to add the following two selectors to one of your Mac-hack comment
constructions. You don't need to make a new one unless you want to.
/* Hides from IE-mac \*/
* html .imageblock {margin-right: -400px;}
* html .spacer {width: 760px; height: 0; font-size: 1px;}
/* End hide from IE-mac */
Also add the following new seletor to your style sheet -
html>body .spacer {d\isplay: none;}
The negative margin for .imageblock will not change the display. It merely gives IE some more room
in which to put that table as the browser window is narrowed.
The "spacer div" (don't hate me) forces IE to emulate min-width. If you want to see how it works,
give the spacer a background color. The width I came with is basically the point where my Mozilla
started showing a horizontal scrollbar. The invisible div holds the page open, but takes up only one
pixel of height, forcing IE to create the horizontal scrollbar just before the narrows enough to
drop the table. IE6 will still eventually drop the table, but not until the browser is narrowed to
the width of .imageblock itself. Handheld devices aside, it is unlikely that many people will be
surfing with their browser narrowed to 316px.
The last selector removes the spacer div from display in browsers that behave properly, so they are
not affected by the extra div at all. The escape in the property name is insurance that IE5.x/Win
browsers won't "accidentally" apply the property (by ignoring the html>body part of the selector an
only seeing the .spacer part).
So, the fix targets only IE/Win browsers and seems to work fine in my IE5/5.5/6.
hth,
~holly
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
