IE Float Hack

Discussion in 'Web Design and Development' started by Muskie, Jul 12, 2007.

  1. Muskie macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #1
    Alright, I've searched the forums unsuccessfully for this, and had no luck with google either (but thats mostly because there is so much to wade through when it comes to IE hacks :( ).

    My problem seems to be a simple one, IE is improperly displaying a floated element.

    The problem is this: I have two elements, an image floated left, and a block of text floated right. Simple enough. However, in IE 5+ the block of text just ends up underneath the image, but slightly indented.

    I realize that the title is also misplaced in IE, I am just going to use the underscore hack to fix that momentarily.

    I've attached screenshots to help
    And here is the code:

    Code:
    .picture{
    	float: left;
    	height: auto;
    	width: auto;
    }
    
    .text{
    	float: right;
    	max-height: 500px;
    	width: 380px;
    	_max-height: 500px;
    	_width: 380px;
    	margin-left: 20px;
    }
    edit: ok ive added a third screenshot, apparently the float works in that one... sort of.

    If this has been brought up before and I just missed it, just link me, please.

    Thanks for any input.
     

    Attached Files:

  2. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #2
    If the text and the image are part of the same containing element, I don't think you need to float the text to the right. Just floating the image should work fine.

    Have you tried that yet?
     
  3. Muskie thread starter macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #3
    I think I just tried that, but it didn't work. I just commented out the float property on the text, is that what you meant?

    i noticed your sig says you've got an iPhone, how is it treating you?
     
  4. Sdashiki macrumors 68040

    Sdashiki

    Joined:
    Aug 11, 2005
    Location:
    Behind the lens
    #4
    Floats can be confusing.

    If you have a container div, which holds both the txt and the img...

    then anything floated within that div will use the divs boundaries, left/right, as the positions of the float.

    so, with that in mind, if you put something like:

    <img class="floatleft">
    <p>some text</p>

    then the img will appear on the left side with the following text flowing on the rightside around it.

    you should not need to float BOTH the img and the txt unless they are within separate divs. Which they shouldnt be anyway.

    make sense?
     
  5. Muskie thread starter macrumors 6502

    Muskie

    Joined:
    Dec 1, 2003
    Location:
    Minneapolis
    #5
    Alright, I changed it to pretty much what you said. It worked great. Thanks a lot. I had screwed up something and spent 3 days trying to figure it out, only to fix it and then notice my floats were messed up. I have been getting slightly... perturbed, with the whole thing. So thanks for making it easier :)
     
  6. dabirdwell macrumors 6502

    Joined:
    Sep 26, 2002
    Location:
    Oklahoma
    #6
    IE double margin float bug

    IE will also double the margin of floated elements, so if you find this happening, a workaround is to add display:inline; to the style of the floated element that has a margin.
     
  7. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #7
    Great so far! I'm really excited to see what kind of goodies I get when they start doing software updates, though :)
     

Share This Page