Michel Bozgounov wrote:
[snip]
> What's the best way to do it, now that I know the problem? ;-)
>
> 1) {zoom: 1} works pretty well, it only does not validate. But
> still works, which is good:)
>
> 2) I tried http://www.brunildo.org/test/InlineBlockLayout.html
> - the method {display: inline-block} but it works in IE and FF
> only, Opera reacts to it and the whole page messes up.
>
> 3) Third option is, I guess, to give widths to all of the
> elements on the page (if it is possible) - and probably "show"
> them only to IE 6/5.5/5 because other browsers doesn't have
> this problem...
>
> I will go probably the Option No.3 way.
>
> I was just curious, how you handle such situations? :-)
Well :-)
a) I don't care that zoom:1 doesn't validate.
b) I never used or had to use zoom:1 until IE7beta appeared. The
Holly hack worked just fine.
> In some cases, it's not difficult to add certain fixed width
> to an element, to make IE happy. But in cases that we would
> like the width to be auto-calculated?...
I don't know how complex your page is, but I've tackled that for
a simple 3-col layout, where I wanted the middle column to both
float and be flexible width.
I made a 3 layer div:
<div id="content">
<div id="content-float">
<div id="content-inner">
foo bar bla bla
</div>
</div>
</div>
I set div#content to have no particular width, just margins for
the sidebars, then I set div#content-float to float:left and
width:100%; and div#content-inner was used to add paddings.
(Can't add padding to 100% width or layout will screw up).
I did need a bit of hacking to make IE5 (quirksmode box model)
understand, but it works nicely.
The code as used for my LocusMeus.com site:
(only 2 cols but 3 cols would be the same, only with added
margin-left on #content)
#content{
background-color:rgb(255,255,255);
padding:0;
margin-bottom:0px;
margin-right:8.5em;
width:100%; /* needed for IE5, else the 100% width on the
content-float screws up */
w\idth:auto; /* for IE6, must not be seen by IE5 */
}
#content-float{
float:left; /* floated left so that there is no real need for a
width value (except for IE6 :-( ) */
width:100%;
}
#content-inner{
padding:10px 10px 20px 10px;
border-top:1px solid rgb(255,255,255); /* border to make IE5
behave */
}
HTH
--
Els
http://locusmeus.com/
http://locusoptimus.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
