zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden css-layout geht bei iexplorer6 nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.03.2009, 20:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2008
Beiträge: 32
online befindet sich auf einem aufstrebenden Ast
Standard css-layout geht bei iexplorer6 nicht

Hallo zusammen,
bin ein Anfänger und habe mir Gestern zum ersten mal, aus Beispielen, ein css-layout gemacht.
Bei Firefox und iexplorer7 hat es auf meinem PC super funktioniert. Als ich es gerade auf iexplorer aufgemacht habe, war der Inhalt Container (also des Hauptteil) nicht bzw. kaum zu sehen.
Anbei mein Code, könnt Ihr mir sagen was da falsch ist?

mfg



Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>.:test:.</title>
<style type="text/css">
  body {
    color: black; background-color: black;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
  }

  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0;

    background: transparent url(hintergrund.jpg) no-repeat;
    border: 1px ridge silver;
  }

  h1 {
    margin: 0; 
    text-align: center;
    background: #000 url(ani-bw-gif.gif);
    background-repeat:no-repeat;
    background-position:center;
    border-bottom: 1px solid silver;
    height: 146px;
  }

  ul#Navigation {
  font-size: 0.8em;
    margin: 0; padding: 0.4em;
    text-align: center;
    border: 0px solid silver;
    background-color: black;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
  }

  ul#Navigation a, ul#Navigation span {
    padding: 0.1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-top-color: white; border-bottom-color: white;

    color: white; background-color: #000;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  ul#Navigation a:hover, ul#Navigation span {
    border: 1px solid black;
    border-left-color: white; border-right-color: white;
    color: white; background-color: black;
  }

  div#Inhalt {
  	position: relative;
	display: block;
	top: 3px;
	left: 8px;
	bottom: 3px;
	width: 745px;	/* 430*/
	height: 366px;
	padding: 3px;
	text-align: left;
	color: #fff;
	overflow: auto;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;

  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    margin-bottom: 1;
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
    color: green;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }

  p#Fusszeile {
    clear: both;
    font-size: 0.83em;
    margin: 1; padding: 0.2em;
    text-align: center;
    color: #fff;
    background-color: #000;

  }
</style>
</head>
<body>

<div id="Seite">
  <h1></h1>

  <ul id="Navigation">
    <li><a href="einfuehrung.htm">Home</a></li>
    <li><a href="mehrspaltige.htm">Media</a></li>
    <li><a href="fixbereiche.htm">Fotos</a></li>
    <li><a href="navigationsleisten.htm">Forum</a></li>
    <li><a href="browserweichen.htm">Shop</a></li>
    <li><a href="fixbereiche.htm">Booking</a></li>
    <li><a href="navigationsleisten.htm">Kontakt</a></li>
    <li><a href="browserweichen.htm">Links</a></li>
  </ul>
  

  <div id="Inhalt">
  
<table border="0" cellspacing="0" cellpadding="2" style="table-layout:auto">
  <tr>
    <td style="width:420px;">
    <h2>2-spaltiges Layout mit Hintergrundgrafik</h2>
    <p>In diesem Beispiel wird eine Hintergrundgrafik
       zur optischen Trennung der Spalten verwendet.</p>
    <p>Dies erfordert leider, dass die Breite der links stehenden Navigation
       passend zur Hintergrundgrafik in 'px' angegeben wird.
       Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
       nicht anpassen.</p>
    <p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
       des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
       Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
       kein Hintergrund angegeben.<br>
       Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
       und ist unabhängig von deren Höhe.</p>
    <p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
       damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
       <br>
       <br><br>
           <p>In diesem Beispiel wird eine Hintergrundgrafik
       zur optischen Trennung der Spalten verwendet.</p>
    <p>Dies erfordert leider, dass die Breite der links stehenden Navigation
       passend zur Hintergrundgrafik in 'px' angegeben wird.
       Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
       nicht anpassen.</p>
    <p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
       des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
       Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
       kein Hintergrund angegeben.<br>
       Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
       und ist unabhängig von deren Höhe.</p>
    <p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
       damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
       
              <br>
       <br><br>
           <p>In diesem Beispiel wird eine Hintergrundgrafik
       zur optischen Trennung der Spalten verwendet.</p>
    <p>Dies erfordert leider, dass die Breite der links stehenden Navigation
       passend zur Hintergrundgrafik in 'px' angegeben wird.
       Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
       nicht anpassen.</p>
    <p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
       des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
       Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
       kein Hintergrund angegeben.<br>
       Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
       und ist unabhängig von deren Höhe.</p>
    <p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
       damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
       
              <br>
       <br><br>
           <p>In diesem Beispiel wird eine Hintergrundgrafik
       zur optischen Trennung der Spalten verwendet.</p>
    <p>Dies erfordert leider, dass die Breite der links stehenden Navigation
       passend zur Hintergrundgrafik in 'px' angegeben wird.
       Dadurch kann sich die Breite dieser Box einer Änderung des Schriftgrades
       nicht anpassen.</p>
    <p>Wie die links graue Hintergrundgrafik ist auch die gelbe Hintergrundfarbe
       des Inhaltsbereichs dem die Seitenelemente umschließenden DIV zugewiesen.
       Sowohl für die Navigation als auch für diese Inhaltsbox ist selbst
       kein Hintergrund angegeben.<br>
       Die durchgehende Trennung der Boxen wird somit lediglich optisch simuliert
       und ist unabhängig von deren Höhe.</p>
    <p>Der Kopf- und der Fußzeile wurde eine Hintergrundfarbe zugewiesen,
       damit sich die optische Trennung nicht auf diese Bereiche ausdehnt.</p>
    
    
    
    
    </td>
    <td style="width:110px;"></td>
  </tr>
</table>


  
    
  </div>
  

  
  
  <p id="Fusszeile">Diese Fußzeile stellt innerhalb des umschließenden DIVs
     den Elementenfluss wieder her.</p>
</div>

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.03.2009, 20:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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

In IE < 7 ist #Inhalt 1em hoch, genau wie es in deinem Code steht.

Das hatten wir heute schonmal: Zusammenkopieren aus Beispielen reicht nicht.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.03.2009, 23:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2008
Beiträge: 32
online befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
so ganz verstehe ich es noch nicht. Habe nach der Erklärung zur Höhe 1em gesucht und eigentlich nur die Antwort gefunden, dass man für IE<7 dies angewand hat, damit sich die Höhe des Containers an der Länge des dort sich befindenden textes einstellt.

Leider habe ich nur IE7 auf meinem PC installiert und kann es nicht prüfen bzw. ausprobieren wie die Lösung für mein Problem ist.

Denke jedoch das ich die von mir bestimmte Höhe im div#Inhalt Container auch im html div#Inhalt angeben muss oder?

also:
HTML-Code:
  div#Inhalt {
  	position: relative;
	display: block;
	top: 3px;
	left: 8px;
	bottom: 3px;
	width: 745px;	/* 430*/
	height: 366px;
	padding: 3px;
	text-align: left;
	color: #fff;
	overflow: auto;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;

  }
  * html div#Inhalt {
    height: 366px;
    /*height: 1em;   Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
    margin-bottom: 1;
  }
Wäre Euch sehr dankbar für eine Antwort.............
Mit Zitat antworten
  #4 (permalink)  
Alt 30.03.2009, 23:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
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

Zitat:
Zitat von online Beitrag anzeigen
Habe nach der Erklärung zur Höhe 1em gesucht und eigentlich nur die Antwort gefunden, dass man für IE<7 dies angewand hat, damit sich die Höhe des Containers an der Länge des dort sich befindenden textes einstellt.
Das schließt du aus dem Kommentar:
Zitat:
/* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */

Verstehe ich nicht.

In deinem Layout kann der 3px-Bug bei #Inhalt gar nicht auftreten.
Wie sah das Layout vor deinen Eingriffen aus?
Es war zweispaltig und hatte eine inhaltsabhängige Höhe, nicht wahr?


Zitat:
Denke jedoch das ich die von mir bestimmte Höhe im div#Inhalt Container auch im html div#Inhalt angeben muss oder?
Nein, es ergibt keinen Sinn, die gleiche Höhe noch ein zweites Mal anzugeben.
Entferne den gesamten IE-Hack (der übrigens mit * html beginnt und deshalb Star-HTML-Hack heißt.)

Worum es dabei ursprünglich mal ging ist hasLayout. In Verbindung mit overflow kommt dann eben Unfug raus.
Man kann Hacks nicht einfach von irgendwoher kopieren. Man muss wissen, was man tut und solche Korrekturen gezielt anwenden.
Deshalb nochmals die Empfehlung: Lern Grundlagen. In dem in dem Link genannten Buch wird auch auf die Grundlagen des "IE-Hacking" eingegangen.

Geändert von fricca (31.03.2009 um 00:12 Uhr) Grund: Typo
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
Banner neben CSS Layout platzieren? delaspuke CSS 19 29.12.2010 22:08
Css 3 Seiten Layout will net so :) nova_rs CSS 1 30.03.2010 15:54
CSS Layout - ist das so möglich? berlina CSS 18 12.02.2007 21:55
Layout: Tabelle -> CSS | ohne Schönheitsfehler? Knickedi CSS 20 05.08.2006 02:18
CSS Layout mit abgerundeten Ecken dimension CSS 3 17.04.2005 18:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:10 Uhr.