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

r4m0n · #1 (**permalink**) 20.03.2009, 10:50

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 · #2 (**permalink**) 20.03.2009, 11:16

Zitat:

Zitat von r4m0n

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 · #3 (**permalink**) 20.03.2009, 12:01

Zitat:

Zitat von r4m0n

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 · #4 (**permalink**) 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.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe, ich kann nicht mehr ;-) (CSS und runde Ecken ;-))	Timmi	CSS	8	02.11.2008 14:12
Abstände mittels css (Firefox und Explorer) vereinheitlichen	ben78	CSS	2	26.09.2008 00:17
css hilfe	victorwooten	CSS	1	19.11.2006 14:15
Problem mit Firefox CSS width/height input-field type text/submit in XHTML	NedwebSurfer	CSS	3	14.06.2006 14:23
CSS mit CSS Seiten verlinken !!! BRAUCHE HILFE !!!!	beavis-2005	CSS	2	16.01.2006 18:10