zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Benötige dringend Hilfe mit CSS in Firefox & IE :(

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.03.2009, 09:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2008
Beiträge: 4
r4m0n befindet sich auf einem aufstrebenden Ast
Unglücklich 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.03.2009, 10:16
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard

Zitat:
Zitat von r4m0n Beitrag anzeigen
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ß
__________________
„Auch aus Steinen, die einem in den Weg gelegt werden, kann man Schönes bauen.“
(Johann Wolfgang von Goethe)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.03.2009, 11:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.782
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von r4m0n Beitrag anzeigen
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.
Mit Zitat antworten
  #4 (permalink)  
Alt 20.03.2009, 11:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2008
Beiträge: 4
r4m0n befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Stichwörter
anzeige, firefox

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:04 Uhr.