is it another IE bug? text do not float around fist floated object

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Zhang Weiwu - 31 Jul 2007 09:34 GMT

Dear all.

This simple piece HTML produced different result between IE and all
others:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>\u6b22\u8fce\u6765\u5230\u5df4\u8d6b\u72d7\u961f\uff01</title>
<link type="text/css" href="style.css" rel="stylesheet" /> </head>
<body>
<div style="width: 63%; float: left; background-color: red;"> ABC
</div>
<div style="width: 63%; float: left; background-color: green;"> DEF
</div>
<div style="margin-left: 63%; background-color: blue;">GHI
</div>
</body>

</html>

On Firefox and Opera the word "GHI" is displayed the same line (same
vertical position) as "ABC", which is expected. On IE the word "GHI" is
displayed on the same line as "DEF", which is wrong.

I cannot see this IE bug filed in positioniseverything.net or
QuirksMode.org, probably they filed it already under different name.

I've working on various ways to fix it without success. This is a bad
problem in my website project because in my case the underlying web
application cannot join the first <div> and second <div> in one and
cannot change the sequence these divs gets output, so I have to find out
a solution to make Internet exploer layout 3 <div>s the way it is on
Firefox, that is, like this (see it in fixed width font)

+----------------+----------+

| <div id="1st"> | <div |

+---------+------+ id="3rd" |

| <div id="2nd"> | ...> |

+----------------+----------+

Thanks for comments!

Best Regards

Reply to this Message

Andy Dingley - 31 Jul 2007 10:53 GMT

> This simple piece HTML

Please post a URL, not a fragment.

We can't look at your problem because the fragment doesn't tell us the
CSS you're using, or the HTTP content-type header.

Reply to this Message

Zhang Weiwu - 31 Jul 2007 14:20 GMT

于 Tue, 31 Jul 2007 02:53:43 -0700，Andy Dingley写到：

>> This simple piece HTML
>
> Please post a URL, not a fragment.
>
> We can't look at your problem because the fragment doesn't tell us the
> CSS you're using, or the HTTP content-type header.

Here is the URI:
http://www.realss.com/tmp/test

While this HTML can be viewed online, I actually did all the testing by
opening HTML file with a double click on Windows Expolorer. The original
website that suffer from this problem have tons of css reference, so what
I posted in my original post is an extremely simplified version that have
this problem but contain no external CSS references (only style="..."). I
think simplify the issue with a few lines of HTML can help other people
who might wish to help to identify the problem.

Reply to this Message

Zhang Weiwu - 31 Jul 2007 14:37 GMT

于 Tue, 31 Jul 2007 16:34:53 +0800，Zhang Weiwu写到：

> Dear all.

[snip]

> cannot change the sequence these divs gets output, so I have to
> find out a solution to make Internet exploer layout 3 <div>s the
[quoted text clipped - 5 lines]
> | <div id="2nd"> | ...> |
> +----------------+----------+

I have managed to have done that after a lot of trials and discussion with
my colleague. Here is the solution (to use the solution I created a <div>
enclose all the other <div>s, and name it "container"):

div#container {
    position: relative;
    width: 100%;
}

div#the_1st, div#the_2nd {
    width: 63%;
    float: left;
}

div#the_3rd {
    width: 34%
    left: 63%;
    top: 0%;
}

this is very complex, compare to the "standard CSS" solution, which would
layout correctly with only one line of CSS:

div#the_1st, div#the_2nd {    width: 63%;    float: left; }

But, my complex solution works for IE! This is the most important thing
for my customer! In those days where everybody use IE, who cares if
standard CSS looks neater anyway.

I hope I can get some suggestions on what exactly is this IE bug and had
it been filed somewhere? Thanks in advance!

Best Regards.

Reply to this Message

Bergamot - 31 Jul 2007 20:09 GMT

>> +----------------+----------+
>> | <div id="1st"> | <div |
[quoted text clipped - 22 lines]
>
> this is very complex,

?

Adding a single container isn't "complex". Maybe you really meant
something else, but I'm not sure what that might be.

BTW, the left and top properties in the_3rd selector won't do anything.
They only apply to positioned elements (relative, absolute, fixed) and
have no effect on static (the default) elements or floats. Suggested
reading:
http://brainjar.com/css/positioning/

Pay special attention to the part about clearing floats, too, then see
http://www.quirksmode.org/css/clearing.html

> But, my complex solution works for IE!

Assuming that it does "work" (which I cannot confirm or deny), you not
knowing what is really happening will only make it that much harder to
maintain in the future. Instead of hacking away at something without
understanding it, take the time to learn what that CSS is *supposed* to
do. It will make everything so much easier in the long run.

> In those days where everybody use IE,

Um, no, they don't. You might search for some recent statistics on the
European market. The number of IE users isn't nearly as high as you think.

Signature

Berg

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2007

is it another IE bug? text do not float around fist floated object