nicht angemeldet
<div> wird nicht immer gleich dargestellt
0 0 
Gunnar Bittersmann
0
<div> wird nicht immer gleich dargestellt
Ich habe mir eine neu Homepage gebaut und habe das Layot mit divs realisiert. Nun habe ich das Problem, das die Positionen der divs im IE anders dargestellt wird als im Mozilla oder Safari.
Folgendes habe ich gemacht:
<body style="margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;" bgcolor="#ffffff">
dann habe ich mir einen Container gebaut, um das Layout zu zentrieren:
<div style="width:100%; height:100%; text-align:center;">
<div style="width:1024px; height:768px; margin:auto; text-align:left;">
Innerhalb dieser divs habe ich dann die einzelnen divs fürs Layout gesetzt:
<div style="position:relative; left: 128px; top: -4px; width: 448px; height: 29px;"><img src="images/mhp.jpg" /></div>
<... usw ...>
In Safari und Mozilla sieht es gut aus, im IE sind einige divs etwas versetzt. Hat jemand eine Idee, warum das so ist und was ich den Fehler beheben könnte?
Danke
Tom
-
Hallo,
In Safari und Mozilla sieht es gut aus, im IE sind einige divs etwas versetzt. Hat jemand eine Idee, warum das so ist und was ich den Fehler beheben könnte?
Noch nie was davon gehört, das der IE das layout verschandeln kann!?
MfG. Christoph Ludwig
--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode: ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
Go to this -
@@TubeTom:
Ich habe mir eine neu Homepage gebaut und habe das Layot mit divs realisiert.
„Dass viele "Designer" der Meinung sind, <html> und <body> sollten möglichst neutralisiert und das Layout dann mittels <div>-Elementen umgesetzt werden, ist bedauerlich bis ärgerlich.“ [at]
Nun habe ich das Problem, das die Positionen der divs im IE anders dargestellt wird als im Mozilla oder Safari.
1. Welcher IE?
2. Quirk-Modus?Folgendes habe ich gemacht:
<body style="margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;" bgcolor="#ffffff">
Warum ein missbilligtes 'bgcolor'-Attribut, wo du doch für Darstellungsangaben CSS verwenden möchtest? Und zwar für ALLE.
Und nicht inline in 'style'-Attribute gepfercht, sondern alle zentral gesammelt im http://de.selfhtml.org/css/formate/einbinden.htm#zentral@title='style'-Element oder im <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=externen Stylesheet>.
<div style="width:1024px; height:768px; margin:auto; text-align:left;">
Bedenke, dass viele Nutzer weniger als 1024 Pixel in der Breite zur Verfügung haben: Scrollbar, Sidebar, Browser nicht als Vollbild, kleinerer Bildschirm. Erzwungenes horizontales Scrollen ist nicht nutzerfreundlich. Verzichte besser auf eine Breitenangabe in Pixel.
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort. -
Erstmal danke für eure Antworten. Ich habe den DOCTYPE schon so gesetzt, dass die Browser nicht im Quirk-Modus arbeiten. Es geht hier um FF und IE7. Das Problem im IE7 ist, dass die vertikale Ausrichtung der DIVs um ca. 10px verschoben ist. Die horizontale Ausrichtung passt!
-
Hi,
Das Problem im IE7 ist, dass die vertikale Ausrichtung der DIVs um ca. 10px verschoben ist.
Das reicht wohl immer noch nicht, um das Problem nachzuvollziehen. </hilfe/charta.htm#tipps-fuer-fragende>
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
hmm... dann hier mal der Quelltext:
<body>
<!-- Main Container -->
<div title="main_window" id="main_window" class="main_window">
<!-- Main Content -->
<div title="main_content" id="main_content" class="main_content"><!-- Logo -->
<div title="logo" id="logo" class="logo">
<img src="../images/mhp.jpg" />
</div>
<!-- Logo End --><!-- Horizontale Hauptlinie -->
<div title="h_line" id="h_line" class="h_line">
<img src="../images/strich1.gif" /></div>
<!-- Horizontale Hauptlinie End --><!-- Vertikale Hauptlinie -->
<div title="v_line" id="v_line" class="v_line">
<img src="../images/strich2.gif" />
</div>
<!-- Vertikale Hauptlinie End --><!-- Horizontale Menülinie -->
<div title="menu_line" id="menu_line" class="menu_line">
<img src="../images/strich3.gif" />
</div>
<!-- Horizontale Menülinie End --><!-- Menu -->
<div title="menu" id="menu" class="menu">
<a href="portfolio.htm" target="content" onclick="MM_nbGroup('down','group1','portfolio','../images/menu/portfolio_fett.jpg',1)" onmouseover="MM_nbGroup('over','portfolio','../images/menu/portfolio_fett.jpg','',1)" onmouseout="MM_nbGroup('out')">
<img src="../images/menu/portfolio.jpg" alt="portfolio" name="portfolio" border="0" id="portfolio" onload="" />
</a>
<a href="vita.htm" target="content" onclick="MM_nbGroup('down','group1','vita','../images/menu/vita_fett.jpg',1)" onmouseover="MM_nbGroup('over','vita','../images/menu/vita_fett.jpg','',1)" onmouseout="MM_nbGroup('out')">
<img src="../images/menu/vita.jpg" alt="vita" name="vita" border="0" id="vita" onload="" />
</a>
<a href="form/check.php" target="content" onclick="MM_nbGroup('down','group1','contact','../images/menu/contact_fett.jpg',1)" onmouseover="MM_nbGroup('over','contact','../images/menu/contact_fett.jpg','',1)" onmouseout="MM_nbGroup('out')">
<img src="../images/menu/contact.jpg" alt="contact" name="contact" border="0" id="contact" onload="" /></a>
</div>
<!-- Menu End --><!-- Content -->
<iframe class="iframe" name="content" frameborder="0" src="portfolio.htm" scrolling="no">
Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.
</iframe>
<!-- Content End --></div>
<!-- Main Content End -->
</div>
<!-- Main Container End--></body>
und hier das CSS dazu:
.body {
overflow:hidden;
margin: 0px;
padding: 0px;
margin-top:50px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
background-color:#ffffff;
}.main_window {
position:relative;
width:100%;
height:100%;
text-align:center;
}.main_content {
position:relative;
width:1024px;
height:768px;
margin:auto;
text-align:left;
}.logo {
position:relative;
width: 448px;
height: 29px;
}.h_line {
position:relative;
width: 900px;
height: 5px;
}.v_line {
position:relative;
width: 6px;
height: 667px;
}.menu_line {
position:relative;
width: 828px;
height: 7px;
}.menu {
position:relative;
width: 828px;
height: 7px;
}.iframe {
position:relative;
height:575px;
width:820px;
left:133px;
top:-622px;
border:0px;
}-
Hi,
hmm... dann hier mal der Quelltext:
1. Nicht vollstaendig - Doctype-Angabe etc. fehlen; sind aber Grundvoraussetzung fuer korrekte Anzeige, Stichwort Quirks Mode.
2. Keine Lust auf Copy&Paste - Online-Beispiel bitte, mit validiertem HTML und CSS. (http://validator.w3.org/, http://jigsaw.w3.org/css-validator/)
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“
-
-
-