30.03.2009, 20:31
|
|||
|
|||
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>
|
| Sponsored Links |
|
30.03.2009, 20:39
|
|||
|
|||
|
In IE < 7 ist #Inhalt 1em hoch, genau wie es in deinem Code steht.
Das hatten wir heute schonmal: Zusammenkopieren aus Beispielen reicht nicht.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken
|
| Sponsored Links |
|
30.03.2009, 23:38
|
|||
|
|||
|
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;
}
|
|
30.03.2009, 23:53
|
|||
|
|||
|
Zitat:
Zitat:
 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:
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.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (31.03.2009 um 00:12 Uhr) Grund: Typo
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
