nicht angemeldet
probleme mit css bei ie und ff
hallo,
ich bin gerade dabei eine html seite aufzubauen. grundkenntnisse habe ich. mein html code sieht wie folgt aus:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="scripts/ff_style.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="de" />
</head>
<!--[if IE]> <link rel="stylesheet" href="scripts/ie_style.css" media="screen" /> <![endif]-->
<body>
<div id="site">
<div id="top">
</div>
<div id="top_line">
</div>
</div>
</body>
</html>
und mein css für den ff:
#site {
width:802px;
position:absolute;
margin:0px 0px 0px -401px;
left:50%;
}
#top {
width:800px;
height:80px;
float:left;
position:relative;
margin:0px 0px 0px 0px;
background:yellow;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
#top_line {
width:800px;
height:2px;
float:left;
position:relative;
margin:0px 0px 0px 0px;
background:#E5E5E5;
border-left:1px solid black;
border-right:1px solid black;
}
und der css code für den ie:
#site {
width:800px;
position:absolute;
margin:0px 0px 0px -400px;
left:50%;
}
#top {
width:800px;
height:2px;
float:left;
position:relative;
margin:0px 0px 0px 0px;
background:yellow;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
#top_line {
width:800px;
height:2px;
float:left;
position:relative;
margin:0px 0px 0px 0px;
background:#E5E5E5;
border-left:1px solid black;
border-right:1px solid black;
}
zusätzlich habe ich mir den ietester runtergeladen, weil ich es auf die kompatibilität mit den anderen browser angucken möchte.
was mich stört ist, dass beim ff die ansicht richtig ist, also das div "top_line" eine höhe von 2px hat. Aber die anschicht in ie ist anders, sprich sie ist höher als 2px ich schätze mal auf 12 px.
ich sehe gerade den fehler nicht. hat jemand ein rat?
viele grüße
beno
-
Hi,
ich bin gerade dabei eine html seite aufzubauen. grundkenntnisse habe ich.
Da fehlt aber noch einiges ...
Zuerst mal die Doctype-Angabe, um den Quirks Mode zu vermeiden.
Warum du das Stylesheet für den IE außerhalb des HEAD platzierst, müsstest du auch mal erklären.
Außerdem sind Conditional Comments schlecht für die Lade-Performance - für einzelne Korrekturen bieten sich CSS-Hacks eher an.was mich stört ist, dass beim ff die ansicht richtig ist, also das div "top_line" eine höhe von 2px hat.
Wenn das nur Verzierung ist, dann rechtfertigt es gar kein (ansonsten vermutlich inhaltsleeres) HTML-Element.
Wieso nutzt du nicht einfach einen border?Aber die anschicht in ie ist anders, sprich sie ist höher als 2px ich schätze mal auf 12 px.
Der IE reserviert immer Platz für eventuellen Textinhalt.
Das könnte man ihm per overflow abgewöhnen; aber wie gesagt - sinnvoll ist so ein Element rein für die Optik sowieso nicht.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
hallo chris,
erstmal danke für deine antwort.
Da fehlt aber noch einiges ...
nun, wie gesagt grundkenntnisse :-)
Zuerst mal die Doctype-Angabe, um den Quirks Mode zu vermeiden.
beim kopieren ist es mir außerhand gekommen, aber mein doctype ist:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">zufrieden, oder würdest du was anderes empfehlen?
Warum du das Stylesheet für den IE außerhalb des HEAD platzierst, müsstest du auch mal erklären.
naja, ich wollte ursprünglich die Ansicht/Ausgabe optimal für den ff erstellen, daher habe ich es außerhalb von HEAD plaziert.
Außerdem sind Conditional Comments schlecht für die Lade-Performance - für einzelne Korrekturen bieten sich CSS-Hacks eher an.
das mit den CSS Hacks ist ein wertvoller tip. ich habe meine grundkenntnisse aus einem alten buch/skript. wahrscheinlich gab es zu der zeit keine css hacks :-)
Wenn das nur Verzierung ist, dann rechtfertigt es gar kein (ansonsten vermutlich inhaltsleeres) HTML-Element.
Wieso nutzt du nicht einfach einen border?das habe ich mich gerade auch gefragt :-)
Der IE reserviert immer Platz für eventuellen Textinhalt.
Das könnte man ihm per overflow abgewöhnen; aber wie gesagt - sinnvoll ist so ein Element rein für die Optik sowieso nicht.das war's overflow ist das schlüsselwort gewesen, aber ich mache es doch lieber mit border :-)
vielen dank nochmals für deine hilfe.
beno
-
-
<!--[if IE]> <link rel="stylesheet" href="scripts/ie_style.css" media="screen" /> <![endif]-->
was mich stört ist, dass beim ff die ansicht richtig ist, also das div "top_line" eine höhe von 2px hat. Aber die anschicht in ie ist anders, sprich sie ist höher als 2px ich schätze mal auf 12 px.
12 Pixel? Möglicherweise eine Zeilenhöhe.
Jetzt mal abgesehen von der gar schauerlichen CSS-Betonierei, die du da veranstaltest:
Der IE kann seit Version 7, spätestens aber seit Version 8 sehr anständig mit CSS umgehen. Wenn du pauschal jedem IE eigene CSS-Daten verpasst, stellst du dir selbst ein Bein. In der Regel reicht es, nur die Versionen bis einschließlich 6 gesondert zu behandeln (und sei es, indem du sie gänzlich von CSS ausschließt).
Allerdings muss man die aktuellen IEs, wie alle Browser, auch anständig arbeiten _lassen_: Viele Browser haben zwei Darstellungsmodi, den standardkonformen, der sich strikt an die W3C-Vorgaben hält (halten soll), und den Quarkmodus, in dem sie machen, wie sie lustig sind.
Ohne das jetzt nachzuprüfen vermute ich stark, dass du deine Browser letzteres veranstalten lässt, so dass die unterschiedliche Darstellung kein Wunder ist. Firefox zeigt dir seinen Modus in den Seiteneigenschaften an (Rechtsklick auf Seite -> Seiteninformationen -> Allgemein -> Anzeigemodus).
Unter http://hsivonen.iki.fi/doctype/ kannst du nachlesen, wie du in den standardkonformen Modus schaltest. Jede ernsthafte CSS-Arbeit ohne standardkonformen Modus ist vertane Zeit.Davon unabhängig rate ich dir ab, sämtliche CSS-Daten zu übernehmen in die IE-Version, selbst jene, die in beiden Versionen identisch sind. Du machst es dir damit unnötig schwer, die relevanten Unterschiede zu erkennen und wirst den Überblick verlieren, was wie zusammenwirkt. Außerdem machst du dir alleine mit der Kopiererei unnötige Arbeit.
Und wenn du trotzdem vollständige Kopien anlegen möchtest, dann binde niemals beide gleichzeitig ein. Es sind vollständige Kopien, sie können alleine wirken. Eher früher als später wirst du vergessen, eine Angabe von Kopie A nach B zu übernehmen, bemerkst den Fehler aber nicht, weil du beide eingebunden hast und arbeitest von da an auf fehlerhaften Grundlagen.