zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit Container und I-Net Explorer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.11.2005, 13:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.11.2005
Beiträge: 16
deacon befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.11.2005, 14:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

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; }
Dadurch setzt du alle Außen- und Innenabstände (margin + padding) standardmäßig auf 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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.11.2005, 14:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: Probleme mit Container und I-Net Explorer

Zitat:
Zitat von deacon
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.
Benutze die Suchfunktion mit "faux columns" - durchgehende Spalten werden "vorgetäuscht".
Für "Höhe 100%" und "Footer immer unten" schau dir diese Seite an:
http://www.themaninblue.com/writing/...ve/2005/08/29/

Zitat:
Schaue ich mir die Seite im Inet-Explorer an, denn verschiebt sich der Content Container nach unten
Lass beim #inhalt die Breitenangabe weg uns verwende statt dessen nur margin-left/-right in der Breite der seitlichen Container.
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
Mit Zitat antworten
  #4 (permalink)  
Alt 20.11.2005, 15:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.11.2005
Beiträge: 16
deacon befindet sich auf einem aufstrebenden Ast
Standard

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:
Der Internet Explorer 6 hat, wie war es anders zu erwarten, zwei Probleme mit der <!DOCTYPE>-Angabe. Wird vor dem <!DOCTYPE> ein Kommentar oder eine xml-Angabe eingefügt, so schaltet der IE immer in den Quirks-Modus:
Soll heissen wenn ich keinen Kommentar davor einfüge schaltet er nicht in den Quirks Mode? Hatte ich nämlich auch nicht vor Oder gibt es diesbezüglich noch mehr Probleme?

Greetz
Marco
Mit Zitat antworten
  #5 (permalink)  
Alt 20.11.2005, 15:52
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 20.01.2006, 08:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.11.2005
Beiträge: 16
deacon befindet sich auf einem aufstrebenden Ast
Standard 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]
Container.

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&uuml; Links</p>
  

Men&uuml; Links</p>
  

Men&uuml; Links</p>
</div>  
<div id="rechts">

  

Men&uuml; Rechts</p>
  

Men&uuml; Rechts</p>
  

Men&uuml; 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;
}
Bin für jeden Tip dankbar. Vielleicht findet ihr ja den Fehler. Ich bin mit meinem Latein am ende.

Gruß
Marco
Mit Zitat antworten
  #7 (permalink)  
Alt 20.01.2006, 08:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.03.2005
Beiträge: 286
Chattanooga befindet sich auf einem aufstrebenden Ast
Standard

die von Fricca, The Doc und Tigereye weiter oben gegebenen Ratschläge gelten immer noch.

Gruß
Chattanooga
Mit Zitat antworten
  #8 (permalink)  
Alt 25.01.2006, 15:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.11.2005
Beiträge: 16
deacon befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:50 Uhr.