12 replies [Last post]
deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

I'm putting together a new layout: http://www.randomjabber.com/test/logogala/index.html

As far as I can tell, the site looks nearly identical in FF, Opera, Safari/Chrome. In IE7, there is one small area getting an extra 10px margin that I can't figure out where it's coming from. The #popularLogos container has 30px margin-top applied and it's fine except for IE7 where it looks like it's getting 40px margin-top.

Can anyone spot the cause for this? I'm sure it's one of my other styles interfering but I've not had any luck in finding it.

Thanks

Niklas
Offline
newbie
Stockholm
Last seen: 13 years 42 weeks ago
Stockholm
Timezone: GMT+1
Joined: 2007-07-08
Posts: 10
Points: 0

doubled margin?

Check this out, maybe it will be helpful. http://www.positioniseverything.net/explorer/doubled-margin.html /Nick

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Hi, I'm aware of the double

Hi,

I'm aware of the double margin bug in IE but it's only present on floated elements isn't it? With my problem, my container isn't floated and it's actually not even a double margin as I've applied a 30px margin-top and in IE7 it displays a margin-top of 40px. If it were the double margin bug I would be seeing a margin-top in IE7 of 60px, no?

Thanks

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Double margin only affects

Double margin only affects horizontal, not vertical margins anyway.

It's because IE gets clearing of floats wrong. This article should explain what's happening.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Hey John, I didn't realize

Hey John,

I didn't realize that the double margin bug was only on horizontal floated elements. Thanks!

Yes that link does help (although I still cannot get IE to respond). I seem to run into this problem once or twice in just about every design and I never really knew what was happening until now. I generally just apply a band aid and move on to more important issues.

So, as I understand it, I was attempting to add margin-top: 30px to the cleared container and as I understand it in the article, I simply need to apply a margin-bottom: 30px to the floated element above the cleared container. So, that's what I did by applying margin-bottom: 30px to #browseColors ul {} and FF is fine, but IE7 seems to not recognize that I've given the top floated container a margin-bottom at all. I can even give it a 300px margin-bottom and IE has no reaction.

So, I said "it must be a collapsing margin, right?" Paul's collapsing margin's article which was linked too in the float clearing article and see that vertical margins between a floated box and any other box do not collapse. So, from that I gather that it's not a collapsing margins issue since I'm applying a vertical margin (margin-bottom) on a floated box (#browseColors ul) to attempt to separate it from another box (#popularLogos). I do not have any margin-top on #popularLogos either so there's nothing to collapse anyway if I'm understanding the rule correctly.

I've updated the live template. Am I misunderstanding one of the rules here?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

No, I think you've

No, I think you've understood everything correctly, but it seems that .clearfix on #browseColors is causing the problem in IE. I rarely use clearfix; I try to find a solution first that will work with adding a dimension and overflow: hidden most often.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

John, Thanks for the input.

John,

Thanks for the input. At least I know what's causing it now. The only reason I used the .clearfix method was that it seemed the easiest. Just add a class of clearfix to any parent which has floated children and you're done. Maybe I need to rethink my approach. I have heard of the the overflow: hidden method but I've never used it myself. I'll have to read up on it and see if I can't fix this little bug.

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

John, I've removed all

John,

I've removed all instances of the clearfix method of clearing floats and used the overflow:hidden method (or as best I can with my limited knowledge of it up to this point).

The funny thing is that I'm experiencing the exact same problem with the overflow: hidden method as i was with the clearfix method. I've currently got the margin-bottom: 30px on the floated element (#browseColors ul) to be consistent with the article you gave me. It's as if IE7 doesn't even see the margin-bottom at all. If I change that margin-bottom to padding-bottom, it renders the same in FF, Opera, and Safari/Chrome as margin-bottom but IE7 seems to recognize a margin-bottom of 40px and not 30px.

I'm not sure what else to do here?

Also, had a quick question too to make sure that I understand the overflow: hidden method. Consider the following code:

#container {
overflow: hidden;
width: 200px;
}
 
#container ul {
float: left;
overflow: hidden;
width: 200px;
}
 
#container ul li {
float: left;
}
 
<div id="container">
	<ul>
		<li>item</li>
		<li>item</li>
		<li>item</li>
	</ul>
</div>

Have I used the overflow:hidden clearing method correct in the example above? The UL is floated so I need to clear it by using overflow:hidden in the #container div and each LI item is floated therefore I also need to clear them in the parent container (UL) using overflow: hidden. Is that right or overkill?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

A float element will contain

A float element will contain its own children. Since you float the ul, it contains its float li children, and there is no need for the overflow method.

See enclosing float elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Ah, thanks for that. After

Ah, thanks for that. After seeing it, I do remember that the floated parent will contain it's floated children. I think there's a float clearing method out there called something like "float absolutely everything"? Basically you're floating every element in the layout so no need for extra markup or CSS rules to clear elements. I could be wrong about that.

On the topic of the example code I gave earlier, the parent ul is floated as well as the child li. So, the parent ul is floated left, so no need to do anything extra to clear the child li. Since the parent ul is floated left, do I then need to clear it by giving #container overflow: hidden or is everything taken care and no need for that extra code?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

If you want the parent,

If you want the parent, #container, to enclose it, yes. If the following element is within #container, you could simply have it clear the float.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

I see. Makes sense. Thank

I see. Makes sense.

Thank you

deronsizemore
deronsizemore's picture
Offline
Enthusiast
Last seen: 12 years 22 weeks ago
Timezone: GMT-5
Joined: 2007-01-18
Posts: 113
Points: 14

Just thought I would post

Just thought I would post the fix to this problem in case anyone else is following. Turns out that #browseColors ul wasn't honoring the margin:0 and padding:0 specified in my CSS Reset. Evidently having the ID before the UL declaration throws it off. Once I found this out I was able to disable margin and padding on the #browseColors ul and fix the problem. Weird.