zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Design Float IE6 Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.09.2008, 16:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2008
Beiträge: 10
koknarr befindet sich auf einem aufstrebenden Ast
Standard Design Float IE6 Problem

Hallo

Ich hab ein kleines Problem bei meinem Design mit dem IE6, in FF3 und IE7 tritt das Problem nicht auf (welch ein Wunder).

Im Maincontent hab ich ein 3 Spalten Layout verschachtelt, nur für die Background pictures, im IE6 verschiebt sich der Container ganz links, und ich hab keine Ahnung warum.

Am besten seht selbst auf : Soul-Side Männedorf mit dem IE6 und mit z.B. Firefox.

Hier der HTML Code:
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"
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="kokson">

	<title>Soul-Side Männedorf</title>
	
	<!--[if lte IE 6]>

		<style type="text/css">

			#content { height: 500px;}
			#content_middle {height: 500px;}

		</style>

	<![endif]-->

    <link rel="stylesheet" type="text/css" href="style.css">
</head>


<body>
    <div id="maincontainer">
       	<div id="header"></div>
       	<div id="navi"></div>
       	<div id="content">
			<div id="content_left">
			    <div id="content_left_inner"></div>
	    		<div id="content_right">
	      			<div id="content_middle">
						<div id="maincontent-left"></div>
					   	<div id="maincontent-right">
					   	    <!--<div id="ruler"></div>
							<div class="box">
							    <div><div><div><div><div><div><div>
						       	<div class="inhalt">
							    </div>
							    </div></div></div></div></div></div></div>
							</div>  -->
						   
					    </div>
					   	<div class="nofloat"></div>
					</div>
	      			<div id="content_right_inner"></div>
				</div>
				<div class="nofloat"></div>
			</div>
		</div> 
	   	<div id="footer"></div>
	</div>
 
</body>
</html>
Und hier das CSS File:

Code:
/* Hauptdesign */

body {
	font-family: Helvetica, sans-serif, Arial;
	text-align:center;
	padding:0;
	margin:0;
	background-image: url(pictures/background.png);
	background-repeat: repeat-x;
}

#maincontainer {
	text-align:left;
    margin:0 auto 0 auto;
    width: 859px;

}

#header {
	width: 859px;
	height: 218px;
	background-image: url(pictures/Header.png);
}

#navi {
	width: 859px;
	height: 19px;
	background-image:  url(pictures/navi.png);
}

#content {
    width: 859px;
    min-height: 500px;
	background-image: url(pictures/back_content.png);
	background-repeat: repeat-y;	
}

#content_left {	
	background-image: url(pictures/verlauf_left.png);
	background-repeat: no-repeat;		
}

#content_left_inner {
	width: 33px;
	float:left;
}

#content_middle {
	/*padding: 10px 10px 10px 10px;*/
	min-height: 500px;
}

#content_right {
	width: 826px;
	float: right;
	background-image: url(pictures/verlauf_right.png);
	background-position: right top;
	background-repeat: no-repeat;
}

#content_right_inner {
	width: 26px;
	float:right;
}

#maincontent-left {
	width: 200px;
	float: left;
}

#maincontent-right {
	width: 600px;
	margin-left: 200px;
}


#footer {
	width: 859px;
	height: 27px;
	background-image: url(pictures/footer.png);			
}

#ruler {
	width: 570px;
	height: 3px;
	background-image:  url(pictures/header_line.png);
}

/* Content Box */
div.box {background:url(pictures/box_left.png) repeat-y; background-color: white; width: 570px;}
div.box div {background:url(pictures/box_right.png) right repeat-y;}
div.box div div {background:url(pictures/box_top.png) repeat-x;}
div.box div div div {background:url(pictures/box_bottom.png) bottom repeat-x;}
div.box div div div div {background:url(pictures/box_top_left.png) left top no-repeat;}
div.box div div div div div {background:url(pictures/box_top_right.png) right top no-repeat;}
div.box div div div div div div {background:url(pictures/box_bottom_left.png) left bottom no-repeat;}
div.box div div div div div div div {background:url(pictures/box_bottom_right.png) right bottom no-repeat;}

div.inhalt {
	padding: 10px 10px 10px 10px;
	min-height:100px;
} 

/* Hilfs zeugs */
.nofloat {
	overflow: hidden;
	clear: both;

	height: 1px;
	margin: -1px 0 0 0;
	font-size: 1px;
}
Kennt jemand das Problem und die Lösung?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.09.2008, 16:44
Benutzer
neuer user
 
Registriert seit: 23.07.2008
Ort: Idstein
Beiträge: 82
Basti82 befindet sich auf einem aufstrebenden Ast
Standard

schreib alles auf "float:left" und "display: inline" dann alle drei container eine feste breite geben!
dann sollte es klappen!


Code:
<div id="content">
<div style="float:left; display: inline; width: 200px;">test1</div>
<div style="float:left; display: inline; width: 200px;">test2</div>
<div style="float:left; display: inline; width: 200px;">test3</div>
</div>

Geändert von Basti82 (05.09.2008 um 16:49 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.09.2008, 16:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2008
Beiträge: 10
koknarr befindet sich auf einem aufstrebenden Ast
Standard

Die Container sind ineinander verschachtelt damit sich links und rechts mit dem content vergrössern...
Mit Zitat antworten
  #4 (permalink)  
Alt 05.09.2008, 17:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Bei meinem Test hat hasLayout für #content_left den Fehler behoben.

Was genau hat dich dazu gebracht, <?xml version="1.0" ?> in die erste Zeile deines Codes zu schreiben?
edit: Ach, in deinem Code hier im Forum warst du noch bei XHTML. Jetzt, wo du HTML schreibst, muss das auf jeden Fall weg.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.09.2008, 17:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2008
Beiträge: 10
koknarr befindet sich auf einem aufstrebenden Ast
Standard

Vielen dank, das hat das Problem gelöst!

edit: Kann es sein das ein div container im IE 6 eine Midesthöhe hat?

Geändert von koknarr (05.09.2008 um 17:27 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 05.09.2008, 17:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von koknarr Beitrag anzeigen
edit: Kann es sein das ein div container im IE 6 eine Midesthöhe hat?
Da IE 6 kein min-height kennt, kann er auch keine haben. Aber vermutlich meinst du etwas völlig anderes. Bitte Frage präzisieren, am besten am Beispiel zeigen, was du meinst.

Du hast immernoch die xml-Deklaration im Code (sieh da, jetzt ist es wieder XHTML...). Das einzige, was du damit erreichst, ist den IE 6 in den Quirksmodus zu werfen. Ich glaube nicht, dass du das wirklich willst.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.09.2008, 17:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2008
Beiträge: 10
koknarr befindet sich auf einem aufstrebenden Ast
Standard

Es ist nun raus..

Ich meine damit, ich habe ne trennlinie als Grafik, die pack ich in ein div als Hintergrund, und dimensioner das div so gross wie die Grafik, IE6 macht da was komisches...

Siehe die Linie unter der Box...
Mit Zitat antworten
  #8 (permalink)  
Alt 05.09.2008, 17:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ja, IE 6 dehnt Element auf, bis Text hineinpassen würde.

Aber jetzt hör erstmal auf, mit leeren Divs um dich zu werfen.
Wenn du eine grafische Box mit fester Breite willst genügen maximal drei Hintergrundbilder. Du musst nicht in links-rechts-mitte zerschnipseln. Und lass doch die obere und untere Linie an der Boxgrafik dran.

edit: Jetzt hast du also inline-block genutzt, um hasLayout für IE zu erhalten. Dann lass das aber auch nur den IE sehen! Du hast doch schon einen CC.

Geändert von fricca (05.09.2008 um 17:58 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 05.09.2008, 18:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.09.2008
Beiträge: 10
koknarr befindet sich auf einem aufstrebenden Ast
Standard

Die Linie gehört nicht zur Box, die ist freistehend.

Wie ich die grafische Box mit weniger Bildern hinkriege weiss ich leider nicht,
bin ziemlicher Anfänger mit XHTML und CSS, das ist ein Beispiel das ich kopiert
habe, die Box brauch ich auch noch auf anderen Seiten, wo sie dann auch unterschiedliche Dimensionen aufweist.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.09.2008, 18:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Die Linie gehört nicht zur Box, die ist freistehend.
Tritt die Linie wirklich auch ohne die Box auf?

Zitat:
Wie ich die grafische Box mit weniger Bildern hinkriege weiss ich leider nicht
Google: "Runde und andere Ecken".
Das ergibt dann eine vollflexible Box mit "nur" vier statt deiner 9 Divs.

PNG-24 brauchst du nicht für deine Box. Nimm Gif oder PNG-8, das ergibt bestimmt kleinere Dateien.

Beachte auch das Edit in meinem vorigen Beitrag.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit CSS relative, absolute & float FrageHabe CSS 3 13.08.2010 15:40
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 15:30
IE6 zerschiesst das Design scupidu CSS 2 15.01.2010 19:39
IE6 Und IE7 Problem bei Float Piet CSS 12 12.11.2009 13:22
IE zeigt gewisse Texte nicht an zitronenbaum CSS 2 16.01.2008 16:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:43 Uhr.