✔ clearfix-Problem

Status
Nicht offen für weitere Antworten.
selle1

selle1

Erfahrenes Mitglied
Hallo,

ich habe ein Layout, welches im FF zwar funktioniert aber leider nicht im IE. Habe schon ein wenig recherchiert und vermute, dass das Problem mit dem clearfix gelöst werden kann. Bekomme es aber nicht hin. Anbei das Stylesheet:

HTML: 
body {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	font-size:12px;
	background-color: #385A96;
}

a {
	color:#FFCC33;
	text-decoration:none;
	font-size: 14px;
}
h1 {
	font-size:16px;
	color: #FFCC33;
}
h2 { font-size:14px; }

#wrapper { width:900px; margin:0 auto; padding:0; background: #385A96;}

#header { width:100%; height:150px; background-image:url(../images/header.gif); }
#header .logo { float:left; }

.logotext { float:left; width:200px; margin:55px 0 50px 30px; font-family:Trebuchet MS; font-size:22px; color:#FFFFFF; }
.logotext strong { color:#EFEFEF; }
.logotext2 { font-size:14px; }

#nav { width:100%; overflow:auto; padding:1px; margin:0; background-color:#D2D2D2; }
#nav ul { margin:0; padding:0; }
#nav ul li { float:left; list-style:none; padding:0; }
#nav ul li a { display:block; width:100px; height:15px; padding:8px 0; margin:0 1px 0 0; background-color:#EFEFEF; text-align:center; }
#nav ul li a:hover { background-color: #FFFFFF; color:#999999; }

#content {
	width:100%; height: auto; background-image: url(file:///C:/Users/chef/IRS/site/images/bg-mid.gif);
	height: 453px;
	
}
#footer {text-align: center; background-image:url(file:///C:/Users/chef/IRS/site/images/bg-bot.gif); margin: auto;}
#left { float:left; width:150px; margin: 60px 0 0 100px;}
#left ul { margin: 0; padding:0; }
#left ul li { list-style:none; margin:1px 0; padding:0; }
#left ul li a {
	display:block;
	width:120px;
	margin:20;
	padding:5px;
	
}
#left ul li a:hover{color: #fff;}
#left ul li ul { margin: 0; padding:0; }
#left ul li ul li { list-style:none; margin:1px 0; padding:0; }
#left ul li ul li a {
	padding:5px;
}
#left ul li ul li a:hover{color: #fff;}
#breadcrumb {
	float:right;
	width:100px;
	height: 20px;
}

#right { float:right; width:550px; margin-top: 60px; margin-bottom: 20px;}
#right p a { color:#FFCD59; font-weight:normal; text-decoration:underline; }
#right p a:hover {color: #FFFFFF; text-decoration: none;}
.clear { clear:both; }

Der Footer will einfach nicht "herunterrutschen".
 
Hi,

könntest du auch den dazugehörigen HTML-Code zeigen, damit man sieht, wie sich das Layout im Markup überhaupt zusammensetzt.
 
Bitte schön:

HTML: 
<!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=iso-8859-1" />
<title>Layout 1</title>
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all" />
</head>
<body>
<div id="wrapper">
  <div id="header">
    <p class="logotext">Your<strong>Site</strong><br>
      <span class="logotext2">Your slogan goes here</span></p>
    </div>
  <div id="content">
    <div id="left">
      <ul>
        <li><a href="">About Us</a></li>
        <li><a href="">Vision</a>
          <ul>
            <li><a href="">Services</a></li>
          </ul>
        </li>
        <li><a href="">Employers</a></li>
        <li><a href="">Candidates</a></li>
        <li><a href="">Jobs</a></li>
        <li><a href="">SUBMIT CV</a></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div id="breadcrumb"><script language="javascript">
      document.write(TODAY);	</script><br />



</div>
    <div id="right">
      <h1><strong>Specialist   													Recruitment across the IT   													sector</strong></h1>
      <p> IRS International   													Recruitment Services Ltd is a predominantly IT and   													Telecommunications staffing   													solution agency dedicated   													to connecting IT   													professionals from all over   													the world   													to projects and positions   													across Europe and the Middle   													East. <br />
        <br />
Specialising in short and   													long term   													contracts,   												    permanent   													and   													temporary  													    													positions as well as&nbsp;fixed term employment contracts,   													IRS has developed its   													expertise in the   													international placements of   													IT specialists. Providing   													support to a variation of   													companies ranging from   													multi-national corporations   													to&nbsp;small and medium size   													companies within&nbsp; the public   													and privately owned sectors   													across England, Germany,   													Holland and the Middle East.</p>
      <p> <span lang="EN-GB" xml:lang="EN-GB">IRS   													offers its clients the   													delivery of IT personnel in   													all technologies and   													disciplines across the full   													bandwidth of the   													Information Technology (IT)   													sector.<br />
          <a href="http://www.irs-services.com/aboutus.html">More About Us</a></span></p>
      <hr />
      <h1><strong>E</strong><strong>ngineering Staffing Solutions</strong></h1>
      <p>In light of our Middle Eastern customers increasing demands for highly  skilled engineering professionals, we are delighted to announce the  divisional launch of IRS Middle East - Engineering Staffing Solutions.<br />
        <br />
Specifically set up to supply western engineers to our customers across  the Gulf Region, we offer both temporary/contract and permanent  staffing recruitment services across the oil and gas, petrochemical,  power, energy and high technology industries.<br />
<a href="http://www.engineering.irs-services.com">More Details</a></p>
    </div>
  </div>
  <br class="clear" />
  <div id="footer">
    <p>All content copyright &copy; 2008 <strong>IRS</strong>, all rights reserved.<br />
      <a href="">Legal</a> | <a href="">Privacy Policy</a> | <a href="">Contact</a></p>
  </div>
</div>
</body>
</html>
 
Richte mal browserübergreifend eine Mindesthöhe für #content ein:

Code: 
#content {
        width:100%;  background-image: url(file:///C:/Users/chef/IRS/site/images/bg-mid.gif);
        min-height:453px; height:auto !important; height:453px;

}
Die Klasse .clear würde ich persönlich direkt im Footer aufrufen, und das <br>-Tag aus dem Code verbannen.
 
Danke Maik,

habe noch
HTML: 
background-repeat: repeat-x;
eingefügt und somit funktioniert alles, wie es soll. Danke;)
 
Ein Problem mit der Hintergrundbildwiederholung habe ich ohne die dazugehörigen Grafikdateien nicht wahrgenommen :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück