✔ Unterschied zwischen Vorschau und WWW bei IE7

Status
Nicht offen für weitere Antworten.
Loveboat

Loveboat

Erfahrenes Mitglied
Hallo Leute,

heute bin ich mal hier bei CSS mit einem kleinen Problem. Vielleicht könnt Ihr mir ja helfen.

Ich habe eine Seite mit CSS erstellt wobei die Lokale Datei mit dem IE7 wie gewünscht dargestellt wird. Lade ich die Seite und die css-Datei auf meinen Content, dann erhalte ich eine andere Darstellung mit dem IE7.

Um einen Fehler auf dem content auszuschließen, habe ich die Seite mit dem FF geprüft, lokal wie im WWW, und beide sind identlisch.

Als "Lösung" wäre eine Definition von width innerhalb von "#navigation li a" aber da ich mit verschiedenen Sprachen und somit verschiedenen Längen der Felder arbeite, kann ich keine feste Breite angeben. Soll ja dynamisch sein, mit einer Padding links/rechts.

Wo liegt mein Fehler?

Hier mein Code:

HTML: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/default.css" type="text/css" />
<link rel="stylesheet" href="css/fonts.css" type="text/css" />
<title>Ohne_Titel_1</title>
</head>
<body>
<div id="bodyDIV">
 <div id="topHEAD"></div>
 <div id="topBAR">
  <div id="navLANG">
   <a href="index.php?lang=de&amp;id=100"><img src="pixel/flagge-en.jpg" alt="de" width="20" height="27" style="cursor:pointer" /></a>
   <a href="index.php?lang=en&amp;id=100"><img src="pixel/flagge-fr.jpg" alt="en" width="20" height="27" style="cursor:pointer" /></a>
  </div>
  <ul id="navigation">
   <li><a href="index.php?lang=de&amp;id=100"><span>Villa Kempson</span></a></li>
   <li><a href="index.php?lang=de&amp;id=101"><span>Verfügbarkeit</span></a></li>
   <li><a href="index.php?lang=de&amp;id=102"><span>Preise</span></a></li>
   <li><a href="index.php?lang=de&amp;id=103"><span>Buchen</span></a></li>
   <li><a href="index.php?lang=de&amp;id=104"><span>Fluglinien</span></a></li>
   <li><a href="index.php?lang=de&amp;id=105"><span>Bewertung</span></a></li>
   <li><a href="index.php?lang=de&amp;id=106"><span>Kontakt</span></a></li>
  </ul> 
 </div>
 <div id="topSPACE"></div>
 <div id="leftBAR"></div>
 <div id="rightBAR"></div>
 <div id="botFOOTER"></div>
</div>
</body>
</html>


Code: 
#navigation {
 height: 27px;
 list-style: none;
 margin: 0 0 0 10px;
 padding: 0;
}
#navigation li {
 height:27px;
 display:block;
 float:left;        
}
#navigation li a {
 padding: 5px 10px 0 10px;
 font-family: sans-serif;
 font-size: 13px;
 font-weight: bold;
 color: #882D1A;
 display: block;
 height: 27px;
 text-align: center;
 text-decoration: none;
}
#navigation li a:hover { text-decoration: underline; }
 
#navLANG {
 position: absolute;
 width: 50px;
 height: 27px;
 right: 0px;
}
#navLANG img {
 border-width: 0px;
}

Danke im Voraus.

Gruß
Loveboat

Anschauen könnt Ihr es hier (die Sprache ist unwichtig, sondern die Darstellung der Navi-Bar):
- links die Vorschau der lokalen Datei
- rechts die Datei im Web (nur bei IE, FF zeigt es wie lokal an)
 

Anhänge

  • Vorschau-IE7.jpg
    Vorschau-IE7.jpg
    14,6 KB · Aufrufe: 18
  • www-IE7.jpg
    www-IE7.jpg
    18,9 KB · Aufrufe: 17
Hi,

am Stylesheet liegt es definitiv nicht.

Da du uns aber die ersten beiden Zeilen des HTML-Quelltextes mit der Doctype-Deklaration verschweigst, behaupte ich jetzt einfach, dass in der Entwicklungsumgebung das HTML-Dokument im Standardsmode, und nach dem Upload im Quirksmode übergeben wird, was dann im IE zu diesem Unterschied in der Darstellung führt.
 
tja, was soll ich sagen? Du hattest Recht. :-) Jetzt funktioniert es wie es soll.

Die Frage ist, warum zeigt der FF das richtig an? IE = dumm?

Was ist der Unterschied zwischen dem Standardmode und dem Quirksmode?

Danke und gruß
Loveboat
 
Falls du auch den IE6 berücksichtigen möchtest, empfehle ich dir folgende Regeländerung:

Code: 
#navigation li a {
 padding: 5px 10px 0 10px;
 font-family: sans-serif;
 font-size: 13px;
 font-weight: bold;
 color: #882D1A;
 /*display:block;*/ /* auskommentiert = deaktiviert */
 float:left;
 height: 27px;
 text-align: center;
 text-decoration: none;
}
denn mit der display:block-Angabe richtet er die Links untereinander aus.

Mit der float-Eigenschaft erhält das Inline-Element ebenfalls "Block-Level-Charakteristika", um die Höhenangabe anzunehmen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück