Unusual IE float drop issue

#1

I have this webpage where I am getting the dreaded float drop bug in
IE. I tried everything in the float drop FAQs online, but nothing can
get it working. I have narrowed down the problem though. For some
reason the left menu is 195px in IE instead of the 175 specified,
meaning that box divs are wider than the div they are contained in so
the right one drops. However, I can't figure out how to make the left
div equal to only 175px in IE. Any help would be greatly appreciated!

The code looks like this (with #contentleft and #contentright both
inside #frame):

#frame {
width:675px;
height:425px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}

#contentleft {
text-align: center;
height: 100%;
width:175px;
padding:0px;
float:left;
background:#fff;
border-color: #999999;
border-style: solid;
border-bottom-width: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
}

#contentright {
width:500px;
padding:0px;
float:left;
background:#eee;
height:100%;
border-color: #999999;
border-style: solid;
border-bottom-width: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
}

#2

alex.krupp (AT) gmail (DOT) com wrote:

Quote:

I have this webpage where I am getting the dreaded float drop bug in
IE. I tried everything in the float drop FAQs online, but nothing can
get it working. I have narrowed down the problem though. For some
reason the left menu is 195px in IE instead of the 175 specified,
meaning that box divs are wider than the div they are contained in so
the right one drops. However, I can't figure out how to make the left
div equal to only 175px in IE. Any help would be greatly appreciated!

The code looks like this (with #contentleft and #contentright both
inside #frame):

[snip CSS code for 3 elements]

That code in itself causes no problems in IE at all.
Maybe you should post an online example so we can see what you're
missing.

Before you do though, please read this link:
http://www.safalra.com/special/googlegroupsreply/

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Various Artists - Cinema - Sharon Lifshitz

#3

Quote:

[snip CSS code for 3 elements]

That code in itself causes no problems in IE at all.
Maybe you should post an online example so we can see what you're
missing.

The webpage in question is http://www.emoticomm.com. It works in FF,
Safari, and Opera, but alas in IE I am getting the float drop. The
stylesheet is located at http://www.emoticomm.com/stylesheet.css. Also,
I know the CSS is a bit sloppy but it should still work as far as I can
tell...

Alex

#4

Alex Krupp wrote:

Quote:

[snip CSS code for 3 elements]

That code in itself causes no problems in IE at all.
Maybe you should post an online example so we can see what you're
missing.

The webpage in question is http://www.emoticomm.com. It works in FF,
Safari, and Opera, but alas in IE I am getting the float drop. The
stylesheet is located at http://www.emoticomm.com/stylesheet.css. Also,
I know the CSS is a bit sloppy but it should still work as far as I can
tell...

The problem is caused by the margin:10px; in combination with
float:left; on the coloured divs in the #contentleft.
If you want the divs centered, leave out the float:left;.
If you want them to the left, there's no use for margin:10px;.

Also, you can't have your divs nested inside the <a> elements.
<a href="index.html" class="menu"><div id="red">Our Product</div></a>
should be:
<div id="red"><a href="index.html" class="menu">Our Product</a></div>

Last but not least, if you ask a question here saying you narrowed
down the problem, it's best to not leave out the code that is causing
the problem. The code you showed didn't narrow down the problem, it
omitted the problem ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Take That - Do What You Like

#5

Els wrote:

Quote:

Alex Krupp wrote:

[snip CSS code for 3 elements]

That code in itself causes no problems in IE at all.
Maybe you should post an online example so we can see what you're
missing.

The webpage in question is http://www.emoticomm.com. It works in FF,
Safari, and Opera, but alas in IE I am getting the float drop. The
stylesheet is located at http://www.emoticomm.com/stylesheet.css. Also,
I know the CSS is a bit sloppy but it should still work as far as I can
tell...

The problem is caused by the margin:10px; in combination with
float:left; on the coloured divs in the #contentleft.
If you want the divs centered, leave out the float:left;.
If you want them to the left, there's no use for margin:10px;.

Also, you can't have your divs nested inside the <a> elements.
a href="index.html" class="menu"><div id="red">Our Product</div></a
should be:
div id="red"><a href="index.html" class="menu">Our Product</a></div

Last but not least, if you ask a question here saying you narrowed
down the problem, it's best to not leave out the code that is causing
the problem. The code you showed didn't narrow down the problem, it
omitted the problem ;-)

I didn't check his CSS, but should work as well if he uses a Strict doctype.
Transitional puts IE6 into Quirks mode.
IE <6 is always in Quirks mode.
*All* new documents should be using Strict.

If he insists on using Transitional, he should apply the Box Model Hack.

He should change to HTML since he's not using XHTML properly.

--
Gus

#6

Quote:

I didn't check his CSS, but should work as well if he uses a Strict doctype.
Transitional puts IE6 into Quirks mode.
IE <6 is always in Quirks mode.
*All* new documents should be using Strict.

If he insists on using Transitional, he should apply the Box Model Hack.

He should change to HTML since he's not using XHTML properly.

Ahh, thanks for the reminder. I forgot that I borrowed parts of the
layout from someone else and didn't realize that I wasn't using strict
since I haven't gotten around to validating yet.

Alex