Welcome to WebmasterWorld Guest from 54.161.110.186

Forum Moderators: not2easy

Message Too Old, No Replies

float left & IE6 problems

IE6 breaks containers using float left

     
9:13 pm on Apr 24, 2003 (gmt 0)

10+ Year Member



When I float (left) a series of same size images within a container, IE6 breaks the container boundaries and does not wrap till the edge of the screen. All other browsers behave as required.
If I stack the images up using float:right; all is fine and IE behaves properly, keeping the images within the boundaries. Anyone know what might cause this problem.
10:47 pm on Apr 24, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Jeremy,

Welcome to WebmasterWorld [webmasterworld.com]

I just tried to replicate this but it looked fine in IE.
The code I used was...


<div style="border:1px solid red; width: 500px;">
<img style="float:right" src="image.jpg">
<img style="float:right" src="image.jpg">
<img style="float:right" src="image.jpg">
<img style="float:right" src="image.jpg">
hello
</div>

Could you post a code snippet like this that demonstrates your problem?

10:48 pm on Apr 24, 2003 (gmt 0)

10+ Year Member



Hi Jeremy

I think youve hid upon a bug in ie6. But i am not sure

Give us a code chunk to play with to see what you have.

Can anybody certify that this is indeed a bug in ie6? and maybe some more advice?

Regards
Hafnius

10:20 am on Apr 25, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There has been a number of bigs across browsers with the float property, from IE5 on the Mac, to IE6 on the PC.

There is an explaination of the different float bugs is here [positioniseverything.net]. And a solution to the MSIE6 bug here [evolt.org].

10:40 am on Apr 25, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The 'bug' that Jeremy may be experiencing is not mentioned in that list (which is very handy by the way, thanks BlobFisk).

I tried to replicate it using the code in post #2 and an image.jpg that was 200px wide. I tried floating the images left and right. But the browser always wrapped the images properly at the edge of the div.

So either Jeremy is doing something different to me or its a bug that has been fixed in my version of IE (version 6.0.2800.1106)

1:48 am on Apr 26, 2003 (gmt 0)

10+ Year Member



Hello Graham and all the others that have replied,
A simplified version of the problem is as follows

the CSS is as follows
.imgTable { float:left; margin: 0 1em; }

.container {
width: 480px;
padding: .5em;
margin: .5em 0;
border: 1px solid #804040;
}

.Header { text-align: center; font-size: 1em; font-weight: 600; color: #804040;}

and the html is as follows. The problems occur when I add more than 4 images. In IE they contiue to the edge of the screen, but not in the other browsers. I solved the problem by changing the float:left to float: right.

<div class="container">
<div class="Header">Whatever the heading is</div>
<div class="imgTable"><img src="?.jpg" width="80" height="110" alt="" /></div>
<div class="imgTable"><img src="?.jpg" width="80" height="110" alt=""></div>
<div class="imgTable"><img src="?.jpg" width="80" height="110" alt=""></div>
<div class="imgTable"><img src="?.jpg" width="80" height="110" alt=""></div>
<div class="clearR"></div>
</div>

I figure I could cut out all the divs and just have one (imgTable), followed by the images, but I figured that was not the problem here.

The IE I use is 6.0.2800.1106 etc.

6:12 pm on Apr 26, 2003 (gmt 0)

10+ Year Member



Hi Jeremy

hmmm i think i lost your there. with your code and 5 images in the container i get the same in IE6 and Moz 1.3 (?) the fifth image wraps till the next line.

Could you please restate the prob that you are having with this setup, Jeremy.

Regards
Hafnius

9:37 pm on Apr 26, 2003 (gmt 0)

10+ Year Member



Hi hafnius,
I did not test the cut down code I posted, but a little voice in my head said I should have tested it.
I will dig up the source code and re-post it.
Jeremy.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month