homepage Welcome to WebmasterWorld Guest from 107.20.109.52
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
float left & IE6 problems
IE6 breaks containers using float left
jeremy




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

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.

 

grahamstewart




msg:1178493
 10:47 pm on Apr 24, 2003 (gmt 0)

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?

hafnius




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

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

BlobFisk




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

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].

grahamstewart




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

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)

jeremy




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

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.

hafnius




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

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

jeremy




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved