www.webdeveloper.com
Results 1 to 6 of 6

Thread: Problems with float in IE6/7

  1. #1
    Join Date
    Nov 2008
    Posts
    5

    Problems with float in IE6/7

    Hi I'm having a little trouble getting IE6/7 to do what I want.

    I have a (container) div which contains an image and another div with text in. The code for this is below.
    Code:
    <div class="figure"><img src="/img.php?src=trialsexample.jpg" alt="Trials unicyclist"  /><div>Figure 1: a unicyclist jumping a gap on a trials course</div></div> <p>Trials unicycling is a type of unicycling that focuses on trying to overcome various natural or urban obstacles without falling off or putting a foot or hand down. The sport derives from bike trials although competitions are performed differently. Unicycle trials competition lines allow..</p>
    I then use CSS to float the (container) div to the right. This is done using the code below
    Code:
    .figure { clear: right; float: right; margin: 5px 5px 5px 5px; }  .figure img {display:block; margin-left: auto; margin-right: auto;}  .figure div  { font-size:0.9em; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; display: block; text-align:center; margin-left: auto; margin-right: auto; max-width:20em; }
    In Firefox 3, this renders as I want with the text in the <p> wrapping round the text around the floated container.

    The page can be seen here => http://www.unicycle.org.uk/uuu/trials/about

    In IE6/7 this doesn't work at all. For some reason the (container) div has 100% width of its parent container. I don't want to declare a width for the (container) div because I want it to resize depending on the image inside it.

    I've found even if I declare a width for the (container) div the text in the <p> does not go in the right place and it get's pushed underneath the floated (container) div.

    Does anyone know how I can fix this to work in IE6/7?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    .figure {
    float: right;
    margin: 5px 5px 5px 5px;
    }
    
    .figure img {display:block;}
    
    .figure div  {
    font-size:0.9em;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    display: inline;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    max-width:20em;
    }
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Nov 2008
    Posts
    5
    Thanks for the reply but that didn't really help. The
    Code:
    clear: right;
    needs to be there to make sure subsequent div (containters) go underneath previous ones.

    After playing around I found that the
    Code:
    .figure img {display:block; margin-left: auto; margin-right: auto;}
    was causing part of the problem. If I remove the margin-left & margin-right then IE starts behaving better but...

    1. The images are no longer centred in the div (container)
    2. Text in another paragraph which should also flow around the div (container) does not!

    Any other ideas?

    If I use IE conditional comments to control margin-left and margin-right how do I set them so IE doesn't screw up?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Give the div a fixed width
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Apr 2009
    Location
    Dallas
    Posts
    8

    hey it works

    Ok from what I could tell you have a block declared a block, when you declare a DIV - block.

    try a definite margin such as &#37; or px, em on the image if you have problems in IE6 There is really no reason for auto when you can do % to keep consistent margins.

    Your max-width should be on the main div (.figure) not the embedded div

    and I think that was it... you can look at it at http://littleprayerbox.net/testfloat.html

    Code:
    .figure { 
    clear: right; 
    float: right; 
    margin: 5px 5px 5px 5px; 
    background: #dfdfdf;
    max-width: 40%;
    } 
    
     .figure img {
    	display:block;
    	margin: 10%;
    	} 
     
      .figure div  { 
      font-size:0.9em; 
      font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; 
     
      text-align:center; 
      margin-left: auto;
       margin-right: auto;
       
      
          }
    <div class="figure"><img src="/www/img/header.gif" alt="Trials unicyclist" />
    <div>Figure 1: a unicyclist jumping a gap on a trials course</div></div> <p id="content">Trials unicycling is a type of unicycling that focuses on trying to overcome various natural or urban obstacles without falling off or putting a foot or hand down. The sport derives from bike trials although competitions are performed differently. Unicycle trials competition lines allow..</p>
    Also, probably a better way to do this is with a <dl> a definition list, or <ul> that way you can float li's or dt's with (classes like "left" "right" )left and right to create the effect for many rows and use the UL or DL to contain them.
    Last edited by ezravan; 05-18-2009 at 06:27 PM.

  6. #6
    Join Date
    Apr 2009
    Location
    Dallas
    Posts
    8
    Oh ya, I messed all the widths and margins up with &#37;, and I don't have a inline width on the IMG which is ok or by CSS.. AND I put a ID you don't need on the <p>.. I guess I could of edited my post I'm new at this. ALSO.. you will want to wrap this in a div to have better control, set it's width then, as you know but others may not, your max-width if set by em or % will become relative to the wrappers width.
    Last edited by ezravan; 05-18-2009 at 06:40 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles