[Frage] HTML Clearfix Problem mit Firefox/IE/Safari

$Skeezy$ · 26 Februar 2013

Hallöchen,
Ich habe ein Problem bezüglich meiner Webseite, nämlich die Formatierung.
Da ich mit DIV-Containern schreibe, muss ich auch das sogenannte Clearfix anwenden. Nun ist es aber unüblich heutzutage nur clear:both anzuwenden, weswegen ich nach verschiedenen Möglichkeiten gesucht habe, dies zu umgehen bzw zu verbessern. Ich komme aber nicht vorwärst und hänge nur noch an diesem Punkt fest, der mich die Webseite nicht freigeben lässt. ...
Das Problem bei Firefox/IE/Safari ist, dass Hintergründe in den Parent-Containern nicht angezeigt werden, was wohl mit dem clear zusammenhängt. Bei Opera funktioniert alles, aber bei dem Browser kann man fast alles schreiben und es klappt.
Ich hoffe ihr könnt mir da weiterhelfen!
Beim aktuellen IE habe ich es irgendwie hinbekommen, aber für die ältere funktioniert es nicht.
Als Beispiel nehme ich mal die Index-Seite (Inhalt ist nur mit Platzhaltern gefüllt):
Index Bild
links in Opera; rechts in den anderen Browsern

index.php (Meta-tags entfernt)

HTML:

<?php
include("bamdu.php");
?>
<!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" />

<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.timm-breitner.de/tb/rss.php" />
<link href="css/website.css" rel="stylesheet" type="text/css" />
<link href="css/font.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>

<title>Welcome to my portfolio / Timm Breitner</title>
</head>
<body>
<div id="wrapper"> <!-- Wrapper -->
	<div id="site">
	<div id="header"> <!-- Header -->
    	<a href="http://www.timm-breitner.de" title="Home" ><div id="header_logo"></div></a>
        <div id="header_spacer1"></div>
        <a href="aboutme.html"><div id="header_n_1"></div></a>
        <div id="header_spacer2"></div>
        <a href="gallery.html"><div id="header_n_2"></div></a>
        <div id="header_spacer2"></div>
        <a href="blog.php"><div id="header_n_3"></div></a>
        <div id="header_spacer2"></div>
        <a href="projects.html"><div id="header_n_4"></div></a>
    </div> <!-- Header END -->
    <div id="main">
    	<div id="content">
            <a href="#"><div id="index_tleft">
            	<div id="index_tleft_in">
                my latest Project is about making a mod for "Amnesia: The Dark Decent" from Frictional Games.<br />It'll be a full conversion mod and takes place in a complete other era.<br />Stay tuned!
                </div>
            </div></a>
			<a href="img/gallery/featured.png" rel="lightbox" title="featured"><div id="index_tright"></div></a>
            <div id="index_bot">
            <?php
			$news_SQL="SELECT * FROM tbg_blog ORDER BY blog_datetime DESC LIMIT 0, 1";
			$news_result=mysql_query($news_SQL);
			?>
            
     	   <?php
			while($news=mysql_fetch_array($news_result)) {
				$blog_id = $news['blog_ID'];
				echo "<h2 id='index'>".$news['blog_title']."</h2><i id='index'>Latest Blog Entry</i>";
				echo "<table><tr><td><i>".$news['blog_datetime']."</i>";
				echo "&nbsp;|&nbsp;".$news['blog_category']."</td></tr><tr></tr>";
				$Text = $news['blog_content'];
				if (strlen($Text) > 300) {
					$shortText = substr($Text, 0, 300);
					$shortText .= '...<br /><b><a href="blog.php?id=' . $blog_id . '">[read more...]</b></a>';
				}else {
					$shortText = $Text;
					
			}
				echo "<tr><td>".$shortText."</td></tr></table>";	
			}
			mysql_close();
			?>
            </div>
        </div> <!-- Content END -->
    </div>	<!-- Main END -->
    <div id="footer"> <!-- Footer -->
    	<div id="footer_c">
        	<a href="http://www.facebook.com/timm.breitner" target="_blank" title="visit my Facebook profile" ><div id="footer_c1"></div></a>
            <div id="footer_c_spacer1"></div>
            <a href="http://twitter.com/voryth27" target="_blank" title="follow me on twitter" ><div id="footer_c2"></div></a>
            <div id="footer_c_spacer1"></div>
            <a href="http://www.timm-breitner.de/tb/rss.php" target="_blank" title="subscribe to my RSS-Feed" ><div id="footer_c3"></div></a>
            <div id="footer_c_spacer1"></div>
            <a href="mailto:tbg@timm-breitner.de" title="write an email to me" ><div id="footer_c4"></div></a>
            <div id="footer_c_spacer2"></div>
            <a href="http://www.timm-breitner.de/tb/imprint.html"><div id="footer_c5"></div></a>
            <div id="footer_c_spacer2"></div>
            <div id="footer_c6"></div>
            <div id="footer_c7"></div>
            <a href="#top" title="go to top" ><div id="footer_c8"></div></a>   
        </div>
    </div> <!-- Footer END -->
    <div id="footer_space"></div>
    </div>
</div> <!-- Wrapper END -->
</body>
</html>

website.css

HTML:

@charset "utf-8";
body {
	background-color:#0b0b0b;
	margin:auto;
	padding:auto;
}

/* Hides from IE-mac */
* html #wrapper
{height: 1%;}

#wrapper
{display: block;
}
/* End hide from IE-mac */


<!-- Wrapper -->
#wrapper {
	width:907px;
	height:auto;
	min-height:680px;
	margin:auto;
	overflow:hidden;
}

#wrapper:after { 
 content: ".";  
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
}

#site {
	width:907px;
	height:auto;
	margin:auto;
}

<!-- Header -->
#header {
	background-image:url(../img/head.png);
	width:907px;
	height:77px;
	float:left;
}

	#header_logo {
		background-image:url(../img/logo.png);
		width:189px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}
	#header_spacer1 {
		width:56px;
		height:77px;
		float:left;	
	}

	#header_spacer2 {
		width:80px;
		height:77px;
		float:left;	
	}
			
	#header_n_1 {
		background-image:url(../img/n_aboutme.png);
		width:77px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}
	
	#header_n_1_f {
		background-image:url(../img/n_aboutme_h.png);
		width:77px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}
	
	#header_n_1:hover {
		background-image:url(../img/n_aboutme_h.png);
		width:77px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}

	#header_n_2 {
		background-image:url(../img/n_gallery.png);
		width:56px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	

	#header_n_2_f {
		background-image:url(../img/n_gallery_h.png);
		width:56px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	
	
	#header_n_2:hover {
		background-image:url(../img/n_gallery_h.png);
		width:56px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	

	#header_n_3 {
		background-image:url(../img/n_blog.png);
		width:34px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	

	#header_n_3_f {
		background-image:url(../img/n_blog_h.png);
		width:34px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	
	
	#header_n_3:hover {
		background-image:url(../img/n_blog_h.png);
		width:34px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	
	
	#header_n_4 {
		background-image:url(../img/n_projects.png);
		width:61px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	
	
	#header_n_4_f {
		background-image:url(../img/n_projects_h.png);
		width:61px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	
	
	#header_n_4:hover {
		background-image:url(../img/n_projects_h.png);
		width:61px;
		height:20px;
		margin-top:44px;
		margin-bottom:13px;
		float:left;	
	}	
<!-- Header END -->

<!-- Content -->
#main {
	width:907px;
	height:auto;
	min-height:500px;
	float:left;
}

	#content {
		margin-top:40px;
		margin-bottom:20px;
		margin-left:20px;
		margin-right:20px;
		width:867px;
		height:auto;
		float:left;
	}
	
		<!-- About me only -->
		#aboutme_left{
			background-image:url(../img/profil.png);
			width:280px;
			height:400px;
			float:left;
		}
		
		#aboutme_right {
			width:577px;
			height:auto;
			float:left;
			margin-left:10px;
		}
		<!-- About me only END -->
		
		<!--Blog only -->	
		#blog_bg {
			background-image:url(../img/blog_bg1.png);
			background-repeat:repeat-y;
			padding-left:3px;
			padding-right:3px;
			margin:0px;
			width:867px;
			height:auto;
			min-height:119px;
			float:left;
		}
		<!-- Blog only END -->
		
		<!--Projecty only -->
		#project_h_1 {
			background-image:url(../img/projects/project1.png);
			width:860px;
			height:150px;
			float:left;
		}
			
			#project_h_1_in {
				width:365px;
				height:140px;
				margin-left:490px;
				margin-bottom:5px;
				margin-right:5px;
				margin-top:5px;
				float:left;
				font-family:Verdana, Geneva, sans-serif;
				font-size:18px;
				color:#FFFFFF;
				font-style:italic;
			}
		<!-- Projects only END -->	
	
		<!-- Index only -->
		#index_tleft {
			background-image:url(../img/projects/index_bg.png);
			width:600px;
			height:300px;
			float:left;
		}
			
			#index_tleft_in {
				width:365px;
				height:290px;
				margin-left:230px;
				margin-bottom:5px;
				margin-right:5px;
				margin-top:5px;
				float:left;
				font-family:Verdana, Geneva, sans-serif;
				font-size:18px;
				color:#FFFFFF;
				font-style:italic;
			}	
			
		#index_tright {
			background-image:url(../img/gallery/featured_s.png);
			margin-left:10px;
			width:257px;
			height:300px;
			float:left;
		}
		
		#index_bot {
			background-image:url(../img/blog_index_bg.png);
			background-repeat:no-repeat;
			padding-left:3px;
			padding-right:3px;
			margin-top:10px;
			width:867px;
			height:auto;
			min-height:150px;
			float:left;
		}
		<!-- Index only END -->
		
<!-- Content END -->

<!-- Footer -->	
#footer {
	background-image:url(../img/footer.png);
	width:907px;
	height:25px;
	float:left;
}

	#footer_c {
		margin-top:9px;
		width:907px;
		height:16px;
		float:left;	
	}
	
		#footer_c_spacer1 {
			width:8px;
			height:16px;
			float:left;
		}
		
		#footer_c_spacer2 {
			width:12px;
			height:16px;
			float:left;
		}
	
		#footer_c1 {
			background-image:url(../img/f_facebook.png);
			width:16px;
			height:16px;
			float:left;
		}
		
		#footer_c2 {
			background-image:url(../img/f_twitter.png);
			width:16px;
			height:16px;
			float:left;
		}
		
		#footer_c3 {
			background-image:url(../img/f_rss.png);
			width:16px;
			height:16px;
			float:left;
		}
		
		#footer_c4 {
			background-image:url(../img/f_email.png);
			width:16px;
			height:16px;
			float:left;
		}
		
		#footer_c5 {
			background-image:url(../img/f_imprint.png);
			width:43px;
			height:16px;
			float:left;
		}
		
		#footer_c5:hover{
			background-image:url(../img/f_imprint_h.png);
			width:43px;
			height:16px;
			float:left;
		}

		
		#footer_c6 {
			background-image:url(../img/f_cr.png);
			width:293px;
			height:16px;
			float:left;
		}
		
		#footer_c7 {
			width:443px;
			height:16px;
			float:left;
		}
		
		#footer_c8 {
			background-image:url(../img/f_top.png);
			width:16px;
			height:16px;
			float:left;
		}
		
	#footer_space {
		width:907px;
		height:50px;
		float:left;
	}
<!-- Footer END -->		
		
<!-- Wrapper END -->

Wie gesagt, es geht mir nur um das Clearfix Problem, ich nehme aber auch gerne andere Kritik entgegen!

Gruß

Zero · 26 Februar 2013

eine live Ansicht wäre einfacher zu debuggen.

kannst du evtl. den link posten?
dann wären auch alle Dateien und Bilder da.
ich wette es ist was ganz kleines.

aber mal ganz grob:
padding auto ist kein padding-Wert (zeile 5)
ich bin mir relativ sicher, dass  kein valides CSS ist.

$Skeezy$ · 26 Februar 2013

url entfernt

Also padding: auto; sollte doch genauso funktionieren wie zb margin: auto;, also das er das mittig platziert.
 ist ein Kommentar und wird ausgeklammert bzw nicht wahrgenommen. (hab ich schon öfters benutzt im Stylesheet anderer Projekte).

Und ja ich vermute auch das es was ganz kleines ist, aber ich finde es einfach nicht, deswegen will ich mal jemand anders darüberschauen lassen^^

Zero · 26 Februar 2013

aber nicht css.

padding:auto gibts nicht o.o
http://www.w3schools.com/cssref/pr_padding.asp

dein #index_tleft wird nicht gematched
bitte entferne den kommentar darüber & teste das noch mal.
Ich wette daran gehts kaputt.

edit

The // comment syntax used in C++ is not allowed.
Neither are SGML comments that take the form , except in one situation: they may appear in internal style sheets—style sheets placed within the HTML source using the <style> tag—in order to hide the CSS statements from pre-HTML4 user agents. However, this use of comments is now redundant and can be disregarded.

muhahah x3

$Skeezy$ · 26 Februar 2013

ich glaubs net.... Nun hat mich meine Ordenlichkeit so viel Zeit gekostet... blöde kacka Kommentare xD
Vielen Dank, klappt nun bei Safari und IE. Bei Firefox und Chrome hab ich keine Ahnung weil ich die nicht installiert habe, aber vermutlich sollte es funktionieren.
Kann dann geschlossen werden.
Gruß

Zero · 26 Februar 2013

frag halt früher ;P

mit den anderen beiden geht's auch.

*closed* ^^

kleines P.S.
man entwickelt für chrome & FF & kackt auf den Rest xD
man entwickelt niemals für IE
und Opera ist marktanteilig so klein, dass sich das nicht rentiert.

[Frage] HTML Clearfix Problem mit Firefox/IE/Safari

$Skeezy$

Prophet

Zero

Chief 0perating 0fficer

$Skeezy$

Prophet

Zero

Chief 0perating 0fficer

$Skeezy$

Prophet

Zero

Chief 0perating 0fficer