CSS Unterschiede IE 6 <-> FF 3.x

**Kropff** · 02.09.2010, 08:21

Welche Doctype setzt du ein? Online-Beispiel verfügbat? Was die Formatierung eines <hr> angeht, so ist die Unterstützung im IE6 sehr mau. Ich würde daher eher auf ein border-bottom zurückgreifen.

Peter

**eagle275** · 02.09.2010, 08:41

online - verfügbar .. darf ich dich leider nicht drauf lassen .. ist halt im Sicherheitsbereich

zur Doctype :

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

wie meinst du das, Unterstützung für CSS Formatierung <hr> sehr mau ? der macht doch alles was ich will (weiß, keine sichtbaren Rahmen, horizontale Abmessung) einzig die Höhe passt nicht - wobei dein Hinweis auf border-bottom schon mal geholfen hat, die Höhe des hr grob auf 2/3 zu senken , indem ich nun

HTML-Code:

hr 
{
    width: 468px;
    height: 1px;
    color: #FFFFFF;
    background-color: #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 6px solid #FFFFFF;
}

codiere

**wahsaga** · 02.09.2010, 13:00

Zitat von eagle275 Beitrag anzeigen

online - verfügbar .. darf ich dich leider nicht drauf lassen .. ist halt im Sicherheitsbereich

Dann lade es woanders hoch, und anonymisiere ggf. sensible Inhalte vorher.

Solche Probleme sind meistens nicht analysierbar, wenn nur ein paar CSS-Regeln hingeworfen werden.

**eagle275** · 02.09.2010, 13:39

"woanders" ? .. hast du mal eine Adresse zur Hand, wo ich schnell mal mein Script samt styles hinpacken kann - nebst mysql-DB ?

**wahsaga** · 02.09.2010, 13:44

Wen interessiert die DB? Du wirst doch wohl in der Lage sein, den Quelltext deiner Seite nach Aufruf im Browser anzeigen zu lassen und C&P zu machen ...?

**eagle275** · 02.09.2010, 14:13

sicher doch ... nur was du da sehen willst ...

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<title>BoSiNet-DB</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./styles.css" type="text/css" />
    <!--[if lt IE 8]>
        <link rel="stylesheet" href="./styles/ie.css" type="text/css" />
    <![endif]-->
<STYLE type="text/css">
    h4 {
    color: #E2E8EE;
    font-weight: bold;
    font-size: 0.8em;
    font-family: "Bosch Office Sans", Helvetica, Arial, sans-serif;
    line-height: 1.25em;
    margin-bottom: 6px;
    background-color: #003B69;
  }
   div.info
  {
    background-color: #E2E8EE;
    width: 226px;
    float: left;
     /*border: 1px solid #E2E8EE;*/
    border-top: 5px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid #E2E8EE;
     margin-bottom: 6px;    
  }
  div.mainnavi li a:visited
  {
    color: #fff;
  }
  div.mainnavi li a:hover
  {
    color: #fff;
  }
   * html div.info
  {
    height: 1%;
  }
  * html input,* html select, * html textarea
  {
    width: 290px;
    color: #003B69;
    background: #FFFFFF;
    border: 1px solid #A1A1A1;
    line-height: 15px;
    padding: 0px 0px;

  }
* html p.copyright {
    margin-left: 126px;
  }
    input.plz
  {
    width: 42px;
    margin-right: 5px;
  }

  input.ort
  {
    width: 249px;
  }
  label.plz
  {
    width: 25px;
    margin-right: 5px;
  }
  label.ort
  {
    width: 138px;
  }
  input.kontrakt
  {
    width: 80px;
    margin-right: 5px;
  }
* html p.form
  {
    margin-top: 0px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
    clear: left;
  }
* html p.login {
        margin-top: 0px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 3px;
        clear: left;
    }
  input.pos
  {
    width: 211px;
  }
  label.kontrakt
  {
    width: 57px;
    margin-right: 5px;
  }
  label.pos
  {
    width: 106px;
  }
  * html input.ort
  {
    width: 241px;
  }
  * html input.pos
  {
    width: 203px;
}
* html input.mybutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 171px;
        margin-bottom: 0px;
        width: 146px;
        margin-right: 5px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
}
* html input.infobutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 32px;
        margin-bottom: 0px;
        width: 160px;
        margin-right: 5px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
}
 * html input.rebutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 0px;
        margin-bottom: 0px;
        width: 141px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
    } 
* html input.loginbutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 97px;
        margin-bottom: 0px;
        width: 100px;
        color: #003B69;
        height: 18px;
        background-color: #EEE8E2;
}
 * html input.logoutbutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 97px;
        margin-bottom: 0px;
        width: 100px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
    } 
</STYLE>
</head>
<body>
   <div class="seite">
      <img src="./img/TS-Layout_Kopf_01.jpg" name="logo" alt="logo" width="960" height="137"/>
      <div class="mainnavi">
         <ul>
         <li><a href="?frm=1">Info</a></li>
         <li><a href="?frm=9">Neuer Kunde</a></li>
         <li><a href="?frm=2" class="aktiv">Suchen</a></li>
         </ul>
      </div>
      <div class="subnavi">
         <form action="" method="post">
            <p class="login">
               <input type="submit" class="logoutbutton" value="LOGOUT" />
            </p>
            <p class="login">&nbsp;</p><br/>
            <p class="login">Optionen:<br/>
               <a href="?chp">Passwort ändern</a><br/>
               <a href="?csvexp">CSV-Export</a></p>
         </form>
         <p>&nbsp;</p>
      </div>
      <div class="tabinhalt">
         <h1>Kunden-DB</h1>
         <p class="form">&nbsp;</p>
      </div>
      <div class="inhalt">
         <h2>Kunden Suchen</h2>
         <hr/>
         <form action="" method="post">
         <p class="form">
            <label for="kontraktsuch">Kontrakt Nr.:</label>
            <input type="text" id="kontraktsuch" name="kontraktsuch" maxlength="9" value="" />
         </p>
         <p class="form">
            <label for="kundesuch">Kunde:</label>
            <input type="text" id="kundesuch" name="kundesuch" maxlength="50" value="" />
         </p>
         <p class="form">
            <label for="strassuch">Straße:</label>
            <input type="text" id="strassuch" name="strassuch" maxlength="50" value="" />
         </p>
         <p class="form">
            <label for="plzsuch" class="plz">PLZ</label>
            <label for="ortsuch" class="ort">Ort:</label>
            <input type="text" id="plzsuch" class="plz" name="plzsuch" maxlength="5" value="" />
            <input type="text" id="ortsuch" class="ort" name="ortsuch" maxlength="50" value="" />
         </p>
         <hr/>
         <p class="form">
            <label for="kennsuch">Kunden-Kennung:</label>
            <input type="text" id="kennsuch" name="kennsuch" maxlength="35" value="" />
         </p>
         <p class="form">
            <input type="submit" class="mybutton" name="btn1" value="Kunde suchen" />
            <input type="submit" class="rebutton" name="btn2" value="Rücksetzen" />
         </p>
         </form>
         <hr/>
      </div>
      <div class="info">
         <h4>Kontrakte suchen</h4>
         <p>Blabla</p>
      </div>
      <div class="tabinhalt"></div>
      <div style="clear:both">&nbsp;</div>
      <div class="copyright">
         <p class="copyright">Copyright Ich@Magdeburg © 2010</p>
         <p class="funktion">
            <!--<a href="#" class="druck">Druckversion</a>-->
            <a href="#" class="top">Seitenanfang</a>
         </p>
      </div>
   </div>
</body>
</html>

**wahsaga** · 02.09.2010, 14:19

Zitat von eagle275 Beitrag anzeigen

sicher doch ... nur was du da sehen willst ...

Na was wohl - dein Problem will ich nachvollziehbar vor mir sehen können!

Wenn allerdings die Bilder und externes CSS immer noch fehlen, ist da auch nicht viel Erkenntnisgewinn zu erwarten - deshalb, wie gesagt, Online-Beispiel ...

**eagle275** · 02.09.2010, 14:21

ich hätt da gern dran gehängt - wobei das Titel-Logo nicht nötig ist ....

nur 10 k Zeichen reichen nicht - allein meine Styles als externe Dateien sind so lang ...

und wenn du online haben willst, dann sag mir nen Server wo ich das hinpacken kann - ich hab sowas bisher nicht und werd dafür bestimmt keinen anmieten

HTML-Code:

// html.css

  *
  {
        margin: 0;
        padding: 0;
        font-family: Bosch Office Sans, Verdana, Helvetica, Arial, sans-serif;
  }
  body, textarea
  {
        color: #003B69;
        background-color: white;
        font-size: 100.1%;
        padding: 1em 0px;

  }
  h1
  {
        color: #003B69;
        font-weight: bold;
        font-size: 1.1em;
        font-family: Bosch Office Sans, Verdana, Helvetica, Arial, sans-serif;
        line-height: 1.3em;
  }

  h2
  {
    color: #003B69;
    font-weight: bold;
    font-size: 0.8em;
    font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
    line-height: 1.25em;
    margin-bottom: 5px;
 }
  h3
  {
    color: #FF0000;
    font-weight: bold;
    font-size: 0.8em;
    font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
    line-height: 1.25em;
    margin-bottom: 20px;
  }
hr 
{
    width: 467px;
    height: 1px;
    color: #FFFFFF;
    background-color: #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 6px solid #FFFFFF;
}  
hr.info 
{
    width: 707px;
    height: 1px;
    border-top: 1px solid #A1A1A1;
    border-left: 1px solid #FFFFFF;
}
  p
  {
    font-size: 0.8em;
    line-height: 1.25em;
    margin-top: 0px;        
    margin-bottom: 3px;
  }
  ul
  {      
    list-style-type: none;
  }
    a:link {
        color: #003B69;
        font-size: 0.75em;
        font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
        line-height: 1.25em;
        text-decoration: none;
    }
    a:visited {
        font-size: 0.75em;
        font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
        line-height: 1.25em;
        color: #707070;
    }
    a:hover {
        font-size: 0.75em;
        font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
        line-height: 1.25em;
        color: #003B69;
        text-decoration: underline;
    }
    a:active {
        font-size: 0.75em;
        font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
        line-height: 1.25em;
        color: #003B69;
        text-decoration: underline;
    }
    a:focus {
        font-size: 0.75em;
        font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
        line-height: 1.25em;
        color: #003B69;
        text-decoration: underline;
    }
 fieldset
  {
    border: 0px none transparent;
    padding: 0px;
    margin-bottom: 15px;
  }
  legend
  {
    color: #FFFFFF;
    font-weight: bold;
    padding: 0px;
    background-color: #003b69;
    width: 468px;
  }
  p.form
  {
    margin-top: 0px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
    clear: left;
  }
    p.login {
        margin-top: 0px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 3px;
        clear: left;
    }
p.copyright {
    margin-left: 252px;
}
  label
  {
    float: left;
    width: 168px;
  }
label.head  {
    color: #003B69;
    font-weight: bold;
    font-size: 1.0em;
    font-family: Bosch Office Sans, Helvetica, Arial, sans-serif;
    line-height: 1.25em;
    float: left;
    width: 168px;
}
  input, select, textarea
  {
    color: #003B69;
    background: #FFFFFF;
    border: 1px solid #A1A1A1;
    line-height: 15px;
    padding: 0px 0px;
    width: 298px;
}
select {
    width: 300px;
}
select.info {
    width: 224px;
}
label.fill {
    width: 298px;
    color: #003B69;
    line-height: 18px;
}
label.login {
    float: left;
    width: 94px;
}
label.logtxt {
    width: 140px;
}
label.logrot {
    width: 140px;
    color: #FF0000;
}
input.login {
    width: 125px;
}
input.topbutton  {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-bottom: 0px;
        margin-left: 0px;
        width: 154px;
        margin-right: 5px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
}
input.topbigbutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 0px;
        margin-bottom: 0px;
        width: 220px;
        margin-right: 5px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
    } 
input.mybutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 168px;
        margin-bottom: 0px;
        width: 154px;
        margin-right: 5px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
    } 
 input.infobutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 32px;
        margin-bottom: 0px;
        width: 160px;
        margin-right: 5px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
    } 
input.bigbutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 168px;
        margin-bottom: 0px;
        width: 220px;
        margin-right: 5px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
    } 
input.rebutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 0px;
        margin-bottom: 0px;
        width: 141px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
    } 
input.redbutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 0px;
        margin-bottom: 0px;
        width: 141px;
        color: #FF0000;
        height: 18px;
        font-weight: bold;
        background-color: #FFb8b2;
    } 

input.loginbutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 94px;
        margin-bottom: 0px;
        width: 100px;
        color: #003B69;
        height: 18px;
        background-color: #EEE8E2;
    } 
input.logoutbutton {
        border-top: 1px solid #A1A1A1;
        border-left: 1px solid #A1A1A1;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin-left: 94px;
        margin-bottom: 0px;
        width: 100px;
        color: #003B69;
        height: 18px;
        background-color: #E2E8EE;
    } 
  p.radio input
  {
    width: 16px;
    margin-top: 2px;
    line-height: 36px;
    display: block;
    float: left;
  }
  input.radio
  {
          margin-top: 0px;
        margin-left: 0px;
        margin-bottom: 0px;
        padding-top:10px;
        height: 15px;
        width: 15px;
        border: none;
        color: #FFFFFF;
    }
  p.radio label
  {
    float: left;
    margin-left: 4px;
    width: 100px;
    line-height: 18px;
  }
   .ie
  {
    padding-top: 0px;
    width: 468px;
    margin-bottom: 0px;
  }
  span.bemerk {
    width: 168px;
    float: left;
  }
  span.kunde {
     width: 168px;
     float: left;
}
div.mainnavi ul {
   margin-left: 0px;        
    height: 26px;        
    border-left: 252px solid #567F9F;
  }
  div.mainnavi li
  {
    display: inline;
  }
  div.subnavi li
  {
    display: inline;
  }
  div.inhalt ul
  {
    margin-top: 0px;        
    margin-bottom: 0px;        
    list-style-type: disc;
  }
  div.inhalt li
  {
    font-size: 0.8em;        
    margin-left: 0px;
  }
  div.copyright p
  {
    font-size: 0.7em; 
    line-height: 1.4em;    
    color: #A1A1A1;        
    float: left;
  }

**wahsaga** · 02.09.2010, 14:26

Zitat von eagle275 Beitrag anzeigen

und wenn du online haben willst, dann [...]

Wenn du hier Hilfe bekommen willst, dann kümmere dich gefälligst selbst um die Voraussetzungen - irgendeinen Free-Webspace zu finden, sollte doch wohl möglich sein.

**eagle275** · 02.09.2010, 15:32

den ich vermutlich nicht besuchen kann, weil alles was nach freeweb / freemail aussieht blockt unsere Proxy-Firewall

**h3ll** · 02.09.2010, 15:43

Dann rede halt mit dem Netzwerkadmin darüber, dass du dadurch bei der Arbeit behindert wirst.

Aber es ist nicht das Problem der anderen hier, sondern deines, also musst du dich darum kümmern.

**eagle275** · 02.09.2010, 17:36

sehr nett, ich der kleine frisch angestellte Zeitarbeiter soll zur Netzwerkabteilung eines Milliardenkonzerns gehen und denen sagen "Ey . eure doofen Sicherheitseinschränkungen für Freemailer gehen mir auf den Kranz .. bitte mal abschalten ..." .. dann kann ich gleich wieder stempeln gehen - hartz4-amt ist ja gleich nebenan

**h3ll** · 02.09.2010, 18:06

Und was können wir jetzt dafür, dass dir dein Arbeitgeber Steine in den Weg legt? Bei uns brauchst du dich nicht beschweren, wir können am wenigsten dafür.

**onemorenerd** · 02.09.2010, 21:47

Dropbox.com wird von deinen Proxies auch geblockt?

CSS Unterschiede IE 6 <-> FF 3.x