A different IE float bug: text flows under right images only

[Dr. Richard E. Hawkins]

I've googled around, and asked everyone I know, but I still can't find
any reference to anyone else having faced this particular IE bug with
floats.

I've put a page at http://dochawk.org/sample.html . This was made by
stripping out the google ads from the regular pages. It validates as
strict 4.01 at http://validator.w3.org. (The google ads drive it nuts!)

The main (right) column is made with alternating left and right floats
to put blocks in partway down--the google skyscraper on the left and the
picture and "ask dochawk" box on the right. This is done by alternating
floats of .1px and of the size that I want to use (I've clipped the code
in at the end).

I want the main text to wrap around these blocks, and use the same code
on most pages, simply including different body text.

On mozilla, firefox, and opera, all works well. On IE 6, howerver, the
right-hand floats are ignored and text is placed underneath them. Not
overlapping them; they're completely ignored as if they weren't there.
Apparently IE5 running under wine doesn't have this problem.

The floats I use for positioning are .1px rather than 0px aas opera and
mozilla both collapse them to zero height as well at 0px.

Is there a clean way to deal with the IE problem? Making and
conditionally including different css sheets based upon the browser not
only seems ugly, but would require moving the picture to the left of the
column (and making the page itself ugly). It also seems dangerously
close to the peek-a-boo (not the right term) pages google warns about.

While I'm at it (moving from serious problem to simple ignorance), could
the whole series of floats be put into the style sheets as a single
element to be used before specifying the content text, or would I have
define each paragraph in the style sheet and then include them all?

thanks

hawk

The code:

(starting the second column of a table):

<td valign=top>
<div style="float:right;width:0.1px;height:250px">
<!--div id="hr1"-->
</div>
<div style="float:left;width:0.1px;height:700px"></div>
<img style="float:right;clear:right;height:375px; width:217px;padding:6;
position:relative;top:6"
src="http://dochawk.org/images/hawkins.jpg"
alt='picture of Dr. Richard E. Hawkins'
/ >

<p style="float:left;clear:left;height:600px; width:160px;padding:4;
position:relative;top:6"/>
</p>

<div style="float:right;width:0.1px;height:850px"></div>
<div style="float:left;width:0.1px;height:350px"></div>
<p
style='float:right;clear:right;width:30%;padding:4 ;border-style:solid;border-width:2;'>
Have a question for dochawk? See answers at
<a href="/askdochawk.php">askdochawk</a>!
</p>
<div style="float:left;width:0.1px;height:1px"></div>

--
Richard E. Hawkins, Asst. Prof. of Economics /"\ ASCII ribbon campaign
do*****@psu.edu 111 Hiller [phone] \ / against HTML mail
Find commentary on law, economics, and X and postings.
other issues of the day at dochawk.org! / \

[Martin!]

Dr. Richard E. Hawkins wrote:

I've googled around, and asked everyone I know, but I still can't find
any reference to anyone else having faced this particular IE bug with
floats.

I've put a page at http://dochawk.org/sample.html . This was made by
stripping out the google ads from the regular pages. It validates as
strict 4.01 at http://validator.w3.org. (The google ads drive it nuts!)

The main (right) column is made with alternating left and right floats
to put blocks in partway down--the google skyscraper on the left and the
picture and "ask dochawk" box on the right. This is done by alternating
floats of .1px and of the size that I want to use (I've clipped the code
in at the end).

I want the main text to wrap around these blocks, and use the same code
on most pages, simply including different body text.

On mozilla, firefox, and opera, all works well. On IE 6, howerver, the
right-hand floats are ignored and text is placed underneath them. Not
overlapping them; they're completely ignored as if they weren't there.
Apparently IE5 running under wine doesn't have this problem.

The floats I use for positioning are .1px rather than 0px aas opera and
mozilla both collapse them to zero height as well at 0px.

Is there a clean way to deal with the IE problem? Making and
conditionally including different css sheets based upon the browser not
only seems ugly, but would require moving the picture to the left of the
column (and making the page itself ugly). It also seems dangerously
close to the peek-a-boo (not the right term) pages google warns about.

While I'm at it (moving from serious problem to simple ignorance), could
the whole series of floats be put into the style sheets as a single
element to be used before specifying the content text, or would I have
define each paragraph in the style sheet and then include them all?

thanks

hawk

The code:

(starting the second column of a table):

<td valign=top>
<div style="float:right;width:0.1px;height:250px">
<!--div id="hr1"-->
</div>
<div style="float:left;width:0.1px;height:700px"></div>
<img style="float:right;clear:right;height:375px; width:217px;padding:6;
position:relative;top:6"
src="http://dochawk.org/images/hawkins.jpg"
alt='picture of Dr. Richard E. Hawkins'
/ >

<p style="float:left;clear:left;height:600px; width:160px;padding:4;
position:relative;top:6"/>
</p>

<div style="float:right;width:0.1px;height:850px"></div>
<div style="float:left;width:0.1px;height:350px"></div>
<p
style='float:right;clear:right;width:30%;padding:4 ;border-style:solid;border-width:2;'>
Have a question for dochawk? See answers at
<a href="/askdochawk.php">askdochawk</a>!
</p>
<div style="float:left;width:0.1px;height:1px"></div>

where most people use lipsum very very few people write an essay on
fairtax to make a point on a IE problem. your example is rather
elaborated, you could have condenced it to the simple problem at hand.

to add to your problem, you could start by adding: </head> to conlude
your header.

on your problem, you appeared to have forgotten some clearing:

<div style="float:right; clear: right; width: 0.1px; height: 850px;
"></div>
<div style="float:left; clear: left; width:0.1px;height:350px"></div>

i believe this will solve your problem.

btw. you could do yourself a favor by beeing a little bit more
consistant with using ' and ", and it is not neccecary to close tags
with /> since you dont write xhtml. also use <p></p> combinations would
be nice.

btw .. 'fairtax' sounds like a contradiction in termis

gl

martin

[Dr. Richard E. Hawkins]

In article <d0**********@news4.zwoll1.ov.home.nl>,
Martin! <ma**********@home.nl.knip.knip.knip> wrote:

Dr. Richard E. Hawkins wrote:
http://dochawk.org/sample.html

where most people use lipsum
lipsum?
very very few people write an essay on
fairtax to make a point on a IE problem. your example is rather
elaborated, you could have condenced it to the simple problem at hand.
:)

The essay was already there; I stripped out the google portions of the
page as it was otherwise stricthtml. I was worried about stripping out
too much, as it might not have happened (and except by pokiing my head
in other people's offices, I don't have a networked ms windows
available [and with the snowstorm, there's been noone around for a
couple of days]).

to add to your problem, you could start by adding: </head> to conlude
your header.
Intriguing. Now i wonder how the page got generated. It was supposed
to come out of the same php echo as the other text near it, but an
errant semmicolon made it a freestanding line ( "</body"; ) or
somesuch. Thanks
on your problem, you appeared to have forgotten some clearing:

<div style="float:right; clear: right; width: 0.1px; height: 850px;
"></div>
<div style="float:left; clear: left; width:0.1px;height:350px"></div>

i believe this will solve your problem.
You're right! Thanks greatly.

btw. you could do yourself a favor by beeing a little bit more
consistant with using ' and ",
I'm trying to move to single quotes unless I need doubles. The
different age of different parts is apparent :)
and it is not neccecary to close tags
with /> since you dont write xhtml.
I've been wondering about that. Thanks.
also use <p></p> combinations would
be nice.
Oh? Does </p> actually mean anything, or does it just make the source
clearer?
btw .. 'fairtax' sounds like a contradiction in termis

Yeah, but they wouldn't get far with "not quite as unfair" as their
motto.

thanks greatly

hawk
--
Richard E. Hawkins, Asst. Prof. of Economics /"\ ASCII ribbon campaign
do*****@psu.edu 111 Hiller [phone] \ / against HTML mail
Find commentary on law, economics, and X and postings.
other issues of the day at dochawk.org! / \