✔ Firefox: Platz unter maincontainer

HerrHofrat · 5. Oktober 2007

Hallo!

Ich hab folgendes Problem:
mein Layout besteht aus einem Header und zwei Spalten (menu,content). Das ganze befindet sich im maincontainer.

Im IE7 passt das Layout perfekt, clearfix ist drinnen.
Im Firefox hab ich das Problem, dass sobald ich ins Content oder ins Menu div etwas reinschreibe, unter dem maincontainer ein freier Platz entsteht.

Ich habe auch zwei Screenshots angehängt. Sie zeigen mein Problem wenn in beiden Browsern ganz nach unten gescrollt wurde.

Hier mein code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>stp-artists.com</title>
<style type="text/css">
<!--
* {
	margin: 0px;
	padding: 0px;
}

body {
	text-align: center;
}

table {
	text-align:left;
}

html, body {
	min-height: 100%;
	height: auto !important;
	height:100%;
}

body {
	background-image: url(img/stpartists_bg.gif);
	background-color: #474847;
	min-height: 100%;
	height: auto !important;
	height:100%;
}

body,td,a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
	text-decoration:none;
}

.second {
	background-color: #474847;
}

div#maincontainer {
	background-image: url(img/bgneu.jpg);
	background-repeat:repeat-y;
	position:absolute;
	width:920px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin:0px 0px 0px -460px;
	top: 0%;
	left: 50%;
	padding: 0px;
}
div#header{
	height:150px;
	width:920px;
	position:relative;
	top:0px;
	left:0px;
	float:left;
	background-image: url(img/headerneu.jpg);
}

div#menu{
	position:relative;
	width:170px;
	top:0px;
	left:25px;
	float:left;
}

div#content {
	float: right;
	width: 700px;
	min-height: 100%;
	height: auto !important;
	height:100%;
	position: relative;
	top: 0px;
	right: 25px;
}
div#footer {
	clear: both;
	position: absolute;
	bottom: 0px;
	left:0px;
	width: 920px;
	height: 20px;
}

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

.clearfix {
	display: inline-block;
}

    /* Holly Hack Targets IE Win only \*/
 * html .clearfix {height: 1%;}
 .clearfix {display: block;}
    /* End Holly Hack */

-->
</style>
</head>

<body>

<div id="maincontainer" class="clearfix">
    <div id="header"></div>
    <div id="menu"><img src="img/menuneu2.jpg" border="0"></div>
    <div id="content" align="center">
      <table border="0" width="480px" align="center">
			<tr>
			  <td valign="top" width="15%" align="right" style="Font-Size:16px;">17.07.2007</td>
			  <td align="center" style="Font-Size:16px; font-weight:bold;">MC Flax @studio</td>
			</tr>
			<tr style="background-color:#474847;">
			  <td colspan="2" style="border:3px solid white;">
			  <br>
			  Der junge MC FLAX verbringt derzeit seine Freizeit im Studio um endlich die lang angekündigten Tunes zu veröffentlichen.

Als Vorgeschmack dafür was uns noch erwartet findet ihr nun den ersten Tune ... <a href="index.php?show=home&amp;mode=detail&amp;nid=6&amp;s=0" target="_self" style="text-decoration:underline;">mehr</a>
			  <br>&nbsp;
			  </td>
			</tr>
			<tr>
			  <td colspan="2">&nbsp;</td>
			</tr>
			<tr>
			  <td valign="top" width="15%" align="right" style="Font-Size:16px;">12.07.2007</td>
			  <td align="center" style="Font-Size:16px; font-weight:bold;">Krooked's erster Vinyl- Release in naher Ferne</td>
			</tr>
			<tr style="background-color:#474847;">
			  <td colspan="2" style="border:3px solid white;">
			  <br>
			  Der Tune 'the Access' mit Camo wird in Kürze auf Way of Life Records auf der A-Seite der Platte erscheinen. 
  
  
  Auf der B-Seite der ... <a href="index.php?show=home&amp;mode=detail&amp;nid=5&amp;s=0" target="_self" style="text-decoration:underline;">mehr</a>
			  <br>&nbsp;
			  </td>
			</tr>
			<tr>
			  <td colspan="2">&nbsp;</td>
			</tr>
			<tr>
			  <td valign="top" width="15%" align="right" style="Font-Size:16px;">12.07.2007</td>
			  <td align="center" style="Font-Size:16px; font-weight:bold;">Neuigkeiten von Moving Eyes (Kaos Productions)</td>
			</tr>
			<tr style="background-color:#474847;">
			  <td colspan="2" style="border:3px solid white;">
			  <br>
			  Wir können voller Freude bekannt geben, dass Moving Eyes nun mit 30 eigenst produzierten neuen Clips an den Start gehen wird. Natürlich werden noch viele Folgen. 
30 weitere sind nun ... <a href="index.php?show=home&amp;mode=detail&amp;nid=4&amp;s=0" target="_self" style="text-decoration:underline;">mehr</a>
			  <br>&nbsp;
			  </td>
			</tr>
			<tr>
			  <td colspan="2">&nbsp;</td>
			</tr>
			<tr>
			  <td valign="top" width="15%" align="right" style="Font-Size:16px;">12.07.2007</td>
			  <td align="center" style="Font-Size:16px; font-weight:bold;">2 neue UAF-Releases</td>
			</tr>
			<tr style="background-color:#474847;">
			  <td colspan="2" style="border:3px solid white;">
			  <br>
			  Eristoff Tracks Urban Art Forms - 'Blue' mixed by Body&amp;Soul

und 

Eristoff Tracks Urban Art Forms - 'Olive' mixed by Crazy Sonic &amp; Electric Indigo


"Blue" Tracklisting:&nbsp; 
Body&amp;Soul&nbsp;&nbsp;-&nbsp;Prelude 
    ... <a href="index.php?show=home&amp;mode=detail&amp;nid=2&amp;s=0" target="_self" style="text-decoration:underline;">mehr</a>
			  <br>&nbsp;
			  </td>
			</tr>
			<tr>
			  <td colspan="2">&nbsp;</td>
			</tr><tr><td align="left">&nbsp;</td><td align="right">&nbsp;</td></tr></table>	</div>
</div>
</body>
</html>

Maik · 5. Oktober 2007

Hi,

ergänze die Regel folgenderweise:

Code:

.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
        font-size:0;
	visibility: hidden;
}

HerrHofrat · 5. Oktober 2007

danke, Problem somit gelöst!

✔ Firefox: Platz unter maincontainer

HerrHofrat

Grünschnabel

Anhänge

Maik

HerrHofrat

Grünschnabel

Neue Beiträge