Martin Pistorius wrote:
> Hi there,
>
> I'm hoping someone can help me - I'm struggling to resolve an issue in
> IE which despite many frustrating hours I've yet to figure out.
>
> I have tested the design in Firefox 3, Opera 9 and Google Chrome and it
> works. However in IE on the left border of the main content div seems to
> be obscured by the form inside it. The page in question can be viewed
> at: http://www.greenlawns.co.za/NewSite/contact.php
>
> I would be most grateful for any help.
>
> Kind regards,
>
> Martin
Hello Martin,
Both IE6 and IE7 are showing the escaping float / pee-ka-boo bug [1]
[2]. The border-left is not rendered for particular zones (150px in
height) on the div#mainContent due the floated div#leftBox earlier in
the source.
The way to fix it is trigger hasLayout [3] on the div#mainContent by
simply adding a non-consequential height.
#mainContent {
border-left:1px solid #090;
padding:0.4em;
margin-left:150px;
text-align:left;
height:1%; /* hasLayout trigger */
}
The will fix IE7 but IE6 will now show the 3px float bug in IE6. Last we
can just fix that by playing with a few margins and giving this only to
IE6 and lower.
* html #mainContent { /* fix for IE6 3px jog bug */
margin-left:147px;
}
* html #leftBox { /* fix for IE6 3px jog bug */
margin-right:-3px;
}
1. <http://www.positioniseverything.net/explorer/escape-floats.html>
2.
<http://css-class.com/articles/explorer/floats/escaping-floats-peekaboo.htm>
3. <http://www.satzansatz.de/cssd/onhavinglayout.html>
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
