IE7 text wont wrap around image

Discussion in 'CSS' started by andreyp, Mar 24, 2011.

  1. #1
    Hi all,

    In IE7 the text won't wrap around my floated images as per http://toplifecover.co.uk/test/

    Seems to work fine in all other browsers but in IE7 instead of wrapping around the image there is a line break after the image, then text appears.

    Any advice is appreciated.
     
    andreyp, Mar 24, 2011 IP
  2. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You ue a paragraph tag as container for the image, and you have placed it ABOVE the paragraph containing the "freiands provident" header in the html code.
    A paragraph is not a great option to use for placing images, and sice IE7 does not understand html code, I suggest you ditch the P and either place the image directly - but in the right position within the source code, or use a div as placeholder, float the div right and set its width, then float the underlying UL left.
     
    style0, Mar 24, 2011 IP
  3. andreyp

    andreyp Member

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    thanks but the div method didn't work.
     
    andreyp, Mar 24, 2011 IP
  4. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Do this instead:

    Make the header text to be the first li item in the list, class it header or something and style text and remove the li-icon etc.
    In that li-tag, put a div container that you style to be the same dimensions as the image float it right and give it 10px of left margin, and put the image in it.
    Place it before the header text.
    Then take a look in the browser. You will maybe have to adjust the li items margins or paddings because if the image and div goes even slightly into an underlying li item the whole li text will not wrap, so some fine tuning there to adjust to the image height and position will be needed. But this will work. I just did exactly this to test it and it works.
     
    style0, Mar 24, 2011 IP
  5. andreyp

    andreyp Member

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #5
    it worked. thanks a lot for your help!
     
    andreyp, Mar 24, 2011 IP
  6. style0

    style0 Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You're welcome :)
     
    style0, Mar 24, 2011 IP