✔ Problem mit Zeilenumbruch..

Status
Nicht offen für weitere Antworten.
Hallo zusammen!

Jetzt muss ich das Thema leider nochmal hochholen :-(

1. Ich habe Darstellungsprobleme im IE5.5.
(Im Anhang: FF1.5, IE6, IE5.5)
Und zwar wird im IE5.5 rechts ein 'Streifen' nicht weiss, sondern in der Hintergrundfarbe (grau) dargestellt.
Weiss da jemand Rat?


2. Wenn ich dem Ganzen eine Mindesthöhe gebe (der gefettete Text, momentan auskommentiert) dann zerhaut es im IE das Layout..

Hier nochmal der Code:
Code: 
<!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>
<meta http-equiv="Content-Type" content="text/html" />
<link rel="stylesheet" href="template_css.css" type="text/css" />

</head> <!-- end of head -->

<body>

<div id="wrapper">
    <div id="header"></div> <!-- end of header -->
    
    <div id="middle_container">
        <div id="left" style="height:200px;">
            
        </div> <!-- end of left -->
        
        <div id="middle">
            
        </div> <!-- end of middle -->
        
        <div id="right">

        </div> <!-- end of right -->
        
        <div class="clear"></div>
    </div> <!-- end of middle_container -->
    
    <div id="footer">
        <a href="#">Kontakt</a> | <a href="#">Impressum</a>
    </div> <!-- end of footer -->
    
</div> <!-- end of wrapper -->

</body>
</html>
Code: 
body, html {
margin:0;
padding:0;
text-align:center;
background-color:#e1e1e2;
font-family:Arial,Helvetica,sans-serif;
}

td,tr,p,div {
font-family:Arial, Helvetica, sans-serif;
line-height:1.5em;
font-size:12px;
color:#363636;
}

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

#header {
width:918px;
border-left:6px solid #fff;
height:108px;
background-color:#e22630;
}

#middle_container { /* Wrapper für die mittlere Zeile, d.h. left+middle+right */
background-image:url(file://///Bs010/joomla/images/BG_middle_container.gif);
background-repeat:repeat-y;
height:1%;
}

#left { /* left = Menu, Suche, deutsch|english */
float:left;
width:176px;
border-top:12px solid #fff;
}

#middle { /* middle = Content */
/*min-height:530px; */
/*height:auto !important; */
/*height:530px;*/
margin: 0 196px 0 176px;
border-top:12px solid #fff;
border-left:12px solid #fff;
padding:46px 12px 20px 26px;
}

#right { /* right = Image-Ecke */
float:right;
width:229px;
}


#footer {
height:24px;
border-left:6px solid #fff;
border-right:12px solid #fff;
background-color:#fff;
padding:6px 0 0 707px; /* ANPASSEN!! */
color:#e22630;
}


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

Ich bin für jede Hilfe dankbar
 

Anhänge

  • 27352attachment.jpg
    27352attachment.jpg
    16,5 KB · Aufrufe: 24
  • 27353attachment.jpg
    27353attachment.jpg
    12,4 KB · Aufrufe: 23
  • 27354attachment.jpg
    27354attachment.jpg
    14 KB · Aufrufe: 23
Problem Nr.1: Ich vermute jetzt mal, daß es an der fehlenden Unterstützung des Boxmodells von Seiten des IE 5.5 liegt.

Problem Nr.2: Probier es mal mit diesem Stylesheet

Code: 
#middle_container { /* Wrapper für die mittlere Zeile, d.h. left+middle+right */
background-image:url(file://///Bs010/joomla/images/BG_middle_container.gif);
background-repeat:repeat-y;
min-height:530px;
height:auto !important;
height:530px;
}

#left { /* left = Menu, Suche, deutsch|english */
float:left;
width:176px;
border-top:12px solid #fff;
margin-right: 0 !important;
margin-right: -3px;
}

#middle { /* middle = Content */
min-height:530px;
height:auto !important;
height:530px;
margin: 0 196px 0 176px !important;
margin: 0 193px 0 173px;
border-top:12px solid #fff;
border-left:12px solid #fff;
padding:46px 12px 0px 26px;
}

#right { /* right = Image-Ecke */
float:right;
width:229px;
margin-left: 0 !important;
margin-left: -3px;
}
 
Achso, das heisst ich muss sowohl dem 'wrapper' #middle_container als auch dem darin liegenden #middle eine Mindesthöhe geben..!?
Noch eine Frage zu der 3-Pixel-nach links-Verschiebung für den IE: ist das der sog. 3-Pixel-Jog Bug?

Vielen Dank für Deine gschwinde Antwort! :)
 
Zur ersten Frage: Nein. Ich weiss gerade nicht, wieso ich im Eifer des Gefechts die Angaben für das DIV #middle_container überhaupt gesetzt habe. :-(

Zur zweiten Frage: Ja. Das ist ein Workaround, um den 3px-Bug im IE zu beheben :)
 
Ah okee, dann ists auch verständlich für mich ;)
Um aber nochmal auf meine 1. Frage zurückzukommen.. Dann heisst das - wenn ich diese Grundstruktur beibehalten möchte - dass ich mit der doofen Spalte im IE5.5 leben muss..!?
 
Hi,

damit sich auch dieses mal nichts ändert - die Hilfe im Duett.

Wie @michaelsinterface schon andeutete, ist die Spalte im IE 5.x eine Folge des Boxmodells. Abhilfe erreichst
Du zum Beispiel durch die Anpassung des Elements wrapper.
Code: 
#wrapper { /* Main Wrapper | gibt die Breite der Site vor */
margin:0px auto;
border-left:6px solid #fff;
border-right:12px solid #fff;
text-align:left;
width:936px;   /* IE 5.x*/
voice-family: "\"}\"";
voice-family: inherit;
width: 924px; /* Sonstige */
}i{}
Ciao
Quaese
 
@Quaese: Was hat's denn damit auf sich?

Code: 
#wrapper { /* Main Wrapper | gibt die Breite der Site vor */
margin:0px auto;
border-left:6px solid #fff;
border-right:12px solid #fff;
text-align:left;
width:936px;   /* IE 5.x*/
voice-family: "\"}\"";
voice-family: inherit;
width: 924px; /* Sonstige */
}i{}
 
Hey,
da fühlt man sich ja gleich wie daheim ;)
Danke an Euch beide mal zwischendurch!
Ich hätte da aber noch die ein oder andere Frage dazu:
Was hat das
Code: 
voice-family: "\"}\"";
voice-family: inherit;
zu bedeuten?
Selfhtml sagt mir, dass das zum Steuern der Sprechstimme bei der Sprachausgabe ist :confused:

Und zweitens möchte ich mich Michael anschließen, was hat das mit dem i{} auf sich?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück