tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
881
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. #1
    HerrHofrat HerrHofrat ist offline Mitglied
    Registriert seit
    Apr 2007
    Beiträge
    18
    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-Code:
    <!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>
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Firefox: Platz unter maincontainer-screenff.jpg   Firefox: Platz unter maincontainer-screenie7.jpg  

     

  2. #2
    Maik Tutorials.de Gastzugang
    Hi,

    ergänze die Regel folgenderweise:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    
    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
            [b]font-size:0;[/b]
        visibility: hidden;
    }
     

  3. #3
    HerrHofrat HerrHofrat ist offline Mitglied
    Registriert seit
    Apr 2007
    Beiträge
    18
    danke, Problem somit gelöst!
     

Ähnliche Themen

  1. Antworten: 2
    Letzter Beitrag: 29.10.07, 13:59
  2. Firefox unter Max OS X
    Von soa im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 23.06.07, 14:38
  3. Antworten: 3
    Letzter Beitrag: 04.05.05, 18:49
  4. Popup unter IE aber nicht unter Mozilla/firefox
    Von Fossidog im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 31.10.04, 10:22
  5. 2 px Platz unter jedem Bild ?
    Von Hankman im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 15.04.03, 00:32