Float right IE problem

Forum Moderators: open

Message Too Old, No Replies

Float right IE problem

Text is displaying unusually

Noisehag

6:22 pm on Nov 6, 2007 (gmt 0)

Hello all. Have a bit of an odd one here. The objective is to have an image (I substituted a div for this example) floating right with small amounts of text next to it. It displays as I would expect in FF, but IE is doing something odd to the text. I cannot specify a width on the outer table because the text will be dynamic and vary in length.

Take a look in FF and you will see how I would like it to appear in IE. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
.floatbox {
width:120px;
height:80px;
float:right;
margin-left:10px;
background:#cccccc;
}
</style>
</head><body><center>
<table><tr><td><div class="floatbox"></div>
<li> Lorem ipsum dolor sit amet<br>
<li> Duis autem vel eum<br>
<li> Duis feugait nulla facilisi<br>
<li> Vel illum dolore eu feugiat</td></tr></table></center></body>
</html>

penders

7:47 am on Nov 7, 2007 (gmt 0)

I think it's only displaying 'OK' in FF because your markup is invalid! You are missing the opening/closing UL tags (if you are intending it to be a list?)

<ul> 
 <li>Lorem ipsum dolor sit amet</li> 
 <li>Duis autem vel eum</li> 
 <li>Duis feugait nulla facilisi</li> 
 <li>Vel illum dolore eu feugiat</li> 
</ul>

It now displays differently in FF (and IE), because of the margin/padding on the UL - although not as you require.

I cannot specify a width on the outer table because the text will be dynamic and vary in length.

My gut reaction is you need to specify a width on something, and simply let the text flow down the page? But you want the text to expand the width, not just the length. You could try something like... (losing the table)...

<div class="outer"> 
 <div class="floatbox"></div> 
 <div class="text"> 
 <ul> 
  <li>Lorem ipsum dolor sit amet</li> 
  <li>Duis autem vel eum</li> 
  <li>Duis feugait nulla facilisi</li> 
  <li>Vel illum dolore eu feugiat</li> 
 </ul> 
 </div> 
</div>

Additional CSS:

.text { 
text-align:left; 
float:right; 
}

But you're going to have problems centreing the 'outer' container without a width? Without a width set... the TABLE is not expanding enough to fit its contents (at least not enough to prevent wordwrap in IE); the DIV too much.

Noisehag

4:26 pm on Nov 7, 2007 (gmt 0)

Yes, I see that I had the missing UL tags. That was definitely not the problem as I simply tried it with a single sentence of 5 words. And you are right about this still being a problem centering the outer container. The only solution for me at this point is to float left, as that displays correctly, but not my preference.

Thank you very much for your input penders. :)

I'll leave the following for anyone that might like to try and find a solution for this odd display problem.

Float right displays text poorly in IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
.floatbox {
width:120px;
height:80px;
float:right;
margin-left:10px;
background:#cccccc;
}
</style>
</head><body><center>
<table><tr><td><div class="floatbox"></div> 
Lorem ipsum dolor sit amet</td></tr></table></center></body>
</html>

Float left displays text correctly in IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title></title>
<style type="text/css">
.floatbox {
width:120px;
height:80px;
float:left;
margin-right:10px;
background:#cccccc;
}
</style>
</head><body><center>
<table><tr><td><div class="floatbox"></div> 
Lorem ipsum dolor sit amet</td></tr></table></center></body>
</html>