XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Benötige dringend Hilfe mit CSS in Firefox & IE :( (http://xhtmlforum.de/showthread.php?t=56335)

r4m0n 20.03.2009 10:50

Benötige dringend Hilfe mit CSS in Firefox & IE :(
 
Hallo,

Ich möchte gerne wissen wieso mein CSS Code im Firefox funktioniert und im IE nicht ...
Ich habe schon viel ausprobiert und komme einfach nicht drauf wieso immer eines der beiden Browser spinnen muss. Passe ich zuerst meine Site ans Firefox an spinnt der IE und umgekehrt der Firefox.

Erstmal mein Code:
HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

        <head>

                <title>test</title>

                <meta http-equiv="Content-Type" content="text/html;Charset=utf-8">
                <style type="text/css">
.top

{

        width: 800px;

        padding: 15px;

        margin-left:auto;

        margin-right:auto;

        border: 1px solid #ccc;

        background: #fff;

}



#navSquare

{

        margin: 0px 0px 0px 0px;

        padding: 30px 0px 22px 200px;

        border-bottom: 1px solid #9FB1BC;

        width: 600px;

}



#navSquare li

{

        margin: 0px 0px 0px 0px;

        display: inline;

        list-style-type: none;

}



#navSquare a:link, #navSquare a:visited

{

        font-size: 12px;

        line-height: 14px;

        padding: 0px 0px 6px 0px;

        text-decoration: none;

        color: #708491;

        font-family: Tahoma;

}



#navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover

{

        color: #000;
        background: url(images/square.gif) no-repeat bottom center;

}



body

{

  font-family: verdana, sans-serif;

  font-size: 11px;

  background: #eeeee;

}


</style>

</head>

  <body>

    <div class="top">

      <ul id="navSquare">

        <li style="float:left;width:60px">                <a class="active" href="test1.html">test</a></li>

        <li style="float:left;width:90px">                <a href="test2.html">test</a></li>

        <li style="float:left;width:70px">                <a href="test3.html">test</a></li>

        <li style="float:left;width:80px">                <a href="test4.html">test</a></li>               

        <li style="float:left;width:55px">                <a href="test5.html">test</a></li>

        <li style="float:left;width:80px">                <a href="test6.html">test</a></li>

        <li style="float:right;width:27px">        <a href="test7.html">test</a></li>

        <li style="float:right;width:40px">        <a href="test8.html">test</a></li>

      </ul>

    </div>

</body>

</html>

Welcher Teil meines Codes ist nicht IE kompatibel? Beim hovern über einen Link erscheint im Firefox ein kleiner Balken unter dem Link der im IE nicht angezeigt wird. Auch sind die Links im IE ingesamt was nach oben verschoben!?? Kann mir einer sagen wie ich den IE dazu bekomme diesen Code exakt wie im Firefox anzuzeigen?

info:
der w3c website validator & css validator zeigen keine fehler an!
firefox ist in der neuesten version und der IE in der version 7

Bin Euch für Antworten wirklich sehr dankbar! :?

mfg R.

LordShadow 20.03.2009 11:16

Zitat:

Zitat von r4m0n (Beitrag 427089)
Hallo,

Ich möchte gerne wissen wieso mein CSS Code im Firefox funktioniert und im IE nicht ...
Ich habe schon viel ausprobiert und komme einfach nicht drauf wieso immer eines der beiden Browser spinnen muss. Passe ich zuerst meine Site ans Firefox an spinnt der IE und umgekehrt der Firefox.

Erstmal mein Code:
HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

        <head>

                <title>test</title>

                <meta http-equiv="Content-Type" content="text/html;Charset=utf-8">
                <style type="text/css">
.top

{

        width: 800px;

        padding: 15px;

        margin-left:auto;

        margin-right:auto;

        border: 1px solid #ccc;

        background: #fff;

}



#navSquare

{

        margin: 0px 0px 0px 0px;

        padding: 30px 0px 22px 200px;

        border-bottom: 1px solid #9FB1BC;

        width: 600px;

}



#navSquare li

{

        margin: 0px 0px 0px 0px;

        display: inline;

        list-style-type: none;

}



#navSquare a:link, #navSquare a:visited

{

        font-size: 12px;

        line-height: 14px;

        padding: 0px 0px 6px 0px;

        text-decoration: none;

        color: #708491;

        font-family: Tahoma;

}



#navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover

{

        color: #000;
        background: url(images/square.gif) no-repeat bottom center;

}



body

{

  font-family: verdana, sans-serif;

  font-size: 11px;

  background: #eeeee;

}


</style>

</head>

  <body>

    <div class="top">

      <ul id="navSquare">

        <li style="float:left;width:60px">                <a class="active" href="test1.html">test</a></li>

        <li style="float:left;width:90px">                <a href="test2.html">test</a></li>

        <li style="float:left;width:70px">                <a href="test3.html">test</a></li>

        <li style="float:left;width:80px">                <a href="test4.html">test</a></li>               

        <li style="float:left;width:55px">                <a href="test5.html">test</a></li>

        <li style="float:left;width:80px">                <a href="test6.html">test</a></li>

        <li style="float:right;width:27px">        <a href="test7.html">test</a></li>

        <li style="float:right;width:40px">        <a href="test8.html">test</a></li>

      </ul>

    </div>

</body>

</html>

Welcher Teil meines Codes ist nicht IE kompatibel? Beim hovern über einen Link erscheint im Firefox ein kleiner Balken unter dem Link der im IE nicht angezeigt wird. Auch sind die Links im IE ingesamt was nach oben verschoben!?? Kann mir einer sagen wie ich den IE dazu bekomme diesen Code exakt wie im Firefox anzuzeigen?

info:
der w3c website validator & css validator zeigen keine fehler an!
firefox ist in der neuesten version und der IE in der version 7

Bin Euch für Antworten wirklich sehr dankbar! :?

mfg R.

Hy ..

also bei mir erscheint weder im IE noch im Firefox ein balken ... (hast dui den richtigen code gepostet)
Willst du einen untersteichung musst du das mit text-decoration: underline; im css code vermerken.
btw: background: #eeeee; ist kein valider Farbton ...

gruß

fricca 20.03.2009 12:01

Zitat:

Zitat von r4m0n (Beitrag 427089)
Beim hovern über einen Link erscheint im Firefox ein kleiner Balken unter dem Link der im IE nicht angezeigt wird.

Wenn du über Hintergrundbilder reden willst, musst du einen Link posten. Niemand sieht die sonst.

Zitat:

Auch sind die Links im IE ingesamt was nach oben verschoben!??
Das Element #navSquare ist im IE deutlich höher als im FF, weil hasLayout dafür sorgt, dass die Floats eingeschlossen werden. Entferne die unnötige, hasLayout-auslösende Breitenangabe.

Zitat:

der w3c website validator & css validator zeigen keine fehler an!
Doch, der CSS-Validator zeigt einen Fehler.

r4m0n 20.03.2009 12:12

Vielen Dank für das mithelfen bei meinem Problem!
Ich habe das Problem tatsächlich gelöst!!!
Nach sauberem Einstellen der margin und padding sieht das ganze nun in beiden Browsern gleich aus!
Kann jedem der gleiche Probleme hat wirklich nur empfehlen wie in der FAQ beschrieben ZUERST ALLE Abstände konkret nacheinander festzulegen. Die Browser sind da etwas eigen.... was bei dem Einen mit "Auto" funktioniert muss beim anderen nicht zwangsläufig auch gehen. Ich habe bei mir alle margin und padding Werte mit Pixelangaben versehen und siehe da ... es funzt! ;O)

Gruß R.


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:20 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023