1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Checkboxen darstellung

Dieses Thema im Forum "CSS" wurde erstellt von cssfan, 2. Februar 2010.

  1. cssfan

    cssfan Gast

    Hallo,
    ich habe mehrere checkboxen die untereinander dargestellt werden. Im Ie6/7 sieht es ok aus aber im FF wird der Text falsch ausgerichtet.
    Wie kriegt man es überall gleich angezeigt? Kann man evtl. meinen code vereinfachen?

    PHP:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title></title>
    7. <style type="text/css">
    8. *{
    9.     margin:0;
    10.     padding:0;
    11. }
    12.  
    13. html {
    14.     width:100%;
    15.     height:100%;
    16. }
    17.  
    18. body {
    19.     width:100%;
    20.     height:100%;
    21.     font-family: Verdana, Helvetica, Arial, sans-serif;
    22.     font-size: 11px;
    23. }
    24.  
    25. .check{
    26.     margin:10px 0 0 0;
    27. }
    28. input.checkbox{
    29.     display:block;
    30.     float:left;
    31. }
    32.  
    33. .check span{
    34.     line-height:20px;
    35. }
    36.  
    37.  
    38. </style>
    39. </head>
    40.  
    41. <body>
    42.  
    43. <form action="#">
    44.    <div class="check"> <input type="checkbox" name="zutat" value="salami" class="checkbox">     <span>Salami</span></div>
    45.    <div class="check"> <input type="checkbox" name="zutat" value="pilze" class="checkbox">      <span>Pilze</span></div>
    46.    <div class="check"> <input type="checkbox" name="zutat" value="sardellen" class="checkbox">  <span>Sardellen</span></div>
    47. </form>
    48.  
    49.  
    50. </body>
    51. </html>
    52.  
  2. Maik

    Maik Gast

    Hi,

    wenn der Text ohne das <span>-Element notiert wird, bzw. die Angabe zur Zeilenhöhe entfernt wird, zentriert ihn auch Firefox in der Vertikalen neben der Checkbox.

    Gleiches gilt hier übrigens für den IE8, und alle anderen aktuellen standardkonformen Browser.

    Daraus folgt diese Änderung, damit IE6 und IE7 den Text weiterhin vertikal zentrieren:
    Code (HTML5):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <style type="text/css">
    6. *{
    7.     margin:0;
    8.     padding:0;
    9. }
    10.  
    11. html {
    12.     width:100%;
    13.     height:100%;
    14. }
    15.  
    16. body {
    17.     width:100%;
    18.     height:100%;
    19.     font-family: Verdana, Helvetica, Arial, sans-serif;
    20.     font-size: 11px;
    21. }
    22.  
    23. .check{
    24.     margin:10px 0 0 0;
    25. }
    26. input.checkbox{
    27.     display:block;
    28.     float:left;
    29. }
    30.  
    31. <!--[if lt IE 8]>
    32. <style type="text/css">
    33. .check span{
    34.    line-height:20px;
    35. }
    36. </style>
    37. <![endif]-->
    38. </head>
    39.  
    40.  
    41. <form action="#">
    42.    <div class="check"> <input type="checkbox" name="zutat" value="salami" class="checkbox">        <span>Salami</span></div>
    43.    <div class="check"> <input type="checkbox" name="zutat" value="pilze" class="checkbox">        <span>Pilze</span></div>
    44.    <div class="check"> <input type="checkbox" name="zutat" value="sardellen" class="checkbox">    <span>Sardellen</span></div>
    45. </form>
    46.  
    47.  
    48. </body>
    49. </html>

    mfg Maik
  3. cssfan

    cssfan Gast

    Danke, sieht gut aus :)

Diese Seite empfehlen