SearchSearch   

is it another IE bug? text do not float around fist floate..

  
   Webmaster Forums (Home) -> CSS RSS
Next:  Reset/unset css properties  
Author Message
Zhang Weiwu

External


Since: Feb 17, 2004
Posts: 45



(Msg. 1) Posted: Tue Jul 31, 2007 4:34 pm
Post subject: is it another IE bug? text do not float around fist floated object
Archived from groups: comp>infosystems>www>authoring>stylesheets (more info?)
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
Back to top
Andy Dingley

External


Since: Jun 01, 2007
Posts: 134



(Msg. 2) Posted: Tue Jul 31, 2007 4:34 pm
Post subject: Re: is it another IE bug? text do not float around fist floated object
Archived from groups: per prev. post (more info?)
On 31 Jul, 09:34, Zhang Weiwu <zhangwe....TakeThisOut@realss.com> wrote:
> 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.
Back to top
Zhang Weiwu

External


Since: Feb 17, 2004
Posts: 45



(Msg. 3) Posted: Tue Jul 31, 2007 9:20 pm
Post subject: Re: is it another IE bug? text do not float around fist floated
Archived from groups: per prev. post (more info?)
于 Tue, 31 Jul 2007 02:53:43 -0700，Andy Dingley写到：

> On 31 Jul, 09:34, Zhang Weiwu <zhangwe....RemoveThis@realss.com> wrote:
>> 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.
Back to top
Zhang Weiwu

External


Since: Feb 17, 2004
Posts: 45



(Msg. 4) Posted: Tue Jul 31, 2007 9:37 pm
Post subject: Re: is it another IE bug? text do not float around fist floated
Archived from groups: per prev. post (more info?)
于 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
> way it is on Firefox, that is, like this (see it in fixed width font)
>
> +----------------+----------+
> | <div id="1st"> | <div |
> +---------+------+ id="3rd" |
> | <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.
Back to top
Bergamot

External


Since: Sep 27, 2006
Posts: 727



(Msg. 5) Posted: Tue Jul 31, 2007 9:38 pm
Post subject: Re: is it another IE bug? text do not float around fist floated
Archived from groups: per prev. post (more info?)
Zhang Weiwu wrote:
>>
>> +----------------+----------+
>> | <div id="1st"> | <div |
>> +---------+------+ id="3rd" |
>> | <div id="2nd"> | ...> |
>> +----------------+----------+
>
> 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,

?

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.

--
Berg
Back to top
Display posts from previous:   
       Webmaster Forums (Home) -> CSS
Page 1 of 1

 
 You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum