On 6/16/11 7:39 AM, Peter Bradley wrote:
Hi,
I'm developing a WordPress site:
http://www.stellawhitelaw.co.uk
In every browser I tested except IE6 and 7, the image on the left
floats left and is not cleared until the main navigation menu. In
IE6/7, the div holding the site title clears the floated image. I'm
not actually sure which div it is that is doing the clearing. I think
it could either be div#masthead or div#branding.
I googled a bit and found a suggestion to add this to the styles:
* { zoom: 1.0; }
It didn't change anything, though. Beyond that, my Google-foo let me
down.
Could someone please put me on the right track?
Boy, you're a glutton for punishment!
The reason old IE versions misbehave is due to a magic potion that
Microsoft calls "having Layout"[1]. It is triggered by floats,
positioning, dimensions (width or height), and the incantation of
"zoom" (any value but the default "normal") - among other things.
As you discovered, using "zoom" is often recommended to fix layout
problems in old IE. But in my experience it creates almost as many
problems as it fixes. It is the culprit in your case here.
In your style-sheets, you have these "Layout" triggers that affect
#site-title -
style.css line 12:
* {
zoom: 1.0;
}
style.css line 21:
#site-title {
width: 500px;
}
style-1.css line 341:
#site-title {
float: left;
width: 700px;
}
You also have "hasLayout" on the enclosing #branding:
#access .menu-header,
div.menu,
#colophon,
#branding, /* <- here */
#main,
#wrapper {
width: 940px;
}
Getting rid of all those triggers fixes it this end.
Good luck.
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
--
Cordially,
David
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
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/
