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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image floating issues with IE

    Hi all,

    Interesting behavior, for me -being so inexperienced I guess, or I'm doing something wrong... please check screenshot for example. This screencap is of IE6:

    In FF and Opera the image is in the forefront (as I intended) - only IE is placing the div on top of the floated image. I tried setting a z-index but I'm not sure if I did it right - it had no effect.

    Here is the code I'm using:
    Code:
    <a href="http://www.abcnews.go.com/International/wireStory?id=1056916" target="_blank"><img src="images/news/occupation291lg.jpg" 
    width="150" height="100" class="floatleftborderpad" align="left" alt="Sunnis Warn Against Constitution Draft" /></a>
    <h3>Sunnis Warn Against Constitution Draft</h3>
    
    <div class="stories">BAGHDAD, Iraq Aug 21, 2005 — A day before the deadline for the new constitution, Sunni Arabs appealed Sunday to the 
    United States to prevent Shiites and Kurds from pushing a draft through parliament without their consent, warning it would only worsen the crisis in Iraq.
    
    <br /><a href="http://www.abcnews.go.com/International/wireStory?id=1056916" target="_blank">(Full Story)</a></div>
    And the CSS:

    Code:
    .stories {
    background-color: #ffffff;
    	border: 1px solid #cccccc;
    	padding: 6px;
    }
    
    .floatleftborderpad {
    	float: left;
    	border: 1px solid #666666;
    	margin: 5px 10px 0 0;
    	padding: 2px;
    }
    Thanks for any help with this!

    Dodge
    Attached Thumbnails Attached Thumbnails Image floating issues with IE-iecoverup.jpg  

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Think it's because you're floating the image left, but not specifying the width of the stories div.

    Think it might be better to leave the image without a float and float the actual stories text to the right...?

    Edit: No matter, what I posted wasn't what you wanted and didn't work in FF...
    Last edited by mark87; 08-22-2005 at 02:52 PM.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Left margin

    Giving the div a sufficient left margin to clear the image would work as well:
    Code:
    .stories {
    background-color: #ffffff;
    	border: 1px solid #cccccc;
    	padding: 6px;
            margin-left: 110px;
    }
    You'll probably have to adjust padding and margin values on the various elements to line everything up.
    By the way: the following structure may make a little more sense from a semantic point of view:
    Code:
    <div class="stories">
      <a href="..."><img src="..." /></a>
      <h3>Sunnis...</h3>
      <p>BAGDAD, ...</p>
    </div>
    You'll have to move around the styles a bit.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great! That's much better - thanks for the tip on the left margin.

    Thanks!
    Dodge


  •  

    Posting Permissions

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