#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    422
    Rep Power
    24

    Again, floats problem, only in internet explorer.


    Hey,
    I use floats in my page to position some div's.
    The page validates for both css and html-strict.

    When i run the code below in firefox, everything works fine.
    When i run it in Internet explorer, it does not. It looks messed up then.

    PHP Code:
    echo '<form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">';
    while(
    $contact mysql_fetch_array($query_result,MYSQL_ASSOC)){
        echo 
    '<div style="float: left; width: 25%; margin: 0%; padding: 0%;">';
        echo    
    '<input type="checkbox" name="selected_contacts[]" value="'.$contact['contact_id'].'">&nbsp;';
        echo    
    $contact['first_name'] . '&nbsp;' $contact['last_name'];
        echo 
    '</div>';
        echo 
    '<div style="float: left; width: 75%; margin: 0%; padding: 0%;">';
        echo    
    '<a href="contact_info.php?contact_id='.$contact["contact_id"].'&amp;act=edi">view</a>';
        echo    
    '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&amp;act=edi">edit</a>';
        echo    
    '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&amp;act=del">delete</a>';
        echo 
    '</div>';
    }

    echo 
    '<div style="float: left; width: 100%; margin: 0%; padding: 0%;">';
    echo 
    '<br>';
    echo 
    '<input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">';
    echo 
    '<br><br>';
    echo 
    'Total '.$nr_of_rows.' Contacts';
    echo 
    '</div>';
    echo 
    '</form>'
    hope you can help me.

    thanks in advance
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Please don't post server-side code here. Show us what is produced after the PHP has been parsed.

    Why are you using inline styles?

    For something like that, I might actually mark it up with a <table>.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    422
    Rep Power
    24
    Ah, sorry:
    Code:
    <form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">
    
    <div style="float: left; width: 25%; margin: 0%; padding: 0%;">
      <input type="checkbox" name="selected_contacts[]" value="5">Stefan 2
    </div>
    <div style="float: left; width: 75%; margin: 0%; padding: 0%;">
      <a href="contact_info.php?contact_id=5&act=edi">view</a>
      <a href="process/contact_action.php?contact_id=5&act=edi">edit</a>
      <a href="process/contact_action.php?contact_id=5&act=del">delete</a>
    </div>
    
    <div style="float: left; width: 25%; margin: 0%; padding: 0%;">
      <input type="checkbox" name="selected_contacts[]" value="5">Stefan 3
    </div>
    <div style="float: left; width: 75%; margin: 0%; padding: 0%;">
      <a href="contact_info.php?contact_id=5&act=edi">view</a>
      <a href="process/contact_action.php?contact_id=5&act=edi">edit</a>
      <a href="process/contact_action.php?contact_id=5&act=del">delete</a>
    </div>
    
    <div style="float: left; width: 100%; margin: 0%; padding: 0%;">
      <br>
      <input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">
      <br><br>
      Total 8 Contacts
    </div>
    </form>
    Yes, i think im going to use tables for this, but i'd still like to know what's wrong with the current code, cause it seems right to me. (I'm new to using floats)

    thanks.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    It looks the same in IE6-7 and FF 1.5 to me. It looks how I expect you want it to look in FF2.0 and Opera 7-9. If you add clear:left; to the second 25% width one, it fixes the problem. Why it does that is because the first <div> with 25% width has a height greater than the height of the element to its right, so the next element that's floated left after both of them is bumping up against it instead of moving to the left edge of the containing element. By adding clear:left; we're forcing it below the other two, so it moves to the left edge of the containing element.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    422
    Rep Power
    24
    Ah, thanks a lot

    All works fine now

IMN logo majestic logo threadwatch logo seochat tools logo