Willkommen auf dem Portal für Mediengestalter

Mechlon · Threadersteller

Hallo,

ich habe eine Frage bzw. ein Problem bei der Darstellung zwischen IE 7 und aktuellem FF. Ich muss dazu sagen, ich beschäftige mich erste seit einigen Wochen mit dieser Form der Programmierung - vorher ausschließlich Dreamweaver.

Bei der Darstellung einer Seite verschiebt die IE Teile der Programmierung ganz nach unten. Bei FF passt alles perfekt. Ich war eigentlich der Meinung, dass es bei den neueren Versionen mit dem CSS auf beiden Systemen keine größeren Probleme mehr gibt. Zum besseren Verständnis poste ich die html und die CSS Datei hier her. Das Problem ist sicher nicht bedeutend aber mir wäre sehr geholfen. Übrigens bei JS bin ich noch total Neuling, darum wäre es mir lieber, wenn es eine CSS oder HTML Lösung gäbe. Vielen Dank schon mal im Voraus.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XXXXXXXXXXXXXXXXXXXXXXXXXX</title>
<link rel="stylesheet" href="../css/template_n7.css" type="text/css" />
</head>
<body>
<div id="site">
<div id="top1">
<div id="n7_logo"><img src="../images/test1" alt="xxxxxxxxxxxxxxxxxxxxxxxxxxxx" width="263" height="145" /></div>
</div>
<div id="top2">
<div id="field"><img src="../images/test2" alt="xxxxxxxx" width="10" height="70" /></div>
</div>
<div id="top3">
<h3>XXXXXX</h3>
<div id="top3Text">
YYYYYYYY<br />
</div>
<table>
<tr>
<td width="100px" class="links">abcdef</td>
<td width="150px" class="links">abcdef</td>
<td width="100px" class="links">abcdef</td>
<td width="120px" class="links">abcdef</td>
<td width="100px" class="links">abcdef</td>
<td width="100px" class="links">abcdef</td>
<td><width="100px"></td>
<td><width="100px"></td>
<td><width="100px"></td>
<td><width="100px"></td>
</tr>
<tr>
<td><width="100px"></td>
<td><width="100px"></td>
<td><width="100px"></td>
<td width="120px" class="links">abcdef</td>
<td width="100px" class="links">abcdef</td>
<td width="100px" class="links">abcdef</td>
<td width="120px" class="links">abcdef</td>
</tr>
</table>
</body>
</html>

und hier das CSS

body {
font-family: verdana;
color: #000;
margin: 0px;
background-color: #0d6826;
}
#site {
position: absolute;
width:1024px;
left: 40%;
margin-left: -399px;
margin-top: 0px;
background-color: #0d6826;
}
#top1 {
position: relative;
margin-left: 875px;
margin-top: 70px;
width: 262px;
height: 120px;
background-color: #0d6826;
}
#top2 {
position: relative;
width: 10px;
height: 34px;
margin-left: 256px;
margin-top: 560px;
}
#top3 {
position: relative;
width: 1000px;
height: 20px;
margin-left: 200px;
margin-top: 50px;
}
#field {
position: relative;
width: 10px;
height: 70px;
background-color: fff;
margin-left: -250px;
margin-top: -750px;
}
table {
margin-left: 50px;
margin-right: -200px;
margin-top: 200px;
border-top:#FFFFFF;
caption-side: bottom;
border-collapse:collapse;
font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}
h3 {
font-size: 280%;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
margin-top: 275px;
margin-left: 50px;
}
#top3Text {
font-family:Arial, Helvetica, sans-serif;
font-size:19px;
color:#FF7D21;
margin-left: 50px;
margin-top: -35px;
}
.zentriert {
text-align: center;
}
.links {
text-align: left;
}
td, th {
border:hidden;
padding: 5px;
}

Viele Grüße
Mechlon

Kash · **Verfasst** Mi 25.06.2008 10:31 **Titel**

Mechlon · Threadersteller

... ähm, ich dachte bei den neuen Versinen gebe es diese Probleme nicht mehr. Ich werde meine Denke überarbeiten Lächel

Beim FF ist alles ok und bei IE verschiebt es die "XXXXX" und die "YYYYY" zu tief nach unten. Der Abstand zwischen diesen Zeilen und der kleinen Tabelle ist eigentlich ok, er könnte etwas kürzer sein aber ich vermute es liegt an dem oberen zu großen Abstand.

Gibt's da noch Hoffnung?

viele Grüße
Mechlon

Kash · **Verfasst** Mi 25.06.2008 15:03 **Titel**

was mir auch noch auffällt.

wieso verzichtest du auf den doctype?
und schickst den browser in den quirksmode?

http://de.wikipedia.org/wiki/Quirksmode

Mechlon · Threadersteller

Auf den doctype habe ich nicht verzichtet, ich habe ihn nur rausgelassen, damit nicht soviel da ist.
Was ist der "quirksmode"? hab ich noch nie gehört ...

Kash · **Verfasst** Mi 25.06.2008 15:08 **Titel**

ich denke

Mechlon · Threadersteller

* {
padding: 0;
margin: 0;
}
body {
font-family: verdana;
color: #000;
margin: 0px;
...

Meinst Du so? In dem Fall schiebt er mir die "YYY"-Zeile über die "XXX"-Zeile bei Firefox und bei IE

Kash · **Verfasst** Mi 25.06.2008 15:19 **Titel**

genau.
entwickel auf dieser basis weiter...

falls ich heute abend nach dem spiel noch fitt sein sollte ( * Keine Ahnung... *

)
dann schaue ich mir das nochmal an.

außerdem sieht es so aus als würdes du manche divs nicht schließen

Willkommen auf dem Portal für Mediengestalter

Thema: Darstellungsproblem zwischen IE 7 und FF html / css vom 25.06.2008

Darstellungsproblem zwischen IE 7 und FF html / css

Re: Darstellungsproblem zwischen IE 7 und FF html / css