✔ border left/right im IE...

Status
Nicht offen für weitere Antworten.
H

herrgarnele

Erfahrenes Mitglied
Mahlzeit zusammen! :)

Ich bin gerade dabei ein Grundlayout umzusetzen, unter das dann ein Joomla-CMS gepackt wird.
Da das ganze ziemlich mächtig wird, sollte die grundsätzliche Formatierung von vorneherein stimmen! ;)

Der Übersichtlichkeit halber habe ich den Code arg zusammengekürzt und stilisiert:

HTML: 
<body>

<div id="wrapper">
    <div id="header"></div> <!-- end of header -->
    
    <div id="middle_container">
        <div id="left">
            left
            <br  /><br  /><br  /><br  /><br  /><br  />
        </div> <!-- end of left -->
        
        <div id="middle">
            middle
            <br  /><br  /><br  /><br  /><br  /><br  />
        </div> <!-- end of middle -->
        
        <div id="right">
            right
            <br  /><br  /><br  /><br  /><br  /><br  />
        </div> <!-- end of right -->
        <div class="clear"></div>
    </div> <!-- end of middle_container -->
    
    <div id="footer">
        footer <br  /><br  /><br  /><br  /><br  /><br  />
    </div> <!-- end of footer -->
</div> <!-- end of wrapper -->

</body>
HTML: 
/* ---------- general template settings ---------- */

body, html {
margin:0;
background-color:#e1e1e2;
text-color:#363636;
text-align:center;
}

#wrapper { /* Main Wrapper | gibt die Breite der Site vor */
width:918px;
margin:0px auto;
border-left:12px solid #fff;
border-right:12px solid #fff;
background-color:#fff;
text-align:left;
}

#header {
width:918px; /* GRÖSSEN ABCHECKEN */
height:108px; /* GRÖSSEN ABCHECKEN */
background-color:#e22630;
}

#middle_container { /* Wrapper für die mittlere Zeile, d.h. left+middle+right */
background-color:#c3c2c4;
}

#left { /* left = Menu, Suche, deutsch|english */
float:left;
width:170px; /* GRÖSSEN ABCHECKEN */
border-top:12px solid #fff;
background-color:#00ff00;
}

#middle { /* middle = Content */
float:left;
width:519px; /* GRÖSSEN ABCHECKEN */
border-top:12px solid #fff;
background-color:#ffff00;
}

#right { /* right = Image-Ecke */
float:right;
width:229px; /* GRÖSSEN ABCHECKEN */
background-color:#ff0000;
}


#footer {
border-top:12px solid #fff;
height:20px;
background-color:#fff;
}


.clear { /* Hebt floating auf */
clear:both;
line-height:1px;
}

Das Problem liegt nun darin, links und rechts einen weissen Rahmen von 12px um das layout zu legen.
Im Firefox wird das ganze vermeintlich richtig dargestellt; im IE dagegen zerhaut es mir das Layout:
es scheint als interpretiere er die border-left und border-right-Angaben im #wrapper falsch..?!

Ich hoffe Ihr könnt mir helfen!!


// EDIT: Wenn ich den Wrappen um 24px breiter mache, ihm dafür links und rechts 12px padding gebe, zerhaut es mir ebenfalls das Layout; diesmal sogar im FF..
Ich befürchte ich habe hier einen grundsätzlichen Denkfehler drin!?
 
Zuletzt bearbeitet:
Darf man fragen, welchen Doctype du für das Dokument gewählt hast?

Könnte nämlich sein, daß der IE in den Quirksmodus versetzt wird und daher das Boxmodell falsch interpretiert.
 
Hoppla, da warst Du schneller ;)

Klar, momentan habe ich als Doctype drin:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Liegt hier der Hund begraben?
 
Nein, am Doctype liegt's schon mal nicht ;)

Ich kann da aber auch keinen Unterschied bzgl. des linken und rechten Rahmens zwischen Firefox 2.0 und IE 6.0 entdecken. :confused:
 
:confused: Dammit, das gibt's doch nicht..

Ich wollte eigentlich nicht den gesamten Code posten, da ich befürchte, dass das alles ziemlich fies unübersichtlich ist.. :-(

Naja, hilft nichts..
Die css ist genau dieselbe, nur die html-Template wurde (von meinem Kollegen) um einige Zeilen Joomla-Code erweitert. Aber das kann doch eigentlich nicht sein, dass dadurch ein Unterschied im Layout passiert

HTML: 
<!-- joomla header - nicht verändern -->
<?php

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );

$iso = split( '=', _ISO );

echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <?php if ( $my->id ) initEditor(); ?>

    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

    <?php mosShowHead(); ?>

   <?php echo "<meta name=\"author\" content=\"www.blue-silver.de\" />" ?>

   <?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?>

   <?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
<!-- end of joomla header -->
  </head>

<!-- template divs -->
<body>

<div id="wrapper">
    <div id="header"></div> <!-- end of header -->
    
    <div id="middle_container">
        <div id="left">
            <br  /><br  /><br  /><br  /><br  /><br  />
        </div> <!-- end of left -->
        
        <div id="middle">
            <br  /><br  /><br  /><br  /><br  /><br  />
        </div> <!-- end of middle -->
        
        <div id="right">
            <br  /><br  /><br  /><br  /><br  /><br  />
        </div> <!-- end of right -->
        <div class="clear"></div>
    </div> <!-- end of middle_container -->
    
    <div id="footer"> <br  /><br  /><br  /><br  /><br  /><br  /> </div> <!-- end of footer -->
</div> <!-- end of wrapper -->
<!-- end of template divs -->

</body>
</html>
Ich hab mal 2 Screenshots angefügt:
IE 6.0 vs FF 1.5.0.8
 

Anhänge

  • 27160attachment.jpg
    27160attachment.jpg
    5,4 KB · Aufrufe: 7
  • 27161attachment.jpg
    27161attachment.jpg
    5,5 KB · Aufrufe: 6
Es war schon gut, den kompletten Quellcode zu posten, denn nun ist der Übeltäter überführt.

Der IE wird, wie von mir vermutet, in den Quirksmodus versetzt, und zwar durch den HTML-Kommentar vor dem PHP-Code bzw. der Dokument-Deklaration ;)

Und noch ein Tipp, damit im IE der graue Hintergrund vom DIV #middle_container unter der linken und mittleren Spalte nicht sichtbar ist:

Code: 
#middle_container { /* Wrapper für die mittlere Zeile, d.h. left+middle+right */
background-color:#c3c2c4;
height:1%;
}

.clear { /* Hebt floating auf */
clear:both;
font-size:1px;
line-height:0;
height:0;
}
 
Hallo zurück,

erstmal Danke für Deine promten Antworten!

Du meinst den Kommentar
HTML: 
<!-- joomla header - nicht verändern -->
?
Wenn ich diesen rauslösche besteht das Problem im IE weiterhin :(

Oder meinst Du was Anderes?



//EDIT: Ich hab mich mal im Web schlaugemacht was Quirksmodus und Doctype Declaration angeht. Wenn ich das richtig verstanden habe dann prüft der IE lediglich die erste Zeile des html-Docs nach einer Doctype Declaration. Findet er dort keine, switcht er in den Quirks-Modus. Der Firefox hingegen durchsucht das gesamte html-Dokument nach der Doctype Declaration.
Hab ich das so richtig verstanden?

Jedenfalls habe ich die Doctype Declaration in die erste Zeile des html gestellt, noch vor die xml-Version- und siehe da.. Es klappt!!
 
Zuletzt bearbeitet:
Ja, ich meinte den HTML-Kommentar und hatte dabei die XML-Deklaration im PHP-Code übersehen, die den gleichen Effekt im IE bewirkt -> er switcht in den Quirksmodus. Sorry! :-(
 
Nee,
gar kein Grund für ne Entschuldigung.. Hilfe zur Selbsthilfe ist doch das Beste was Du machen kannst!
Viielen Dank dafür- Du hast mir ne Menge Nerven gespart.. Dank Dir leb ich sicher ein paar Tage länger ;)

PS.: Danke auch für Deinen Tipp für den #middle_container, das wäre mit Sicherheit ziemlich bald wieder hier aufgetaucht! :-)

Insofern.. Danke nochmal - garnele glücklich, Thread zu!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück