SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floated image in list doesn't work properly (IE)

    I'm trying to get text to wrap around an image. This code works in Firefox, but not in IE:

    XHTML:
    Code:
    <li>
    <a href="http://www.random.com"><img src="images/image.gif" id="floatedimage" /></a>
    <h2>A headline.</h2>
    <p>Some text is here.</p>
    </li>
    CSS:
    Code:
    floatedimage{
    float: left;
    }
    The code works in both browsers if I take it out of the list:
    Code:
    <a href="http://www.random.com"><img src="images/image.gif" id="floatedimage" /></a>
    <h2>A headline.</h2>
    <p>Some text is here.</p>
    In CSS, if I set:

    Code:
    ul{
        display: inline;
    }
    The float works, but the image is jogged a few pixels too high in IE (vs. Firefox.) So I'm thinking maybe there is a better way to remedy the problem?

    Thank you, you guys and girls are awesome.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do you mean wrap around. DO you mean for the text to go underneath the image.

    If so set <li> to float left and img to display:block
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean for the text to sit right of the image until it clears the image's height. The first example code above does just that in Firefox, but in IE the image sits above the text.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You don't clear your floats, IE suffers from Haslayout and IE < 7 also from the 3 pixel jog
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	img{border:none;}
    	ul{list-style:none;}
    	
    	li{min-height:1&#37;;overflow:hidden;}
    	
    	li a{float:left;}
    	
    	* html li a{left:3px;position:relative;margin:0 0 0 -3px;}
    	* html ul li{height:1%;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    
    <div><ul><li>
    <a href="http://www.random.com"><img src="http://www.google.nl/images/firefox/fox1.gif" id="floatedimage" alt="" /></a><h2>A headline.</h2><p>Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. Some text is here. </p>
    </li></ul>
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Aug 21, 2007 at 07:06.


Bookmarks

Posting Permissions

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