16 replies [Last post]
hoicem
Offline
Regular
Last seen: 13 years 50 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

This is driving me bonkers...

IE 6 for some reason I cannot work out adds 15px of extra space at the right side of the last UL. Pushing the containing div 15px wider than it should be.

Title

* {
padding: 0;
margin: 0;
}

body {
color: white;
background-color: #EFEFEF;
}

.container {
width: 800px;
background-color: #FFFFFF;
margin-top: 10px;
height: 400px;

}

ul {
float: left;
width: 180px;
margin-right: 20px;
background-color: red;
}

li {
list-style-type: none;
}

  • 1
  • 2
  • 3
  • 4

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 5 days ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Double margin bug ? add

Double margin bug ?
add display:inline; in ul

hoicem
Offline
Regular
Last seen: 13 years 50 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

DanA wrote:Double margin bug

DanA wrote:
Double margin bug ?
add display:inline; in ul

thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Did that work?

Did that work?

iirc, double margin only affects the margin of the first element and only in the direction of the float (ie, margin-left with float:left)

/edit, I did some experiments. Double margin appears to apply to the extreme elements in the set. That is, the left hand element will get double margin-left and the right hand element will get double margin-right. Float direction doesn't matter.

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

That's good to know, Chris.

That's good to know, Chris. Thanks for the experiments.

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Chris just to clarify: Are

Chris just to clarify:
Are you saying that both extreme (outer) elements at either end of a run of floated elements will receive a double margin irrespective of the float direction? i.e the last element floated left will have a margin-right doubled?

I always understood it to be that the float had to abut the parent and the edge of the float in the direction it was floated had to have a margin, so floated left to the parents inner edge along with a margin left would be doubled, conversly a right float to parents right edge with margin-right would be doubled; A floated element floating to abut the right edge of the first float however would not demonstrate a doubling

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

hoicem
Offline
Regular
Last seen: 13 years 50 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

DanA wrote:Double margin bug

DanA wrote:
Double margin bug ?
add display:inline; in ul

I've done some more testing and adding 'display:inline' to the UL adds some indentation in IE6, and I cannot work out how to get rid of it. See attachment and notice how the text has dead space in front of it.

AttachmentSize
ie-indent.png 754 bytes
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Well you can get rid of that

Well you can get rid of that text-indent by adding display:inline to the li elements as well, especially as they are displaying inline. Why are you wrapping each list element in a ul though? and not floating the li elements or displaying them inline within a single ul element? to my mind you cant have a list that consists of a single item isn't that somewhat oxymoronic

@ Chris: forget I asked for the clarification, above ran the test case myself and well I'll be b*****d can IE6 ever cease to surprise? this is contrary to any explanation of the double margin bug I've read, thought it was quite clear the conditions that give rise to said bug and wonder how I've never run up against this before other than I nearly always add display:inline automatically.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

hoicem
Offline
Regular
Last seen: 13 years 50 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

I just shortened the lists

I just shortened the lists for testing purposes. I always think the less markup the better when it comes to testing.

hoicem
Offline
Regular
Last seen: 13 years 50 weeks ago
Joined: 2007-03-04
Posts: 26
Points: 0

Hugo wrote:Well you can get

Hugo wrote:
Well you can get rid of that text-indent by adding display:inline to the li elements as well,

This does indeed work, the problem now seems to be it limits when you can have in the list.

Try adding some padding to the li's aswell and you'll see it doesn't do as desired, any ideas?

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

Test case

Will either of you post your test case, please?

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Gary I was just working from

Gary I was just working from the original code posted at the beginning

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

<!DOCTYPE html PUBLIC

Title

* {
padding: 0;
margin: 0;
}

body {
color: white;
background-color: #EFEFEF;
}

.container {
width: 800px;
background-color: #FFFFFF;
margin-top: 10px;
height: 400px;

}

ul {
float: left;
width: 180px;
margin-right: 20px;
background-color: red;
display:inline;/*clear IE double margin bug manifesting on last float to right*/
}

li {
list-style-type: none;
display:inline;/* kill unwanted text indent in IE*/
}

  • 1
  • 2
  • 3
  • 4

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I don't really have a test

I don't really have a test case per se. I used the OP's html and made a series of changes observing the results. Like Hugo, I'd always worked under certain assumptions for the double margin bug, pretty well automatically correcting for the problem before viewing pages in IE.

To clarify what I said earlier - note my tests weren't exhaustive or particularly well structured, just sufficient to disprove my previous assumptions.

My previous belief was double margin bug affected the margin-left of first (left most) float:left element and the margin-right of the first (right most) float:right element. While true, it isn't the whole story.

A more correct statement is the double margin bug affects the floated elements edge closest to the outer container's edge. So the floated element closest to the right hand container edge will get its margin-right doubled. This element could be the first float:right element or the right most of several float:left elements. Similarly for left hand edge and margin-left.

Its a little tricky to see margins when more than one element is involved. For one element I floated the container (with width auto) and observed where its borders were pushed to. For two or more elements I varied the specified container width to observe at what width IE6 could fit the floated elements.

This is all pretty esoteric as the simple fix is to automatically apply display:inline to any floated element (or maybe any floated element which has a horizontal margin). Do that and forget about the problem. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's probably not one to

It's probably not one to dwell on cos as you say it's an easy fix - generally, although again I hadn't come across the text-indent occurence.

Greater than the perplexity of this bug -especially given this new previously overlooked condition - is the problem in trying to write a clear explanation of the conditions required to produce the bug Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I missed something, what is

I missed something, what is the text indent occurence?

When you make something display:inline, white space in your html source becomes significant.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

When the display:inline is

When the display:inline is applied to the ul the margin is corrected but an amount of padding or white space is applied to the character data in the list elements causing an apparent text indent of ~10px, can't see why off hand, probably a sane reason that I have just missed; did look at markup whitespace :shrug:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me