...

View Full Version : Firefox-IE float difference



donone
01-19-2008, 03:23 PM
This is a preliminary enquiry before getting to posting code etc.
The general problem is that I coded what is intended to be two columns side by side each of which can contain an image and text wrapped around.
The columns are notional and produced by setting width of classes to 47%.

In IE as the browser is shrunk sidewise the images come closer and the text is eventually squeezed to drop below one or both images. When the images touch one then drops below the other and in all I end up with one column.

This is actually what I wanted to cater for different browser sizes.

In Firefox as the browser is reduced, the same thing happens to the text but when the images come together, the ones on the right then lay over the ones on the left.

I used Div elements to contain the floated images and drew a border to view what was happening.
In IE the border stops when it gets to the edge of its contained image.
In Firefox the border goes under the picture so that it hangs out to the right.

I presume that Firefox is rendering correctly, but my intention was what I get in IE.
I don't know how to code for Firefox to produce the correct effect.

I have read and tried many many variations of hacks and tricks but nothing seems to alter the Firefox rendering.

All images are different sizes and I assume the image declared 'width' is enough for the float information.

My site example is http://don-simmonds.co.uk

Any help for starters please.

rmedek
01-19-2008, 06:26 PM
In IE as the browser is shrunk sidewise the images come closer and the text is eventually squeezed to drop below one or both images. When the images touch one then drops below the other and in all I end up with one column.

This is actually what I wanted to cater for different browser sizes.

In Firefox as the browser is reduced, the same thing happens to the text but when the images come together, the ones on the right then lay over the ones on the left.

If you've got floated elements side-by-side in a fluid width container, as the browser window gets smaller (and the container gets too small to hold elements horizontally) the elements will drop below each other as regular block-level elements do. So in the example you describe above, IE has it right. I tried your site in FF but I can't reproduce what you describe.

donone
01-21-2008, 07:37 AM
Thank you for your time rmedek.
The problem is when viewing the site with Firefox.
On the index page scroll below the skulls and there are more images. The ones on the right overlap the large one on the left when squeezed.

I presumed from all I have read that Firefox was the 'holy grail' and so was probably acting correctly for my code.
It seems not.
I would appreciate it if you could give my site another try, I have just reproduced the problem again today.

rmedek
01-21-2008, 04:51 PM
Those images below the skull are acting correctly as well (I think). The issue is when you shrink the browser window to something really small you end up with images that are larger than their containers, which are floated to the left and right. FF is positioning the containers where they should be according to their floats; since there is nowhere for the images to go, they stick out of their containers. This only happens when the browser window is really small, though…I wouldn't worry about it, or think of another method to layout the page.

On another note, you've got a HTML 4.0 doctype but you're coding everything in an XHTML manner (using self-closing tags like <img /> and <br /> for example). Validating your page will go a long way in helping to debug further issues.

And on one last note, FF is not a "holy grail," it just interprets CSS better than IE. So just because it acts one way in FF doesn't necessarily mean it's right; you still have to make sure what you are coding is correct. ;)

Apostropartheid
01-21-2008, 06:01 PM
Meh. Both Ffx3 and IE8 pass the Acid2 test. Things are going to get interesting for the web designer :D

donone
01-21-2008, 06:10 PM
Thank you rmedek for coming back again.
I must admit I did reduce the browser quite small, but if my images had been larger the same would happen sooner, which concerns me.

I have a problem is understanding why pictures can outgrow their container (in FF), why therefore have a container when it doesn't contain. It seems therefore to serve little purpose.
In IE the images never come outside their containers no matter how small the browser, they just drop below. Those containers do their job it seems to me.

In Firefox they get smaller and then the container shrinks below the image (I tried it with a black border) and this allows the adjacent image to flow over the top. They can't both be right.

I hear what you say about the doctype declaration, I guess I started one way and then modified the page.
Can you please say what the correct declaration should be for my page?

I must confess I am still not entirely happy.

rmedek
01-21-2008, 06:20 PM
I have a problem is understanding why pictures can outgrow their container (in FF), why therefore have a container when it doesn't contain.

I believe in this case it's because you are using the 'align' attribute, which acts (mostly) the same as float—it aligns images one way or another and also takes them out of the document flow. So the containers are reacting to each other, not to the aligned image, which, as far as the containers are concerned, doesn't exist.

It gets tricky interpreting the correct behavior of elements when they are reacting to extreme conditions (in this case, several floated elements to the left and right of each other with nested floated elements inside being viewed at extremely small browser sizes) but I think FF is interpreting things correctly, and IE looks how you want it to.

donone
01-21-2008, 06:25 PM
Thank you rmedek, I will do some tests without align, or try another method altogether.
Thanks for your time and knowledge.

rmedek
01-21-2008, 06:33 PM
Honestly, I wouldn't worry about it…unless you're planning on sticking humongous images side by side and then looking at your page in a tiny window. ;)

donone
01-21-2008, 07:11 PM
OK, thanks rmedek for your help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum