nicht angemeldet
Layoutprobleme im IE7
Hallo Leute!
Ich habe ein Layout bestehend aus Header, Main (left, content, right) und Footer. Grundidee von dieser Seite (ist vermutlich bekannt): 'http://www.alistapart.com/articles/holygrail' und noch auf meine "Bedürfnisse" angepasst.
Das Layout passt im aktuellsten FF, IE6(!) u.a. aber nicht im IE7. Auf den ersten schnellen Blick sieht es auch im IE7 normal aus, allerdings erblickt man recht schnell die horizontale Scrollbar, mit der man auf eine weiße Spalte scrollen kann - sehr unnnötig. Hier der Code, copy - paste und man kann es sich ansehen (wenn es nicht allzugroße Umstände macht).
Ansonsten hier noch Links zu Bildern:
1.) FF 'http://s7.directupload.net/images/080222/5ldxti58.png'
2.) IE7_1 'http://s7.directupload.net/images/080222/z2omgsu7.png'
3.) IE7_2 http://s7.directupload.net/images/080222/nl9ayv2u.png' (rechts weiße Spalte)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*
{
margin:0;
}
html, body
{
font-size: 100.1%;
height:100%;
margin:0em;
padding:0em;
width:100%;
min-width:60em;
}
.outer
{
min-height:100%;
margin-bottom:-3em;
height:auto;
}
* html .outer
{
height:100%;
}
/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
/* REDHEADER */
div.redheader
{
background:#8d2132;
height:4em;
}
/* WHITEHEADER */
div.whiteheader
{
background:#f9fbed;
height:5.3125em;
}
/* BLUEHEADER */
div.blueheader
{
background:#66808c;
height:1.25em;
}
/* MAIN */
.main{
padding-left:9em;
padding-right:13em;
}
.left{
background:red;
position:relative;
float:left;
width:7em;
margin-left:-9em;
padding:1em 1em;
}
/*** IE6 Fix ***/
* html .left {
left:9em;
}
.content{
background:brown;
position:relative;
float:left;
width:100%;
padding:1em 2em;
}
.right{
background:yellow;
position:relative;
float:left;
width:7em;
margin-right:-9em;
padding:1em 1em;
}
/* FOOTER */
.footer{
background:blue;
clear:both;
height:3em;
}
</style>
</head>
<body>
<div class="outer">
<div class="redheader">
Redheader
</div>
<div class="whiteheader">
Whiteheader
</div>
<div class="blueheader">
blueheader
</div>
<div class="main">
<div class="left">
left
</div>
<div class="content">
content
</div>
<div class="right">
right
</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
Ich hoffe ihr findet den Hund!
MfG Emanuel
-
Hast du schon versucht, eine zweite CSS-Datei nur für IE7 zu machen?
Kannst du dann so im Header der html-Datei einbinden:
!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="blubb.css">
<![endif]-->Der IE(7) liest nämlich Divs total anders als jeder vernünftige Browser :-/.
Anderer Versuch: direkt nach der Doctype-Definition im Header (also ohne Leerschlag und nichts) <!--IE 7 quirks mode please--> einfügen. Das sollte den IE7 in einen ähnlichen Modus werfen wie den IE6.
Leider hat das beides bei mir nicht geklappt, sprich, ich hänge seit 2 Monaten am selben Problem --> Hilfe!
Da es ziemlich eilte, habe ich nun eine Weiterleitung für den IE7 gemacht, aber kanns ja irgendwie nicht sein... ich will wenn schon eine html-Seite mit zwei CSS-Dateien.
Website für FF, Ie6, Safari...: http://www.v-ida.ch/
CSS dafür: http://www.v-ida.ch/vida.css
Website nur für IE7: http://www.v-ida.ch/index_ie.htm
CSS für IE7: http://www.v-ida.ch/vidaie.css
Ich hoffe, irgendwer kann mir auch helfen. Hab schon 2 professionelle Webprogrammierer gefragt, in diversen Foren gefragt, mit Firebug, Joomla und yaml versucht... *verzweifel*-
Hi,
Website für FF, Ie6, Safari...: http://www.v-ida.ch/
Du solltest das mal mit der Webdeveloper Toolbar oder #content { background:red !important } ansehen...
freundliche Grüße
Ingo-
Hi,
Website für FF, Ie6, Safari...: http://www.v-ida.ch/
Du solltest das mal mit der Webdeveloper ToolbarFirebug, oder wie? Der hilft mir leider nicht, weil es mir die CSS-Datei dort nicht anzeigt, und ich verstehe da zu wenig Englisch, um rauszufinden warum.
oder #content { background:red !important } ansehen...
Ja, dann wird der Hintergrund von dem Div rot, und dann? Kapier ich nicht :-( Als ichs programmiert habe, habe ich die Border-Ränder farbig gemacht, ich weiss schon, wo die Divs durch gehen.freundliche Grüße
Ingo:-)
-
Hi,
oder #content { background:red !important } ansehen...
Ja, dann wird der Hintergrund von dem Div rot, und dann? Kapier ich nicht :-( Als ichs programmiert habe, habe ich die Border-Ränder farbig gemacht, ich weiss schon, wo die Divs durch gehen.Aber ist Dir überhaupt aufgefallen, dass dieses DIV unnötig nach rechts erweitert ist? Firefox hat keine Probleme damit, ein Element über die Boxgrenzen hinaus darzustellen, der IE dagegen schon.
freundliche Grüße
Ingo-
Hi,
oder #content { background:red !important } ansehen...
Ja, dann wird der Hintergrund von dem Div rot, und dann? Kapier ich nicht :-( Als ichs programmiert habe, habe ich die Border-Ränder farbig gemacht, ich weiss schon, wo die Divs durch gehen.
Aber ist Dir überhaupt aufgefallen, dass dieses DIV unnötig nach rechts erweitert ist? Firefox hat keine Probleme damit, ein Element über die Boxgrenzen hinaus darzustellen, der IE dagegen schon.freundliche Grüße
IngoAaah, jetzt ist klar, vielen Dank!
Interessanterweise hat der rote Hintergrund im Gegensatz zu den farbigen Border gezeigt, dass der IE7 gar nicht auf das separate CSS anspringt, bzw nur dann, wenn es ihm grad so passt... o_O *Kopf an Wand schlag*
Na, wenns jetzt im IE6 auch noch geht, hab ichs endlich geschafft.
-
-
-
-
Hast du schon versucht, eine zweite CSS-Datei nur für IE7 zu machen?
Versucht nicht, ich denke es geht auch anders (Browserweichen)
Anderer Versuch: direkt nach der Doctype-Definition im Header (also ohne Leerschlag und nichts) <!--IE 7 quirks mode please--> einfügen. Das sollte den IE7 in einen ähnlichen Modus werfen wie den IE6.
Werde ich einmal versuchen, aber es muss einfach auch eine "normale" Lösung geben!
Also ich habe jetzt eine Möglichkeit gefunden du, die zumindest bei mir funktioniert und meine Anforderungen erfüllt. Funktioniert in aktuellstem FF, Opera, Safari, Netscape, Mozilla, IE6 und IE7 (ich will, dass meine Seite möglichst bei allen Browsern funktioniert und gleich aussieht).
Das Problem bei mir war bzw. ist, dass solang ich keine paddings angebe (Innenabstände der divs) passt es an sich. Sobald ich aber bei 'left, content, right' paddings angebe verzieht sich alles, auch wenn ich durch modifizieren der 'width' und den 'margins' diesem entgegenwirken will (was ja auch bei FF, IE6 u.a. funktioniert, ausser bei IE7 und Safari).
Ich habe jetzt kurzerhand 'dummy divs' gemacht (gleicher code wie beim ersten Posting, ich poste nur die Uterschiede):
<style type="text/css"> . . . /* MAIN */ .main{ padding-left:9em; padding-right:9em; } .left_dummy{ position:relative; float:left; width:9em; margin-left:-9em; } /*** IE6 Fix ***/ * html .left_dummy { left:9em; } .content_dummy{ position:relative; float:left; width:100%; } .right_dummy{ position:relative; float:left; width:9em; margin-right:-9em; } .left{ background:red; padding:1em 1em; } .content{ background:brown; padding:1em 2em; } .right{ background:yellow; text-align:right; padding:1em 1em; } . . . </style> . . . <div class="main"> <div class="left_dummy"> <div class="left"> left </div> </div> <div class="content_dummy"> <div class="content"> content </div> </div> <div class="right_dummy"> <div class="right"> right </div> </div> </div> . . . </html>Die 'dummy divs' sind quasi meine Platzhalter, mit denen definiere ich das Grundgerüst (keine padding Angaben). Als nächstes pflanze ich in diese 'dummy divs' die eigentlichen 'left, center, right' divs von vorher. Bei den eingepflanzten Divs kann ich paddings angeben, ohne dass mir der IE7 wieder herumspinnt.
Wahrscheinlich hattest du so eine Idee schon, aber vielleicht konnte ich anderen behilflich sein! ;)
MfG Emanuel
-