✔ IE Darstellungsfehler

Status
Nicht offen für weitere Antworten.
patstome

patstome

Grünschnabel
Hallo,

jetzt komme ich doch nicht mehr weiter...
meine Homepage patstome.de wird mit Firefox, Safari und Opera (mit diesen Browsern habe ich es jedenfalls getestet) richtig bzw. so dargestellt, wie ich es mir vorstelle.
Mit dem IE ist sie nicht mehr zentriert und die einzelnen #div's sind auch etwas nach rechts verschoben, dass teilweise der Rahmen nicht mehr zu sehen ist. Aber am besten schaut ihr mal schnell selbst nach.

Da der Code recht lang ist, poste ich ihn jetzt mal lieber nicht, auch weil dies überhaupt mein erster Beitrag hier ist. Falls es doch besser wäre, lasst es mich bitte wissen.

Ich wäre Euch für jede Hilfe sehr dankbar

pat
 
Hi,

wozu hast du denn in fast jeder CSS-Eigenschaft die !important-Regel angewendet :confused:

Probier's mal mit diesem Vorschlag:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>home of patstome.de   |   Patrik Schmid</title>
<meta name="description" content="Homepage von Patrik Schmid">
<meta name="keywords" content="patrik, schmid, patrik schmid, patstome, photo, Design, berlin, kunst, bilder, photos, fotos, deviantart, aqua-soft, pho&bull;town, ivan-suta">
<meta name="author" content="Patrik Schmid">
<meta name="robots" content="index|follow|">
<meta name="revisit-after" content="1 days">
<meta name="copyright" content="Patrik Schmid">
<style type="text/css">
html {
font:.9em/1.3em Verdana, Arial, Helvetica, sans-serif;
background: #3a3a42;
text-align: center; /* ! WICHTIG ! Das benötigt die Krücke IE 5.x, um den Container zu zentrieren */
}

div#wrapper {
border-left: 1px solid #f4f4f4;
border-right: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
height: 654px;
width: 810px;
margin: 0 auto;
}

a.navi:link, a.navi:visited {
background-color: #f4f4f4;
color: #3a3a42;
text-decoration: none;
display: block;
float: left;
line-height: 25px;
border-right: 1px solid #5a5a5a;
font-variant: small-caps;
text-align: center;
width: 118px;
}

a.navi:hover {
background-color: #3a3a42;
color: #cccccc;
display: block;
text-decoration: none;
line-height: 23px;
border-right: 1px solid #5a5a5a;
border-bottom: 1px solid #f4f4f4;
border-top: 1px solid #f4f4f4;
width: 118px;
text-align: center;
}

#top {
background-image: url(http://www.patstome.de/files/top.jpg);
color: #f4f4f4;
letter-spacing: 2px;
text-align: right;
margin-top: -7px;
line-height: 16px;
font-size: 15px;
height: 140px;
width: 810px;
}

#header {
font-variant: small-caps;
background-color: #f4f4f4;
font-size: 11px;
text-align: left;
line-height: 25px;
margin-bottom: 1px;
height: 25px;
width: 810px;
text-decoration: none;
}

#flashcontent {
font-variant: small-caps;
background-color: #3a3a42;
color: #f4f4f4;
text-align:left;
line-height: 2em;
font-size: 11px;
height: 240px;
width: 810px;
}

div#past
{
font-variant: small-caps;
background-color: #f4f4f4;
text-align: center;
font-size: 9px;
word-spacing: 8px;
height: 201px;
width: 810px;
}

#footer
{
font-variant: small-caps;
background-color: #f4f4f4;
text-align:right;
margin-top: -8px;
font-size: 9px;
line-height: 2.5em;
word-spacing: 8px;
height: 25px;
width: 810px;
}
</style>
</head>


<body>
<div id="wrapper">
<div id="top"><br><p style="margin-right: 10px; margin-top: 10px;">Patstome.de<br><p style="font-size: 11px; margin-right: 10px;">Photography</p></div>

<div id="header">
<a class="navi" href="http://www.patstome.de">Home</a>
<a class="navi" href="http://www.patstome.de/photography.html">Photos</a>
<a class="navi" href="http://www.patstome.de/links.html">Links</a>
<a class="navi" href="http://www.patstome.de/about.html">About</a>
</div>

<div id="flashcontent"><a href="http://www.patstome.de/photography.html"><img src="http://www.patstome.de/files/walk.jpg" style="width: 380px; height: 224px; float: right; margin-right:20px; margin-top: 7px;" border=0></a>
<p style="margin-left: 10px;"><br>Hallo Und Willkommen,<br>
Diese Seite Befindet Sich Noch Im Umbau!<br>
<br>
Hi And Welcome,<br>
This Site Is Still Under Construction!<br>
<br>
Patrik Schmid.</p>
</div>

<div id="past">
<p style="font-size: 10px;">Some Very Good Stuff (Not Mine) @ DeviantART</p>
<!-- deviantART Pastie Beginning Marker -->
<script type="text/javascript" src="http://backend.deviantart.com/pasties/js/?iam=patstome&amp;key=266972e397&amp;filter=mine&amp;stream=faves&amp;limit=4&amp;ori=h&amp;size=small"></script>
<!-- deviantART Pastie Ending Marker --></p>
</div>

<div id="footer"><p style="margin-right: 15px;">&copy; All Rights Reserved Patrik S.,
Berlin 2007</p></div>
</div><!-- END div#wrapper -->

</body>
</html>
 
Super,
vielen dank, mittig ist es jetzt und der Rahmen wird auch angezeigt. Aber verstehen... das geht mir noch nicht rein ;)!

Nur der #footer ist noch nach oben verschoben und der Rahmen ganz oben (links und rechts), liegt nicht genau bündig mit der Grafik. Das liegt vermutlich an dem "margin-top:-7px;" Befehl innerhalb der #top und #footer div's. Ich hatte gerade auch versucht darauf zu verzichten, aber dann entsteht ein recht großer (vllt 10px) Abstand zwischen #past und #footer und ehrlich gesagt verstehe ich auch nicht warum...

Und die "important-Regel" habe ich entfernt. Das hatte ich einfach von einem freund so übernommen...

pat
 
Hi!
patstome hat gesagt.:
mittig ist es jetzt und der Rahmen wird auch angezeigt. Aber verstehen... das geht mir noch nicht rein ;)!
Zum Vergrößern anklicken....

Das html-Element kann nicht zur Formatierung eines Blockbereichs bzw. einer Box innerhalb des Dokumentkörpers verwendet werden. Aus diesem Grund hatte ich die Eigenschaften auf das DIV #wrapper überschrieben und den bestehenden Inhalt in diesem Blockelement eingebettet:

Code: 
div#wrapper {
border-left: 1px solid #f4f4f4;
border-right: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
height: 654px;
width: 810px;
margin: 0 auto;
}
Code: 
<body>
        <div id="wrapper"> <!-- Hier folgt der Bestand --> </div><!-- END div#wrapper -->
</body>

patstome hat gesagt.:
Nur der #footer ist noch nach oben verschoben und der Rahmen ganz oben (links und rechts), liegt nicht genau bündig mit der Grafik. Das liegt vermutlich an dem "margin-top:-7px;" Befehl innerhalb der #top und #footer div's. Ich hatte gerade auch versucht darauf zu verzichten, aber dann entsteht ein recht großer (vllt 10px) Abstand zwischen #past und #footer und ehrlich gesagt verstehe ich auch nicht warum...
Zum Vergrößern anklicken....
Wenn ich die Höhenangabe für das umschliessende DIV korrigiere, die Höhen-Summe aller eingebetteten DIVs ergibt nämlich 631 anstatt 654 Pixel, die negativen margin-top-Werte für die IDs #top und #footer im Stylesheet auskommentiere (= deaktiviere), sowie mit dem universellen *-Selektor die Polsterungseigenschaften aller Elemente auf null setze, wird bei mir nichts nach oben verschoben und ebenso wenig entsteht eine Lücke zwischen den DIVs past und footer:

Code: 
* {
margin: 0;
padding: 0;
}

div#wrapper {
border-left: 1px solid #f4f4f4;
border-right: 1px solid #f4f4f4;
border-bottom: 1px solid #f4f4f4;
height: 631px; /* 140px + 25px + 240px + 201px + 25px != 654px */
width: 810px;
margin: 0 auto;
}

#top {
background-image: url(http://www.patstome.de/files/top.jpg);
color: #f4f4f4;
letter-spacing: 2px;
text-align: right;
/*margin-top: -7px;*/ /* auskommentiert = deaktiviert */
line-height: 16px;
font-size: 15px;
height: 140px;
width: 810px;
}

#footer {
font-variant: small-caps;
background-color: #f4f4f4;
text-align:right;
/*margin-top: -8px;*/ /* auskommentiert = deaktiviert */
font-size: 9px;
line-height: 2.5em;
word-spacing: 8px;
height: 25px;
width: 810px;
}
 
hey, danke nochmal.

Das mit dem code hatte ich verstanden, nur dass das html- element das nicht umsetzten kann... das wusste ich nicht.

Und ja, mit dem auskommentieren klappt jetzt alles. Ich hatte wohl einen Denkfehler, als ich die margin-top werte rausgenommen hatte. Deshalb waren dann auch die Abstände nicht mehr richtig!?

gruß pat
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück