Divs werden unter dem Wrapper geordnet : IE

**beaT360** · 26.08.2009 11:26

Hallo zusammen!

Seit zwei Stunden forste ich mich durch die Suchfunktion leider ohne Erfolg.

Meine erste Internetseite hab ich programmiert und stoße auf ein Positionierungsproblem im IE. Alle Div's werden unter dem Wrapper geschoben. Erst hab ich gedacht, dass es ein Problem der Größe sei und hab die width erweitert. Aber ohne Erfolg....

Kann mir jemand weiterhelfen?

HTML-Code:

<?xml version="1.0" ?>
<!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=UTF-8" />
<title>Fabian Plentz | Motorsport und Trainer	</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="styles_gallery.css" />
	<style type="text/css">
html {
     margin:0;
     padding:0;
     height:100%;
}

body {
	background-color: #FFF;
	height:100%;
	width:1024px;
	background-color: #7aaed1;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 11px;
        margin-top:0;
        margin:0;
        padding:0;
}

#wrapper {
	width:1010px;
        height:800px;
        margin:60px;
        margin-top:0;
        background-color:#FFF;
        background: url(pictures/wrapper.jpg) repeat-y #FFF;
}

#sidebar {
	height:800px;
	width:20px;
	background-color:#FFF;
	float:left;
	top:0;
	left:0;
        border-left: 1px solid #5c4d43;

}

#header {
	height:165px;
        width:983px;
	background-image: url(pictures/header.jpg);
	background-repeat: no-repeat;
	position:relative;
	top:0;
        color:#FFF;
}

#background {
	height:600px;
        width:535px;
	background:url(pictures/content/background.jpg) no-repeat;
	float:left;
	position:relative;
        top:0;
        left:0;

}

#shadow {
        height:800px;
        width:27px;
        background: url(pictures/shadow.jpg) repeat-y;
        float:right;
        top:0;

}

#sideright {
        height:603px;
        width:427px;
        background:url(pictures/side_right.jpg) no-repeat;
        float:left;
        position:relative;
        top:0;
        color:#FFF;
}

	</style>
</head>

<body>
	
<div id="wrapper">

 	<div id="shadow">
    </div>
     
	<div id="sidebar">
    </div>

  
    <div id="header">
	</div>
    
    <div id="background">
    	<h1>News</h1><br />
        <h2>VLN Lauf für Live-Strip</h2>
        <p>Fabian wird auch am nächsten VLN Lauf auf dem Nürburgring am <strong>29.08.2009</strong> wieder für <strong>Life-Strip-Racing</strong> an den Start gehen. 
Jedoch wird Fabian nun nicht mehr mit Ulli Neuser und Dr. Nicky Nufer auf dem M3 Compact fahren. Er darf dort erstmalig im wieder neu aufgebauten <strong>E46 330i</strong> Platz nehmen.</p><a href="http://www.live-strip-racing.de/"> <img src="pictures/news/bmw_330i_m.jpg" border="2px #7aaad0 solid"align="right" /> </a>

<p><strong>„Ich freue mich schon jetzt riesig, dass ich diese Möglichkeit bekommen habe. Das Auto ist im Vergleich zum E36 noch ein ganzes Stück „mehr Rennwagen“. Ich bin sehr zuversichtlich, dass es ein großer Erfolg wird!!“</strong></p>

<p>Das Fahrzeug wurde im Detail noch etwas optimiert im Vergleich zum vorigen 330i.

Somit dürfen wir gespannt sein, wie es am 29.08.2009 für Fabian und Live-Strip-Racing laufen wird.</p><br /><br />
<img src="pictures/border.jpg" align="middle"/>

		<h2>Terminkalender 2009</h2><br />
        <ul>
        	<strong>04.04.2009</strong> - 56. ADAC Westfalenfahrt (1. VLN Lauf)<br />
            <strong>18.04.2009</strong>	- 34. DMV 4 Stunden Rennen ( 2. VLN Lauf)<br />
            <strong>23./24.05.2009</strong>	- ADAC 24h Rennen am Nürburgring<br /> 
            <strong>27.06.2009</strong>	- 49. ADAC Reinoldus-Langstreckenrennen ( 5. VLN Lauf)<br />
            <strong>29.08.2009</strong>	- 32. RCM DMV Grenzlandrennen (7. VLN Lauf)<br />
            <strong>03.10.2009</strong>	- 41. ADAC Barbarossapreis (8. VLN Lauf)<br />
            <strong>17.10.2009</strong>	- 33. DMV 250-Meilen-Rennen (9. VLN Lauf)<br />
            <strong>31.10.2009</strong>	- 34. DMV Münsterlandpokal (10. VLN Lauf)<br />

        </ul>

        	
    </div>
	    
	<div id="sideright">
    	<ul id="menu">
           <li id="menu1" class="active">
           <a href="index.html"></a>
           </li>
           <li id="menu0" class="active">
           <a href="news.html"></a>
           </li>
           <li id="menu2" class="active">
           <a href="events.html"></a>
           </li>
           <li id="menu3" class="active">
           <a href="results.html"></a>
           </li>
           <li id="menu4" class="active">
           <a href="career.html"></a>
           </li>
           <li id="menu5" class="active">
           <a href="sponsors.html"></a>
           </li>
           <li id="menu6" class="active">
           <a href="job.html"></a>
           </li>
           <li id="menu7" class="active">
           <a href="media.html"></a>
           </li>
        </ul>
           <ul id="contact_b">
           <li id="contact_b" class="active">
           <a href="contact.html">Kontakt</a>
           </li>
           <li id="contact_b" class="active">
           <a href="impressum.html">Impressum</a>
           </li>
      </ul>
    </div>
</div>
</body>
</html>

Warscheinlich ist mein Code sehr fehlerhaft. (sonst wäre die Darstellung ja richtig) Bitte seht mir das nach und verhaut mich nicht gleich!

Vielen Dank für eure Mühe

Jan

**th2409** · 26.08.2009 11:45

Ohne dass ich jetzt mehr als 1 min geguckt habe... aber Dein #wrapper wird zu breit. Der hat 1010px und braucht noch 2x 60px margin... So kann er nicht vernünftig in den body reinpassen, der nur 1024px breit ist.

**beaT360** · 26.08.2009 11:51

Sehr schön! Also das hab ich korrigiert und den body erweitert und die wrapper height auf 100% gesetzt.

**jayjay** · 26.08.2009 12:04

hallo, du solltest mal ganz genau über den code schauen, es gibt was doppelt (<meta http-equiv="content-type") und einiges äähm etwas überflüssig, zb

HTML-Code:

<li id="menu6" class="active">

mal was anderes, warum setzt du body in 1024 breite?

**beaT360** · 26.08.2009 12:13

Danke Jayjay! Die Fehler habe ich rausgenommen. Meta.. ganz gelöscht. Wieso ist das überflüssig bei der li?

Wie sollte ich denn die breite festlegen für den body?

**jayjay** · 26.08.2009 12:26

zu deiner navi, es ist schon richtig dass du es als liste definierst, aber du kannst bestimmt einiges dabei etwas "globaler" einrichten, es heisst doch schon: <ul id="menu"> so gesehen kannst du evtl sowas testen:

HTML-Code:

#sideright{

}
#menu ul {
}
#menu li {
}
#menu a {
}
#menu a:hover {
}

und dann

HTML-Code:

	<div id="sideright">
    	<ul id="menu">
           <li><a href="index.html"></a></li>
           <li><a href="news.html"></a></li>

habe das active mal rausgenommen, ich weiss nicht ob es eine spezielle funktion hatte wenn doch dann kann das mit #menu ... mitdefiniert werden.

im head verknüpfst du eine css datei, darunter listest du styles auf... muss so auch nicht sein

zum body: warum überhaupt body eine breite geben?
du hast doch einen festen wrapper dadrin, zwar etwas breit aber drin.

gibts nen link dazu?

**beaT360** · 26.08.2009 12:34

Ich versteh vollkommen was du meinst. Aber ich hab in der LI menu1,menu2... weil es verschiedene Bilder sind, die ich bei dem jeweiligen Menüpunkt nutze. Die habe ich im CSS definiert. (konntest du ja nicht wissen)
Und die CSS Verlinkung ist darin, weil es eine seperate CSS Datei auf dem Server gibt. nur für das Forum habe ich die CSS Befehle in den Code eingefügt habe, damit es übersichtlicher für euch ist.

Link: http://www.fabian-plentz.de

Im Mozilla und Safari ist die Positionierung so wie es sein soll....

MfG

**hero-master** · 26.08.2009 14:40

Moin Jan

Im IE8 sieht es übrigens wieder gut aus, nur im 7er und drunter ist es Banane.
Gründe? Gibts ne Menge.
Durch Fehler im Code? Nö, der IE interpretiert das alles sehr gerne anders.
Fehleranalyse? Schwer auszumachen, jedoch hast du viele unnötige Dinge definiert.

Zunächst solltest du die vordefinierten Eigenschaften löschen. Wie? CSS-Reset. Zumeist reicht das hier aus:

Code:

* {
margin: 0;
padding: 0;
border: none
}

Dann ist die Breitenangabe für den body-Tag nicht sinnvoll, wenn sie in Pixeln angegeben sind. Ich habe eine geringere Auflsöung und somit immer einen horizontalen Scrollbalken auf der Seite. Der stört.

Schau dir einmal das CSS-Boxmodell an.
Schau dir auch mal den Zweck und Sinn von position:relative an, mit dem Hauptaugenmerk auf "Es wird der Platz freigehalten".

Wer floatet, muss auch clearen. Dazu gibt es mehrere Methoden

Wenn du dich an diese grundlegenden Dingen hälst und du sparsam mit Abständen, etc umgehst, wirst du wenig Probleme im IE haben

**sejuma** · 27.08.2009 07:36

Beim IE bis Version 7 könnte es auch sein, dass diese erste Zeile den IE in den Quirksmode schickt und er deshalb das CSS-Boxmodell nicht korrekt anzeigt.
Lösche das mal probehalber:

Code:

<?xml version="1.0" ?>

Ferner: Deine ganzen relativen Positionierungen sind unnötig. Das kannst du alles über float und margin lösen.

Auch sowas macht keinen Sinn:

Code:

#sidebar {
	height:800px;
	width:20px;
	background-color:#FFF;
	float:left;
	top:0;
	left:0;
        border-left: 1px solid #5c4d43;

}

Besser und abgespeckt:

Code:

#sidebar {
	height:800px;
	width:20px;
	background-color:#FFF;
	float:left;
	border-left: 1px solid #5c4d43;

}

**beaT360** · 27.08.2009 08:56

Danke für die vielen und schnellen Ansätze! Werde mich da gleich mal ransetzen und anfangen zu testn.

**hero-master** · 27.08.2009 13:31

Zitat von sejuma

Beim IE bis Version 7 könnte es auch sein, dass diese erste Zeile den IE in den Quirksmode schickt und er deshalb das CSS-Boxmodell nicht korrekt anzeigt.

Das gibbet ab 7 nicht mehr

Du kannst ihn zwar immer noch in den Quirksmodus schicken, aber nicht mehr durch den xml-Prolog.

**beaT360** · 15.09.2009 12:11

Hallo Leute!

Ich bin mal wieder bei meinem Problem... Also ich hab mich ran gesetzt und will den Code nochmal schreiben. Leider komme ich hier nicht weiter:

http://www.custom-arts.de/plentz

Das Menü mit samt dem Hintergrundbild soll auf die rechte Seite neben der Slideshow. Aber mit margin/padding oder float tut sich nix.

Code:

* {
margin: 0;
padding: 0;
border: none
}

#html {
	height:100%;
}

body {
	height:100%;
	background:#7aaed1;
	margin-top:0;
}

#wrapper{
	height:100%;
	width:1000px;
	border-left:1px solid #5c4d43;
	background: url(pictures/wrapper.jpg) repeat-y #FFF;
	margin:auto;
}

#header {
	width:981px;
	height:165px;
	margin-top:0;
	background:url(pictures/header.jpg) no-repeat #FFF;
}

#slideshowwrapper {
	width:535px;
	height:298px;
	background:url(pictures/slideshow_wrapper.jpg) no-repeat #FFF; 
	margin-left:20px;
}

#slideshow {
	width:492px;
	height:277px;
	margin-left:20px;
	padding-top:11px;
}

#sideright {
	width:437px;
	height:603px;
	background:url(pictures/side_right.jpg) no-repeat #FFF;
}

Gibts da einen Trick17?

Dank und Gruß

Jan

zur Startseite vom TP

Thema: Divs werden unter dem Wrapper geordnet : IE

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Divs werden unter dem Wrapper geordnet : IE

Ähnliche Themen

Versteckte DIVs werden beim Scrollen im Firefox angezeigt

IMG-Shadow Text soll unter dem Bildpositioniert werden

auzählungszeichen werden unter IE nicht angezeigt FF schon

Alphabetisch geordnet

Aktive Benutzer

Aktive Benutzer