floating images ie7

**kakmonstret** · Jul 12, 2007 08:31

I have search the web for a few hours and haven't found any solution to ie7 buggs for this particular layout.

What I want is to be able to generate a series of img tags with class left or right and get them to flow in a text below each other and on the left or right side depending on what class they got. I got this to work perfectly in FF but not in ie7.

What I want is somethin like this:

Code:

XXXXXIMG1
XXXXXIMG1
IMG2XXXXX
IMG2XXXXX
IMG3XXXXX
IMG3XXXXX
XXXXXXXX

I can get this in FF with float:left and float:right and clear:both but in ie7 I get this:

Code:

IMG2XIMG1
IMG2XIMG1
IMG3XXXX
IMG3XXXX
XXXXXXXX
XXXXXXXX
XXXXXXXX

I have tried clearing divs putting in floating contense between the images and a 100 other fixes and stuff anybody got any idea how to fix this???

Here is a simplyfied test case:

Code:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>ie7 buggy bug!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; font-size: 12px}
p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; width:400px;}
td {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}
.floatleft {float:left; display:block; clear:both; margin-top: 0px; margin-bottom: 10px; margin-left: 0px; 

margin-right: 10px;}
.floatright {float: right; display:block; clear:both; margin-top: 0px; margin-bottom: 10px; margin-left: 

10px;margin-right: 0px;}
-->
</style>
</head>
<body>
<p>
<img src="image.jpg" class="floatleft" width="50" height="50">
  <img src="image.jpg" class="floatright" width="50" height="50">
<img src="image.jpg" class="floatleft" width="50" height="50">
  <img src="image.jpg" class="floatright" width="50" height="50"> 
This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't 

this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... 

This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't 

this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... 

This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't 

this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... 

This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't 

this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... 

This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't 

this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... 

This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't 

this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... 

This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't 

this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... 
</p>
</body>
</html>

**Dan_A** · Jul 12, 2007 08:42

Have you got a complete doctype ?

**kakmonstret** · Jul 12, 2007 08:49

Thanks for the reply!

On the real site I have a doctype forgot it in this test case, added it in the test didn't make any difference =(. Well was worth a try considering that the real site is quite complex.. Again thanks!

Best regards
Kakmonstret

**kakmonstret** · Jul 12, 2007 22:06

Anybody?

No one know if this is at all possible or even meant to work maybe it is FF that does things wrong I don't know???

Best regards
kakmonstret

**Dan_A** · Jul 13, 2007 09:59

It this close to what you want ?

Code:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>ie7 buggy bug!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; font-size: 12px}
p { margin:0;clear:both;width:400px;}
.floatleft {float:left; margin: 0;}
.floatright {float: right;margin: 0;}
-->
</style>
</head>
<body>
<p><img src="image.jpg" class="floatleft" width="50" height="50">This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't</p>
<p><img src="image.jpg" class="floatright" width="50" height="50">This dosen't this work... This dosen't this work... This dosen't this work... This dosen't this work... This dosen't</p>
</body>
</html>

**kakmonstret** · Jul 13, 2007 14:21

Thanks for the reply!

yeah problem is that I got the text and images separated in the server side script so I have noway to sync the images and text. So I need the images to spread down in the text even if the image tags are in the same place. Or I need a really clever way to spread the img tags in the text and after the text if the text is short.

Again thanks for the reply sadly I can't do it in that way.

Best regards
kakmonstret

User Tag List

Thread: floating images ie7

Thread Tools

Display

floating images ie7

Bookmarks

Bookmarks

Posting Permissions