ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
1462
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. #1
    cssfan Tutorials.de Gastzugang
    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-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title></title>
    <
    style type="text/css">
    *{
        
    margin:0;
        
    padding:0;
    }

    html {
        
    width:100%;
        
    height:100%;
    }

    body {
        
    width:100%;
        
    height:100%;
        
    font-familyVerdanaHelveticaArialsans-serif;
        
    font-size11px;
    }

    .
    check{
        
    margin:10px 0 0 0;
    }
    input.checkbox{
        
    display:block;
        
    float:left;
    }

    .
    check span{
        
    line-height:20px;
    }


    </
    style>
    </
    head>

    <
    body>

    <
    form action="#">
       <
    div class="check"> <input type="checkbox" name="zutat" value="salami" class="checkbox">        <span>Salami</span></div>
       <
    div class="check"> <input type="checkbox" name="zutat" value="pilze" class="checkbox">        <span>Pilze</span></div>
       <
    div class="check"> <input type="checkbox" name="zutat" value="sardellen" class="checkbox">    <span>Sardellen</span></div>
    </
    form>


    </
    body>
    </
    html
     

  2. #2
    Maik Tutorials.de Gastzugang
    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:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    
    html {
        width:100%;
        height:100%;
    }
    
    body {
        width:100%;
        height:100%;
        font-family: Verdana, Helvetica, Arial, sans-serif;
        font-size: 11px;
    }
    
    .check{
        margin:10px 0 0 0;
    }
    input.checkbox{
        display:block;
        float:left;
    }
    </style>
    
    <!--[if lt IE 8]>
    <style type="text/css">
    .check span{
        line-height:20px;
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    
    <form action="#">
       <div class="check"> <input type="checkbox" name="zutat" value="salami" class="checkbox">        <span>Salami</span></div>
       <div class="check"> <input type="checkbox" name="zutat" value="pilze" class="checkbox">        <span>Pilze</span></div>
       <div class="check"> <input type="checkbox" name="zutat" value="sardellen" class="checkbox">    <span>Sardellen</span></div>
    </form>
    
    
    </body>
    </html>

    mfg Maik
     

  3. #3
    cssfan Tutorials.de Gastzugang
    Danke, sieht gut aus
     

Ähnliche Themen

  1. Checkboxen
    Von mirkoku im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 1
    Letzter Beitrag: 24.09.09, 11:37
  2. checkboxen
    Von Dönerman im Forum PHP
    Antworten: 3
    Letzter Beitrag: 06.10.05, 14:40
  3. Antworten: 2
    Letzter Beitrag: 29.07.05, 15:21
  4. Checkboxen!
    Von jensef im Forum PHP
    Antworten: 3
    Letzter Beitrag: 25.02.04, 04:29
  5. checkboxen
    Von chris_sit im Forum PHP
    Antworten: 5
    Letzter Beitrag: 19.12.02, 10:23