Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
IE and margins: Grrrr!
I wiped everything and started with a clean CSS slate, expecting to use a pretty simple design so that I didn’t have to deal with any IE CSS incompatibility issues (I use Firefox). But, nooooo, you can’t make it simple enough to avoid the IE train wreck.
Can anyone suggest why IE deals with the left margin so differently (and unintuitively and, I reckon, incorrectly) compared to Firefox?
Here’s my test site: Urban Redneck Site
As you can see, there’s a photo on the second post. The CSS for the photo block is:
<code>.floatleft {
float: left;
width: 100px;
margin: 0 1em 1em 10%;
background-color: #ddd;
border: 1px solid #666;
}</code>
The 10% left margin is the same as the margin for the paragraph tag; the header tags use a 5% margin.
If you look at the page in Firefox, it looks fine; the photo is aligned with the left edge of the post text. But in IE, the photo is way to the right, more than 10% over and as far as I can tell even more than 20% over.
Like a good boy, I started off my CSS with:
<code>* {
margin:0;
padding:0;
}</code>
Anyone know what’s going on here, and how I can fix it without having to screw around with px settings?
Offline
Re: IE and margins: Grrrr!
Try this:
<code>
.floatleft {
float: left;
width: 100px;
margin: 0 1em 1em 10% !important;
margin: 0 1em 1em 3.4%;
background-color: #ddd;
border: 1px solid #666;
}
</code>
Offline
Re: IE and margins: Grrrr!
Thank you, that seems to have worked.
Can you tell me how and why?
Offline
Re: IE and margins: Grrrr!
!important is a css value which makes gives priority status to the property it is attached to. So if you have the same property twice within a css selector, the one with !important in it will overrule the other. IE, however, ignores this value and so uses the last instance of the property.
So, from your example, you have the margin property twice within the .floatleft selector. Normally, the second of these two properties would be used by the browser, but !important overrides the normal order. So this means you have can a property twice, one for firefox, opera, safari, etc., and one for IE.
Offline
#5 2006-05-31 19:36:54
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: IE and margins: Grrrr!
Part of the problems is the way IE calculates percentages, and the rest relates to the ever present IE box problem. While you can use the above method I prefer to use the IE conditionals to provide IE specific CSS changes.
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline
Pages: 1