468,110 Members | 1,559 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,110 developers. It's quick & easy.

Unusual IE float drop issue

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;
}

Dec 1 '05 #1
7 5344
Els
al********@gmail.com wrote:
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
Dec 1 '05 #2
> [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

Dec 1 '05 #3
Els
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 ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Take That - Do What You Like
Dec 1 '05 #4
Els wrote:
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
Dec 1 '05 #5
>
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

Dec 1 '05 #6
Gus Richter <gu********@netscape.net> wrote:
Transitional puts IE6 into Quirks mode.


Only if the url is omitted.

--
Spartanicus
Dec 1 '05 #7
Spartanicus wrote:
Gus Richter <gu********@netscape.net> wrote:

Transitional puts IE6 into Quirks mode.

Only if the url is omitted.


Yes that is so.

--
Gus
Dec 1 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by Glen Able | last post: by
3 posts views Thread by bofh1234 | last post: by
5 posts views Thread by Peter Hansen | last post: by
11 posts views Thread by Christian | last post: by
3 posts views Thread by paul.denlinger | last post: by
9 posts views Thread by mathieu | last post: by
1 post views Thread by Solo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.