Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox-IE float difference

    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.
    Last edited by donone; 01-19-2008 at 05:12 PM. Reason: add example web site

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Meh. Both Ffx3 and IE8 pass the Acid2 test. Things are going to get interesting for the web designer

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by donone View Post
    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.

  • #8
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you rmedek, I will do some tests without align, or try another method altogether.
    Thanks for your time and knowledge.

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #10
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, thanks rmedek for your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •