Difference of "floating" for IE/Firefox and Safari

Discussion in 'CSS' started by winterheat, Jun 23, 2007.

0
  1. #1
    I am trying "float" for floating an image...
    and see a difference between IE/Firefox vs Safari.

    For example,

    http://www.elementsofbeingfit.com/float_test/test_float01.html

    it floats to the left, and it is perfect.

    http://www.elementsofbeingfit.com/float_test/test_float02.html

    Now it seems like it will only float when there is next available
    space on the very left. So it float on the next line. And that's fine.

    http://www.elementsofbeingfit.com/float_test/test_float03.html

    Now that comes the question for this one. I am floating it
    after a few words, so technically, it can float to the right immediately.
    But IE and Firefox both float it to the right ON THE NEXT LINE.
    So I tried Safari, and it floats right on the very first line.
    Although it may not be important sometimes, but sometime you
    want a picture to float exactly at a location (with a fixed font px size)
    but I guess it will show up differently on IE and Safari.

    :eek: Kenneth
    www.elementsofbeingfit.com
     
    winterheat, Jun 23, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, for starters you should probably actually have your test inside full HTML headers and footers, with a valid doctype so IE isn't in quirks mode - heck, I think with just dumping your tags out like that even FF and Opera are going into 'compatability' instead of 'standards' mode.

    You might also want to try specifying a metric when you declare a width... 600 what? px? em? pt? %? quijada's? taco's?

    That said it appears that IE, FF and Opera are styling your third example EXACTLY as it should... Float forces the image to display:block - as such it should appear one line down from the inline content before it... but it also removes it from flow, meaning the inline content AFTER the image should ride up next to your first line. Safari is the one rendering it wrong... WAY wrong. (I'm shocked, really I am.)

    If you want the image to appear where it does in safari, it HAS to go before the 'not gaining weight' text. If you want it to force a linebreak, you should probably be wrapping your second set of text in a paragraph.

    As always it's important to understand block-level vs. inline-level elements, and the difference between them and display:block/display:inline as well. (they are NOT the same thing)
     
    deathshadow, Jun 23, 2007 IP
  3. winterheat

    winterheat Peon

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ok, I have made them all "HTML 4.01 Strict" valiad...

    www (dot) elementsofbeingfit (dot) com/float_test

    I found that for exmaple 1, it behaves the same on all IE, FF, and Safari 2.0.4.

    For example 2, they behave differently on IE/FF vs Safari. Safari will float immediately on the same line. While IE/FF waits for the next line.
     
    winterheat, Jun 23, 2007 IP
  4. winterheat

    winterheat Peon

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    For example 2 [AND 3], they behave differently on IE/FF vs Safari. Safari will float immediately on the same line. While IE/FF waits for the next line.
     
    winterheat, Jun 23, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Example 2's FF/IE behavior is correct - it appears Opera and Safari are both incorrectly rendering it.

    Again, it's a float - floats are display:block, so they go below content before them. Floats are removed from page-flow, so the text below the image will ride up onto the inline content before it.

    If you want it to appear before all the text, you need to put it before ALL the text... Which I'd probably do AND wrap the text as a paragraph.

    I think you aren't grasping how flow order works, or the difference between block and inline....

    Or are you trying to get the IE/FF behavior in Safari? In that case you might just be SOL, though you might be able to fake it using a top-margin.
     
    deathshadow, Jun 23, 2007 IP