Hallo zusammen!
Ich bin mich aus Langeweile etwas mit CSS am befassen und hab mir einfach mal ein simples Layout erstellt. Hab am Montag erst angefangen.
Im Firefox wird alles korrekt dargestellt, der IE7 stellt nur eine Seite falsch dar. Obwohl alle Seiten das gleiche CSS-Sheet benutzen.
Ich habe für den Bereich mit Inhalt den Abstand von oben mit 130px angegeben. Bei dieser einen Seite ignoriert IE die Angabe und zeigt den Inhalt direkt am oberen Rand.
CSS und XHTML transitional sind validiert.
Hier mal mein CSS:
Code:
html {background:#E0DFE3;}
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; background:rgb(224,223,227);}
body select, textarea, .input {FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #000000; BACKGROUND-COLOR: #E0DFE3}
body a:link, body a:visited, body a:active {color: #000000; text-decoration: underline;}
body a:hover {color: #000000; text-decoration: none;}
body {font-family: tahoma,helvetica; font-size:16px;}
.tablehead a:link, .tablehead a:visited, .tablehead a:active {color: #000000; text-decoration: underline;}
.tablehead a:hover { color: #000000; text-decoration: none; }
.clear {clear:both;}
p:first-letter {font-weight:bold; font-size:30px; color:#000;}
#page {margin:130px 0 50px 180px; display:block; width:500px; border:1px solid #000; background:#fff; padding:10px;}
#page a {text-decoration:underline; color:#000;}
#page a:hover {text-decoration:none; color:#000;}
#page p {font-size:25px; text-decoration:underline; color:#000;}
#page .right {font-size:30px; float:right;}
#page .img {margin-right:5px; margin-bottom:5px; float:right;}
#menu {display:block; top:30px; left:25px; width:150px; position:fixed; border:1px solid #000; padding:10px; text-align:center; font-weight:bold; color:#000; background:url(grid.gif);}
* html #menu {position:absolute;}
#menu a:visited, #menu a {display:block; width:140px; height:20px; margin:0 auto; border-top:1px solid #FFF; border-right:1px solid #000; border-bottom:1px solid #000; border-left:1px solid #FFF; text-align:center; text-decoration:none; line-height:20px; color:#000;}
#menu a:hover {background:#FFF; color:#000;}
#footer {display:block; bottom:30px; left:25px; width:150px; position:fixed; border:1px solid #000; padding:5px 10px; text-align:center; font-weight:bold; color:#000; background:url(grid.gif);}
* html #footer {position:absolute;}
#footer a {text-decoration:none; color:#000;}
#footer {font-family: tahoma,helvetica; font-size:10px;}
#bild {display:block; top:50px; right:20px; position:fixed; }
* html #bild {position:absolute;}
#bild img {border: 0;}
#w3 {display:block; bottom:10px; right:20px; position:fixed; }
* html #w3 {position:absolute;}
#w3 img {border: 0;}
#w3css {display:block; bottom:51px; right:20px; position:fixed; }
* html #w3css {position:absolute;}
#w3css img {border: 0;}
#fixpic {display:block; width:108px; height:145px; position:fixed; bottom:0; left:0;}
* html #fixpic {position:absolute;}
Die Seite ist unter
http://mätti.de ( oder
::mätti.de - experimental v0.1:: ) zu erreichen.
Die "falsche" Seite ist das Gästebuch. Ich finde den Fehler einfach nicht, vielleicht habe ich mittlerweile auch schon zu lange in den Code gestarrt.
Kann mir bitte mal jemand einen Tipp geben? Muss ja nicht gleich die Lösung auf einem Silbertablett sein, ein kleiner Hinweis würde mir schon reichen.
Vielen Dank!
21.11.2007, 22:46
Anzeigefehler "margin" in IE7
Ähnliche Themen
Linear-Darstellung
