Anthony L wrote:
> I have a two-column liquid layout with a header and footer. The
> columns are floated and defined with a 70% / 30% width.
IE/win doesn't like that... :-) see below.
> i have an image in the h1 element in the header which overflows into
> the primary content area. I've achieved this by using padding on the
> h1.
Problem:
IE6 (and older versions) will expand the header until h1 fits inside.
Solution - make h1 appear smaller by adding...
#header h1 {
margin-bottom: -100px;
position: relative;
}
... which pulls up the bottom of the h1 so IE won't react on it.
Note also that the 'position: relative' is needed so the overshooting
part of h1 remains visible in IE/win.
> It looks fine in Firefox on both Mac and Windows. But in IE 6 on
> windows the text in the primary content area is pushed down. I assume
> the problem is to do with the padding, but I'm not sure how to fix
> it.
>
> <http://www.itu.dk/people/antl/css_play/exp_1.html>
Problem:
IE does has calculation-bugs, so primaryContent width: 65% +
padding-right: 5% + navigation width: 30% will result in more than 100%,
thus primaryContent gets pushed below navigation in order to fit.
Solution:
#primaryContent{
margin-right: 5%; <-- delete this
}
...as a margin isn't needed between those two floats, as they are
floated in opposite directions. The empty area between those floats
gives IE/win some space to put its bugs in ;-)
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
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/
