473,325 Members | 2,860 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

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

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 (814) 375-4846 \ / against HTML mail
Find commentary on law, economics, and X and postings.
other issues of the day at dochawk.org! / \
Jul 21 '05 #1
2 5685
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
Jul 21 '05 #2
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 (814) 375-4846 \ / against HTML mail
Find commentary on law, economics, and X and postings.
other issues of the day at dochawk.org! / \
Jul 21 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Robert | last post by:
I created two pages. One using CSS and the other using a table. I'd like the css version to work like the table version. The problem arises when the full image doesn't fit in the window. Click...
10
by: Jesper Rønn-Jensen | last post by:
Hope you can help me out on this one. I have a a box that is floated right. Below (in the normal float) I have a wide table. <body> <div style="float:right; width:200px">...</div> <p>This...
11
by: Dennis | last post by:
Please bear with me ... I am a newbie to DIVs. Why does the following work in IE6, but not in NS7? ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> ><HTML> > ><HEAD> > <META...
16
by: Woodmon | last post by:
I want to flow text in an "irregular" column on the left and place a large image at the top of an "irregular" column to the right. Then after the bottom of the large image I want the text column on...
36
by: phil-news-nospam | last post by:
Here is a simpler (no drop shadows) example of the padding bug I see: http://phil.ipal.org/usenet/ciwas/2006-05-08/buttons-1.html So far I find nothing in the CSS2 document that says I should...
9
panachepad
by: panachepad | last post by:
I arrived here from a websearch that found this thread from your archives: http://www.thescripts.com/forum/thread97805.html It helped me to understand that I am on the right track, but I still have...
22
by: ashkaan57 | last post by:
Hi, I am trying to put text on left and right side of the page and used: <div> <span>blah blah</span> <span style="float:right">blah blah</span> </div> The 2nd text does go to the right but the...
5
by: John | last post by:
Hi Suppose I want a header containing an image floated left and a list of horizontal links floated right. So I float the image left. I then do the following with the list: ul = float:...
27
by: GloStix | last post by:
WARNING VIDEO TAKES A WHILE TO LOAD http://screencast.com/t/BWQ6DNtsM I really don't know how to fix this other than putting another div. But I dont' exactly want to do that for every page....
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.