✔ IE und Div Positionierung

Status
Nicht offen für weitere Antworten.
max

max

Erfahrenes Mitglied
Bin gerade dabei ein Design mit Div's zu erstellen (Link). Nun hab ich folgendes Problem ich hab eine Sidebar element welches im Firefox richtig dargestellt wird (neben Content Element) aber im IE wird es unter dem Content Element angezeigt.

Ich hab schon mehrere Sachen durchprobiert und auch hier schon gesucht, bin aber nicht wirklich weit gekommen.

Div's sind so aufgeteilt:
div_aufteilung.gif


CSS:
Code: 
     /* Container Klassen */
     .header {
     	position: relative;
     	width: 893px;
     	height: 146px;
     	margin-top: 10px;
     	margin-left: 10px;
     	background: #ffffff
     				url(../img/head.gif) 0 0
     				no-repeat;
     } i{}
     
     .main {
     	width: 799px;
     	min-height: 500px;
     	margin-left: 102px;
     	border-left: 1px solid #cccccc;
     	border-right: 1px solid #cccccc;
     	text-align: left;
     }
     
     .content {
     	position: relative;
     	width: 579px;
     	margin: 0;
     	padding-top: 10px;
     	padding-bottom: 10px;
     	padding-left: 10px;
     	padding-right: 20px;
     	float: left;
     	/*border-left: 1px solid #cccccc;
     	border-right: 1px solid #cccccc;*/
     } i{}
     
     .sidebar {
     	width: 200px;
     	margin-left: 599px;
     	padding-top: 10px;
     }
     
     .footer {
     	position: relative;
     	width: 789px;
     	margin-left: 102px;
     	padding-left: 10px;
     	border: 1px solid #cccccc;
     	background-color: #cccccc;
     	font-size: 9px;
     } i{}
     
     /* Text Formatierung */
 h1 {font-size: 12px; color: #ff9900; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: -1px;}
     h2 {font-size: 10px; color: #336699; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;}
     h3 {font-size: 10px; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold;}
     p {font-size: 10px; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif;}
     pre {font-size: 9px; color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif;}

HTML:
HTML: 
 <!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; charset=iso-8859-1" />
     <title>Crazy Orange</title>
     <style type="text/css" media="all">
     		@import "css/style.css";
     </style>
     </head>
     
     <body>
     <div class="header"></div>
     <div class="main">
     <div class="content">
     <h1>Willkommen im Crazy Orange</h1>
     <h2>Der IN-Bar in BlaBla</h2>
     <h3>H3 &Uuml;berschrift</h3>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue </p>
 </div><div class="sidebar"><h1>Heute im Crazy Orange:</h1><br /><img src="img/cocktail_night.jpg" alt="Cocktail Night" /></div>
     </div>
     <div class="footer"><pre>(c) 2004 Crazy Orange, Design by coffee_works</pre></div>
     </body>
     </html>

Und hier nochmal der Link zur Seite.

mfg
max
 
Hi,

das Problem ist der sogenannte Box-Model-Bug des Internet Explorers.

Durch ihn wird die Gesamtbreite eines Elements mit padding-Angaben anders berechnet
als in Nicht-IE-Browsern. Um das zu umgehen, könntest Du zum Beispiel DIV-Tags mit
margin-Angaben verwenden, die den Abstand zum übergeordneten Element realisieren.

Deine CSS-Deklarationen müssten um zwei CSS-Klassen erweitert werden. Weiterhin
müssen die Klassen für den Content und die Sidebar angepasst werden.
Code: 
.content { position: relative;
           width: 579px;
           margin: 0;
           float: left;
           /*border-left: 1px solid #cccccc;
           border-right: 1px solid #cccccc;*/
} i{}

.sidebar { width: 200px;
           margin-left: 589px;
}    

 .contentPadding{ margin: 10px 20px 10px 10px;}
.sidebarPadding{ margin: 10px 0 0 0;}
Der zugehörige HTML-Code im main-Container könnte wie nachstehend aussehen:
HTML: 
<div class="main">
    <div class="content">
        <div class="contentPadding">  <!-- Innenabstand zum content-Div -->
            <h1>Willkommen im Crazy Orange</h1>
            <h2>Der IN-Bar in BlaBla</h2>
            <h3>H3 &Uuml;berschrift</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
                ...
            </p>
        </div>
    </div>
    <div class="sidebar">
        <div class="sidebarPadding">  <!-- Innenabstand zum sidebar-Div -->
            <h1>Heute im Crazy Orange:</h1><br />
            <img src="img/cocktail_night.jpg" alt="Cocktail Night" />
        </div>
    </div>
</div>
Ich hoffe, dass Dir das weiterhilft.

Ciao
Quaese
 
mit
display:inline;
float:right;
für das Sidebarding könnte das auch funktionieren.
Dann muss es aber vor das content-div
Ich lasse lieber die "weniger wichtigen" floaten.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück