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 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post

    td width 100% IE bug

    Hi guys.
    it's me again xD

    I've a new issue with IE today and I can't seem to resolve it at all!

    I'm having an issue with cell width in a damned table. Layout depends of the data from the database so I thought it would be easier with table. (even tho I wage a war agains't it.. anyways :P)

    say I have a table using 100% width;
    every <tr> has : checkbox - label - input/select box

    I set my input and select width to 100% to make sure it expends to the maximum size regardless of the data size.

    Works fine in Firefox, but IE makes the first td width to 0, label is oversized and input/select are 4pixel wide. what am I missing?

    Firefox

    IE



    I feel IE is stupid enough to try applying width:100% based on the row rather than the td cell only
    Last edited by Jahren; 06-16-2009 at 08:03 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'm having an issue with cell width in a damned table. Layout depends of the data from the database so I thought it would be easier with table. (even tho I wage a war agains't it.. anyways :P)

    say I have a table using 100% width;
    every <tr> has : checkbox - label - input/select box

    I set my input and select width to 100% to make sure it expends to the maximum size regardless of the data size.
    You can't style elements like <select>, checkbox, file input etc beyond a limit in IE.

    PS: Know why tables for layout is stupid!

    Have a look at http://www.alistapart.com/d/prettyaccessibleforms/ to see how to make an accessible table-less form layout.
    Last edited by abduraooft; 06-17-2009 at 08:51 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Jahren (06-17-2009)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    143
    Thanks
    14
    Thanked 1 Time in 1 Post
    I forgot to mention in this thread that I already destroyed the table layout.
    I'm now using styled divs..
    works better but I have other problems with floating label.
    I can't seem to vertical-align the text in the label at all..

    can you help ?

    Code:
    <div class='table_autres_elements'>
       <div><div class='checkSelect'><input type='checkbox' value='CA1' name='chkNiveau' id='chkNiveau' style='width:auto;' onchange='if(!this.checked)document.getElementById("slcNiveauIE").selectedIndex=0;' /></div><div class='label_autres_elements'><label title='Champs pour rechercher une ressource en fonction du niveau'>Niveau: </label></div><div class='donnees_autres_elements'><span id='slcNiveauIE'><?php gererNiveaux(); ?></span></div><div style='clear:both;'></div></div><div><div class='checkSelect'><input type='checkbox' value='CA1' name='chkAuteur' id='chkAuteur' style='width:auto;' onchange='if(!this.checked)document.getElementById("strAuteur").value="";' /></div><div class='label_autres_elements'><label title='Pour chercher les ressources dun auteur particulier, veuillez inscrire son prénom suivi de son nom en laissant un espace entre les deux.'>Auteur: </label></div><div class='donnees_autres_elements'><input type='text' name='strAuteur' id='strAuteur' onkeyup='checkLaBoite("chkAuteur", this.value.length);' /></div><div style='clear:both;'></div></div>
    <div><div class='checkSelect'><input type='checkbox' value='CA1' name='chkCS' id='chkCS' style='width:auto;' onchange='if(!this.checked)document.getElementById("strCS").value="";' /></div><div class='label_autres_elements'><label title='Champs pour rechercher en fonction de la commission scolaire'>CS: </label></div><div class='donnees_autres_elements'><span id='slcCSIE'><?php gererCS(); ?></span></div><div style='clear:both;'></div></div>
    <div><div class='checkSelect'>&nbsp;</div><div class='label_autres_elements'><label title='Détermine si on veut filtrer la recherche en fonction des Tic'>Tic: </label></div><div class='donnees_autres_elements'><input type='checkbox' value='Tic' style='width:auto;' name='chkTic' id='chkTic'/></div><div style='clear:both;'></div></div>
    </div>
    Code:
    .table_autres_elements{width:100%; margin:0; padding:0; margin-left:auto; margin-right:auto; border:0; text-align:center; }
    .table_autres_elements .checkSelect{width:8%; float:left;}
    .table_autres_elements .label_autres_elements{width:15%; float:left; font-size:0.8em; font-weight:bold;}
    .table_autres_elements .donnees_autres_elements{width:75%; margin:0 0 0 0; padding:0; float:left;}
    .donnees_autres_elements input{width:100%; margin:3px 0 0 0;}
    .donnees_autres_elements select{width:100%; font-size:0.9em;}
    Last edited by Jahren; 06-17-2009 at 01:51 PM.


  •  

    Posting Permissions

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