zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Noch einmal floating

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.08.2004, 15:25
Professional
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.06.2004
Ort: Wuppertal
Beiträge: 269
SimonWpt befindet sich auf einem aufstrebenden Ast
Standard Noch einmal floating

Hallo zusammen,

wieso entsteht beim IE eine Abstand zwischen Menü und Content, Firefox & Opera dagegen machen alles richtig? Ich glaube, es liegt am floating, bin mir aber nicht sicher...


Ich finde einfach den Fehler nicht, es liegt nicht an fehlenden "padding:0"...

Danke


Bertram
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.08.2004, 16:38
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Das ist der 3-Pixel-Jog: http://www.positioniseverything.net/...reepxtest.html

Gruß
Thomas
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.08.2004, 18:58
Professional
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.06.2004
Ort: Wuppertal
Beiträge: 269
SimonWpt befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von toscho
Hallo Thomas,

danke für den Link. Aber entweder ich habe den Hack nicht richtig implementiert oder es ist nicht der 3-Pixel-Jog.

Code:
/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #content {
  height: 1%;
  margin-left: 0;
  }
 
/* End hide from IE5/mac */
Hack von positioniseverything:
http://www.positioniseverything.net/...html#haslayout

Code:
* html #content {height: 1%;} /* for IE/Win */
*>html #content {height: auto;} /* for IE5/Mac */
usw. Was übersehe ich?

Danke


Bertram
Mit Zitat antworten
  #4 (permalink)  
Alt 31.08.2004, 19:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Ich hab das auch schon mal probiert. Das hilft nur für diese Textverschiebung, die den Text dann immer weiter nach links schiebt und so einen unschönen Treppeneffekt hinterläßt.

Die eigentliche Lücke entsteht aber schon beim Container an sich. Und dagegen hilft die Angabe der Höhe irgendwie nicht. Am besten positionierst Du beide Container floatend, dann legen sie sich aneinander.
Mit Zitat antworten
  #5 (permalink)  
Alt 31.08.2004, 19:42
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von SimonWpt
Was übersehe ich?
Dasselbe wie ich vermutlich, denn ich sehe den Fehler auch nicht. Und zum Debuggen fehlt mir jetzt irgendwie die Zeit. Nimm mal Stück für Stück Teile aus dem Stylesheet und deinem Markup, bis nur noch der nackte Fehler übrig ist. Dann kann man sich das nochmal ansehen.
Oh, vielleicht der linke Abstand der <h1>?

Was anderes: Gib die Breite von Containern mit Textinhalt immer in »em« an! Die »Kooperationspartner« laufen bei mir in den benachbarten Text. Und den Hintergrund für die Linkliste würde ich dringend auf »no-repeat« setzen. Im Moment sehe ich da lauter Bildfragmente.

Gruß
Thomas

Geändert von toscho (24.01.2009 um 01:56 Uhr) Grund: toten Link entfernt
Mit Zitat antworten
  #6 (permalink)  
Alt 31.08.2004, 20:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Hallo Thomas,

ich hab mal eine ganz simple Testseite gebastelt. Extra im Quirksmode! (ist aber egal - macht keinen Unterschied). Ohne Text, nur zwei bunte Container. Und trotz explizit angegebener Höhe (hier 500px), entsteht eine Lücke von drei Pixeln in allen IEs. Im Opera oder Mozilla nicht.

Was macht man da? -> dagegen hab ich noch nix gefunden außer beide Container floaten lassen.

Hier der Code (wollte es auch hochladen, aber das klappte grad nicht.....):

Zitat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>IE-Floatbug</title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:red;
height:300px;
}
#zweiter {
margin-left:180px;
margin-right:200px;
background-color:blue;
height:500px;
}
</style>
</head>
<body>
<div id="left"> </div>
<div id="zweiter"> </div>
</body>
</html>
Mit Zitat antworten
  #7 (permalink)  
Alt 31.08.2004, 22:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Schaut Euch mal diesen CODE im IE an. Ich glaube nicht das dies der 3 Pixel-Bug ist.

Beachte im 2. Beispiel habe ich margin-left auf Null gesetzt, trotzdem der Abstand.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css">    
/*<![CDATA[*/ 

html,body   { 
   margin: 0; 
   padding: 0; 
   background-color: #FF9933; 
   color: #000000; 
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
   font-size: 100.01%; 
} 

.left { 
	float:left; 
	width:180px; 
	background-color:red; 
	height:20px; 
} 

#zweiter { 
	margin-left:180px; 
	margin-right:200px; 
	background-color:blue; 
	height:90px; 
}

#zweiter2 { 
	margin-left:180px; 
	margin-right:200px; 
	background-color:blue; 
	height:90px; 
}

div.ie-float-bug { 
   width: 100%; /*ie-float-bug*/ 
   margin: 0; 
   border: none; 
   padding: 0; 
   background-color: #FFFFFF; 
} 

* html #zweiter2 { 
	margin-left: 0; 
  } 
 
 .clear { 
   clear: both; 
   line-height: 0px; 
   font-size: 0px; 
   height: 0px; 
} 


/*]]>*/ 
</style> 


</head><body>

	<div class="ie-float-bug"> 
		<div class="left"> </div> 
		<div id="zweiter"> </div>
	</div> 
	<br class="clear" />
	
	

	
	<div class="ie-float-bug"> 
		<div class="left"> </div> 
		<div id="zweiter2"> Ich habe im IE margin-left: 0; </div> 
	</div> 
	<br class="clear" />

</body></html>
__________________
</ulle>
Mit Zitat antworten
  #8 (permalink)  
Alt 31.08.2004, 22:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ulle
Schaut Euch mal diesen CODE im IE an. Ich glaube nicht das dies der 3 Pixel-Bug ist.
Was soll das sonst sein?

Probier mal folgendes aus: Schieb mal das Browserfenster soweit zu, bis er zweite Container runterhüpft - im unteren Beispiel ist er dann ganz links -> klar.
Im oberen Beispiel ist dann der 3-pixel-Abstand weg und die Box schließt direkt an die andere an (halt darunter).
Genau das gleiche passiert ja mit dem Text, der schiebt sich dann um 3 pixel nach links.

Mach noch mal folgendes: gib keine Höhe an im ersten Beispiel und schreib statt dessen Text rein!
Dann passiert dies: Die blaue Box ist dann linksanliegend - nur der Text hat den 3px-jog - wenn das Menü zuende ist, rutscht dann eben der Text in der bekannten Manier nach links.

Wenn die Boxen verschiedene Farben oder Bilder haben und anliegen sollen dann funktioniert der Holly-Hack nicht. Der klappt nur, wenn die 3 pixel ansich eh nicht auffallen und man nur diese Textverschiebung beheben will.
Mit Zitat antworten
  #9 (permalink)  
Alt 31.08.2004, 23:48
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Es ist doch der 3-Pixel-Sprung! So funktioniert's:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>IE-Floatbug</title><style type="text/css">
#left {
        float:          left;
        width:          180px;
        background:     red;
        height:         300px;
}
#zweiter {
        margin-left:    180px;
        margin-right:   200px;
        background:     blue;
        height:         500px;
}
* html #left {
        /* \*/
        margin-right:   -3px;
        /* */
}
* html #zweiter {
        /* \*/
        margin-left:    177px;
        /* */
}</style>
<div id="left"> </div>
<div id="zweiter"> </div>
Wie man sieht, muß auch der Abstand der zweiten Box um drei Pixel »korrigiert« werden.
Was für ein Gewurstel wegen drei Pixeln!

Gruß
Thomas
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.09.2004, 10:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von toscho
Mach noch mal folgendes: gib keine Höhe an im ersten Beispiel und schreib statt dessen Text rein!
Das mit dem Text hatte ich ja probiert, nur habe ich die Höhenangabe nicht herausgenommen, deshalb war ich ein wenig verwirrt

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>xxxx</title> 

<style type="text/css">    
/*<![CDATA[*/ 

html,body   { 
   margin: 0; 
   padding: 0; 
   background-color: #FFCC33; 
   color: #000000; 
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
   font-size: 100.01%; 
} 

#left { 
   float:left; 
   width:180px; 
   background-color: #FF0000; 
   height:20px; 
} 

#zweiter { 
   margin-left: 20px; /* ACHTUNG */
   margin-right:300px; 
   background-color: #2299FF; 
  /* height:200px; */
} 

* html #left { 
	margin-right: -3px; 
  } 
  
* html #zweiter { 
	margin-left: 17px; 
  } 


/*]]>*/ 
</style> 


</head><body> 
	
	<div id="left"> </div> 
	<div id="zweiter">Der kurzeitige Besitzerwechsel der Domain ebay.de könnte eine Klagewelle von Verkäufern zur Folge haben, die in dieser Zeit Waren unter Wert verkaufen mussten, weil die Auktionsplattform nicht erreichbar war. </div> 

</body></html>
so geht es auch

Problem entsteht im IE wenn der 2. Container ein Höhe erhält
__________________
</ulle>
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
spezielles CSS floating Problem towerlexa CSS 7 06.03.2013 08:52
Grundsatzdiskussion: Floating Layouts renet CSS 3 13.12.2012 17:24
Wiedermal floating mcdaniels CSS 7 16.05.2011 21:08
floating überlappt sich Luke_Skyscraper CSS 7 14.09.2006 08:05
floating Problematik bei verschachtelten div's bensen CSS 2 29.05.2005 17:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:11 Uhr.