|
|||
Probleme mit Container und I-Net Explorer
Hallo,
ich möchte nun auch langsam mal von Tabellenlayout auf CSS Layout umstellen und stehe wie viele andere auch vor Probleme. Deswegen wäre es schön wenn mich mal jemand an die Hand nehmen könnte und mir mit meinem Problem helfen könnte. Die Sache mit den Positionierungen bereiten mir doch mehr Kopfschmerzen als ich dachte. Mit Tabellen war es doch schon etwas leichter. Aber ich möchte mich da reinfuchsen. Mein Layout soll so aussehen: Einen Container (900px breit, zentriert und 100%Höhe), links und rechts ein Menü (je 150px breit, 100%hoch) und den Content (600px breit und 100% hoch). Evt. später noch einen Footer. So langsam habe ich das mit der Anordnung der einzelnen div Bereiche hinbekommen und es klappt auch im Firefox Browser. Schaue ich mir die Seite im Inet-Explorer an, denn verschiebt sich der Content Container nach unten und der Container wo alles drinn ist, der ist nicht mehr zentriert. Hier mal ein Link zu meiner Test Seite: http://www.clan-ncs.net/test.htm Denn befindet sich doch noch ein Fehler beim Firefox. Der Container mit dem ganzen Inhalt soll 100% Höhe haben. Doch die Menü- und Inhalts Container strecken sich darüber. Das sieht man am Rahmen. Das wird wiederrum im Inet Explorer korrekt dargestellt. Ich hoffe ich habe mich korrekt ausgedrückt mit meiner Anfrage und Ihr könnt mir helfen. Die CSS Angaben findet Ihr im Quelltext und werden später in einem CSS File eingebunden. Danke schon mal im Vorraus und ein schönen Sonntag noch. Gruß Marco |
Sponsored Links |
|
|||
Hi,
wegen deinem ersten Problem: Offensichtlich interpretiert der IE die Rahmendicke "thin" anders als der Firefox. Ich würde dafür eher Werte in px verwenden. Außerdem musst du die Rahmenbreite zu der Breite des Containers dazuzählen, d.h., wenn du zum Beispiel einen 1px dicken Rahmen für #rechts und #links hast, darft du diesen nur 149px Breite geben, damit du mit den 600px von #inhalt auf insegesamt 900px kommst! Ach ja: Schreib am besten das hier in deine CSS: Code:
* {margin:0; padding:0; } Zu 2.: Vermutlich addiert der FF die 150px vom Logo zu den 100 % dazu, was auch gar kein Fehler ist. BTW: Die Positionierungsangaben "top:150px;" sind afaik bei dir unnötig. |
Sponsored Links |
|
|||
Re: Probleme mit Container und I-Net Explorer
Zitat:
Für "Höhe 100%" und "Footer immer unten" schau dir diese Seite an: http://www.themaninblue.com/writing/...ve/2005/08/29/ Zitat:
Die 3-px-Lücken, die (im IE) dann entstehen, sind ein typischer IE Bug. Wenn du faux-columns für den durchgehenden Hintergrund verwendest, fallen die 3px aber nicht mehr auf. Mehr zum 3px-Bug in diesem Thread. BTW: Dass du mit dem xml-Prolog den IE6 in den Quirks-Modus setzt, ist dir klar? Grüße fricca |
|
|||
Danke für die schnellen Antworten. Also eure Tips haben super geholfen. Der Inhalt ist jetzt da wo er hin soll. Das mit den Rahmen werde ich noch ändern.
Prologerklärung von CSS4You: Zitat:
Greetz Marco |
|
||||
nein, dein HTML-Document muss mit dem Doctype beginnen, davor darf nichts sein, weder Kommentar noch xml-Prolog.
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an Milian Wolff | Markdownify | Typogridder |
|
|||
Anderes Design...neue Probleme mit IE
Hallo,
ich habe mein Design bischen geändert. Das Problem besteht mal wieder beim IE. Das Gerüst besteht aus einem Container, indem die div´s logo, links, content, rechts und footer verschachtelt sind. Denn habe ich mir eine kopf- und fuss.php erstellt. Geteilt habe ich im Code:
<div id="content">[color=green]Hier habe ich geteilt[/color] Hier mal die Screens wo die Fehler zu sehen sind: IE Firefox Wo kommt nun dieser blöde Zwischenraum her? Hier mal der HTML Code: Code:
<?xml version="1.0" encoding="iso-8859-1"?><!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> <title>CSS Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="/design.css" rel="stylesheet" type="text/css" /> </head> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> </head> <body style="text-align:center;"> <div id="container" align="center" style="width:850px; margin:0px auto; z-index:1; background-color: #999999; layer-background-color: #999999; border: 1px none #000000;"> <div id="logo"></div> <div id="links"> Menü Links</p> Menü Links</p> Menü Links</p> </div> <div id="rechts"> Menü Rechts</p> Menü Rechts</p> Menü Rechts</p> </div> <div id="content">Content<script language="JavaScript"> <!-- function setsmile(Zeichen) { document.kommentar.kommentar.value = document.kommentar.kommentar.value + Zeichen; } //--> </script> <title>Script-solution News</title><body bgcolor=FFFFFF> <table width="60%" align=center cellpadding=0 cellspacing=0> <tr> <td> <table width=95% align=center bgcolor=000000 cellspacing=0 cellpadding=1><tr><td><table width=100% cellpadding=0 cellspacing=0><tr><td align=center class='top' bgcolor=000000><font size=4>Script-solution News</font></td></tr></table></td></tr></table> <table width=100% align=center bgcolor='000000' cellpadding=1 cellspacing=0><tr><td><table width=100% cellspacing=0 cellpadding=1><tr><td class='top' bgcolor=000000 width=60%>Test 2</td><td class='top' bgcolor=000000 align=right width=40%>20.01.2006um03:51</td></tr><tr><td class='main' bgcolor=59789B colspan=3>Dies ist ein Blindtext Dies ist ein Blindtext Dies ist ein Blindtext Dies ist ein Blindtext Dies ist ein Blindtext Dies ist ein Blindtext Dies ist ein Blindtext Dies ist ein Blindtext Dies ist ein Blindtext Dies ist ein Blindtext </td></tr><tr><td class='main' bgcolor=59789B width=60%>posted byadmin</td><td class='main' bgcolor=59789B align=right width=40%>1Kommentare</td></tr></table></td></tr></table> <table width=100% align=center bgcolor='000000' cellpadding=1 cellspacing=0><tr><td><table width=100% cellspacing=0 cellpadding=1><tr><td class='top' bgcolor=000000 width=60%>Test</td><td class='top' bgcolor=000000 align=right width=40%>19.01.2006um16:10</td></tr><tr><td class='main' bgcolor=59789B colspan=3>test</td></tr><tr><td class='main' bgcolor=59789B width=60%>posted byadmin</td><td class='main' bgcolor=59789B align=right width=40%>0Kommentare</td></tr></table></td></tr></table> <table width=100% cellpadding=0 cellspacing=0><tr><td class='body' align=center>Das Archiv ist leer</td></tr></table> <table width=100% cellpadding=0 cellspacing=0><tr><td align=center class='$body_class'>Script-solution News v2.12 by Nils Asmussen 2003 | http://www.script-solution.de</td></tr></table></td></tr></table> </div> <br clear=all> <div id="fuss">Fuss</div> </div> </body> </html> Hier der CSS Code: Code:
#logo { background-image: url(/grafiken/logo/logo.jpg); background-repeat: no-repeat; height: 200px; background-position: center bottom; width: 850px; } #links { background-color: #CC0000; width: 148px; border: 1px solid #990000; float: left; clear: right; } #content { background-color: #FF9900; width: 550px; float: none; } #rechts { background-color: #990000; width: 148px; border: 1px solid #990000; float: right; } #container { background-color: #CCCCCC; width: 850px; } #fuss { background-color: #CCFF00; width: 848px; border: 1px dashed #0000FF; height: 30px; } Gruß Marco |
|
|||
Jo, hab nun alles zu meiner Zufriedenheit hinbekommen. Habs zwar alles bischen anders gemacht aber trotzdem zum Ziel gekommen.
Wer mal Lust reinzuschauen: Klickediklack Der Link soll nur für weitere Anregungen sein. Ist nicht als Spam gedacht Vielen Dank an die Leute die mir hier geholfen haben. Gruß Marco |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Anfängerfrage: Zentrierung in Galerie und Border-Problem | goldbeere | CSS | 3 | 04.11.2013 20:07 |
Probleme im Internet Explorer | web334 | CSS | 15 | 21.06.2013 20:27 |
Probleme mit gefloatete Bereich im Internet Explorer | gustavmega | CSS | 2 | 20.08.2009 01:28 |
position probleme mit dem internet explorer | alejandro | CSS | 6 | 11.02.2008 15:54 |
Probleme mit Container - Hintergrund | monti | CSS | 2 | 05.11.2005 13:40 |