Fehler im Code oder Browser-Bug?

pixel24 · #1 (**permalink**) 16.10.2009, 17:15

Hallo zusammen,

mit folgendem Code:

HTML-Code:

<?xml version="1.0" encoding="utf-8"?>
<!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/xhtm" xml:lang="de-DE" lang="de-DE">
	<head>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta name="robots" content="index, follow" />
		<meta name="description" content="Beschreibung der Webseite, zwei bis drei Sätze oder 200 bis 250 Zeichen" />
		<meta name="keywords" content="wenige, zentrale Begriffe durch Kommata getrennt und können aus ein oder mehreren Wörtern bestehen. Keine Sätze" />
		<meta name="author" content="Sven Gehr" />
		<meta name="author-mail" content="sven.gehr@dreampixel.de" />
		<style type="text/css">
		
			*  {
				padding:0;
				margin:0;
			}

			/* Container um Suchformular */
			#searchformcontainer {
				padding: 10px;
				border: 1px solid black;
			}

		
			/* <----------- Suchbox 1 -----------> */
				
			.suchbox1 {
				float: left;
				background:#ebeff2 url(../images/bg_box1_untenlinks.gif) no-repeat left bottom;
				/*border: 1px solid black;*/
			}
		
			.suchbox1_1 {
				float: right;
				background: url(../images/bg_box1_untenrechts.gif) no-repeat right bottom;
				/*border: 1px solid red;*/
			}
		
			.suchbox1_2 {
				float: left;
				background: url(../images/bg_box1_obenlinks.gif) no-repeat left top;
				/*border: 1px solid green;*/
			}
		
			.suchbox1_2 p {
				background: url(../images/bg_box1_obenrechts.gif) no-repeat right top;
				/*border: 1px solid yellow;*/
			}
		
			.suchbox1_2 label, .suchbox1_2 a {
				clear: both;
				float: left;
			}
		
			.suchbox1_2 input {
				float: right;
			}
		
			.clear {
				clear: both;
			}
			/* <----------- Suchbox 1 -----------> */
		

		
		
			/* <----------- Suchbox 2 -----------> */
		
			.suchbox2 {
				float: left;
				background:#ebeff2 url(../images/bg_box2_untenlinks.gif) no-repeat left bottom;
				/*border: 1px solid black;*/
			}
		
			.suchbox2_1 {
				float: right;
				background: url(../images/bg_box2_untenrechts.gif) no-repeat right bottom;
				/*border: 1px solid red;*/
			}
		
			.suchbox2_2 {
				float: left;
				background: url(../images/bg_box2_obenlinks.gif) no-repeat left top;
				/*border: 1px solid green;*/
			}
		
			.suchbox2_2 p {
				background: url(../images/bg_box2_obenrechts.gif) no-repeat right top;
				/*border: 1px solid yellow;*/
			}
		
			.suchbox2_2 label {
				clear: both;
				float: left;
			}
		
			.suchbox2_2 select {
				float: right;
			}
		
			.clear {
				clear: both;
			}
			/* <----------- Suchbox 2 -----------> */		


		
		
		
		
		</style>
		<title>Titel - kurze Zusammenfassung</title>
	</head>
	
	<body id="startseite">
		<div id="searchformcontainer">
			<div class="suchbox1">
				<div class="suchbox1_1">
					<div class="suchbox1_2">
						<p>Einfache Suche</p>
						<p><label for="suchfeld"">Suchen nach:</label>
						<input type="text" name="tx_indexedsearch[sword]" value="Suchtext eingeben" id="suchfeld" class="suchfeld" /></p>
						
						<p><a href="nirgendwo">normale Suche</a>
						<input type="submit" name="tx_indexedsearch[submit_button]" value="Suchen" id="suchknopf" class="knopf" /></p>
					</div>
				</div>
			</div>
			


			<div class="suchbox2">
				<div class="suchbox2_1">
					<div class="suchbox2_2">
						<p>Optionen 1</p>
						<p><label for="suchmethode">Vergleich:</label>
						<select name="tx_indexedsearch[type]" id="suchmethode" class="auswahlliste"><option>Wortteil</option></select>
						
						<p><label for="suchverknuepfung">Logik</label>
						<select name="tx_indexedsearch[defOp]" id="suchverknuepfung" class="auswahlliste"><option>Alle Wörter (UND)</option></select></p>
					</div>
				</div>
			</div>

			
			
			
			
			
			
			<div class="clear"></div>
		</div>
	</body>
</html>

erhalte ich im Firefox die Ausgabe:

Also eigentlich alles so wie ich es aufgrund des CSS erwarten würde. Die beiden farbigen Boxen sind nur so groß wie es der Inhalt erfordert und sie befinden sich aufgrund des letzte Div-Clear in dem scharzen Container.

Unter IE7 sie es so aus:

die einzelnen Boxen nehmen die gesamte Breite ein, sind untereinander und nur der schwarze Container befindet sich unterhalb der ersten Box.

Im Umgang mit Browserbug bin ich noch sehr unerfahren. Bevor ich mich jetzt also auf die Suche nach einem Filter mache sollte ich zuerst mal prüfen ob es nicht ein Fehler im CSS ist. Kann jemand von Euch mal drüber schauen und sagen ober der Code ok ist?

Viele Grüße
pixel

pixel24 · #2 (**permalink**) 16.10.2009, 18:06

Ich habe einen Hinweis gefunden das es sich dabei um den Escaping-Floats-Bug handelt welche bei allen IE's 5.01 bis inkl 7 (mit ausnahme IE5/MAC) auftritt und er sich dadurch umgehen läßt das man dem umschließenden Container eine Höhe von 1% zuweist:

HTML-Code:

#searchformcontainer {
height: 1%;
padding: 10px;
border: 1px solid black;
}

Danach sieht es schon mal besser aus:

Allerdings überlagert der Hintergrund der blauen Box den der gelben Box.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fehler im Code	koshiro	(X)HTML	23	07.12.2009 13:39
Guthabenhack mit Fehler code	Sn!ffer	Serveradministration und serverseitige Scripte	2	07.01.2009 21:05
Validierungs Problem mit PHP Code	débutant	(X)HTML	3	01.06.2006 15:08
Problem mit Schriftgröße in Tabellen	pospiech	Knowledge Base	20	10.08.2005 23:12