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

Hi there!

The code below gives me this result in Firefox.

And this result in IE6.

What I want is the layout to look in IE as it does in FF. In other words, I want the div with the yellow outline to overlap the div with the black outline.

Anyone have an idea of how I can go about accomplishing that?

View the example here.

Thanks!

The html:





The css:

#red { border: 1px solid red; width: 404px; height: 204px; }

#blue {
border: 1px solid blue;
width: 200px;
height: 202px;
float: left;
}

#green {
border: 1px solid green;
width: 200px;
height: 100px;
float: right;
}

#yellow {
border: 1px solid yellow;
width: 200px;
height: 130px;
float: right;
}

#black {
border: 1px solid black;
width: 404px;
height: 204px;
}

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

Add a doctype (

Add a doctype ( http://csscreator.com/node/18218 ).
If it doesn't work, come back.

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

Doctype added

Thanks. I've added the doctype, but the problem remains.

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

IE wrongly encloses

IE wrongly encloses floats.
Adding a negative margin-top for IE might be a solution as IE 6 considers height as min-height. It depends on what content you want to display.

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

Alright, is there a way to

Alright, is there a way to apply a negative margin only to IE? If I just apply "margin-top: -30px;" to the black square then it will move upwards in FF as well.

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

For IE 6, use: * html

For IE 6, use:
* html #black{margin-top:-30px;}

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

Problem solved!

Thanks! That worked very perfectly when I applied it to the real design. Is that a trick I can read more about somewhere? Seems to be a useful technique when all else fails.

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

Avoiding hacks is the best

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

Thanks

So IE is the only browser that recognizes the * html selector. Good to know. The info on avoiding hacks was great stuff as well. Thanks.