nicht angemeldet
Liebe Gemeinde,
bin in die Untiefen des Layoutens mittels CSS eingetaucht, also Neuling auf dem Gebiet. Wollte meine private Homepage von Tabellen- auf CSS-Layout umstellen. Das ist auch soweit ganz erfreulich gelungen, wenn nur der Internet-Explorer nicht wäre. Während Firefox und Safari alles schön darstellen, gibt der Explorer lediglich eine Definition - nämlich den Mousover des Images - meiner externen CSS-Datei wieder.
Vielleicht ist das Problem ja trivial und ich bin meinem Anfängertum zum Opfer gefallen, vielleicht aber auch nicht...
Wer mal schauen möchte:
Link zu der Seite: http://www.korrell.eu
Link zu der Testseite die noch mit Explorer funktionierte: http://www.korrell.eu/testcss/testcss
Die CSS der letzteren unterscheidet sich geringfügig von der ersten, poste deshalb beide:
testcss:
body {
font-family: Arial, Helvetica, sans-serif;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
div#container
{
margin: 1em auto;
width: 700px;
height: 450px;
text-align: left;
background-color: red;
border: 1px solid black;
}
div#header
{
height: 45px;
background-color: fuchsia;
}
div#linksmutter
{ float: left;
margin-left: 20px;
width: 180px;
hight: 240px;
}
.links
{
float: left;
width: 180px;
height: 40px;
background-color: yellow;
}
.links2
{
float: left;
width: 180px;
height: 40px;
background-color: green;
}
div#rechtsmutter
{ float: right;
margin-right: 20px;
width: 180px;
hight: 240px;
}
.rechts
{
float: right;
width: 180px;
height: 40px;
background-color: yellow;
}
.rechts2
{
float: right;
width: 180px;
height: 40px;
background-color: green;
}
div#mittemutter
{ float: left;
width: 280px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
vertical-align: middle;
background-color: salmon;
}
.mitteunten
{ float: left;
width: 280px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
vertical-align: middle;
background-color: coral;
}
#footer
{
clear: both;
height: 20px;
width: 700px;
background-color: lime;
}
und der Patient (korrell.eu):
@charset "ISO-8859-1";
body {
font-family: Arial, Helvetica, sans-serif;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
.uberschrift {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: small-caps;
text-transform: none;
color: #666666;
}
.menue {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #999999;
text-decoration: none;
}
.bildunterschrift {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #666666;
text-indent:1em;
}
.text_black {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
text-decoration: none;
color: #000000;
}
.link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
text-decoration: none;
color: #999999;
}
.linkzelle {
font-family: Verdana, Arial, Helvetica, sans-serif;
cursor: hand;
}
a:link {
color:black;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:visited {
color:black;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:focus {
color:black;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
color:#666666;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:active {
color:black;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.blocks
{
display: block;
border-width:2px;
border-style:solid;
border-color:#ffffff;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 1px;
padding-left: 1px;
}
a.blocks:hover
{
border-style:solid;
border-color:#228b22;
cursor: hand;
}
div#container
{
float: left;
margin: 1em auto;
width: 900px;
height: 450px;
text-align: left;
background-color: white;
}
div#header
{
height: 10px;
background-color: white;
}
div#linksmutter
{ float: left;
margin-left: 20px;
width: 180px;
hight: 240px;
}
.links
{
float: left;
width: 180px;
height: 40px;
background-color: white;
}
div#rechtsmutter
{ float: right;
margin-right: 20px;
width: 180px;
hight: 240px;
}
.rechts
{
float: right;
width: 180px;
height: 40px;
background-color: white;
}
div#mittemutter
{ float: left;
width: 280px;
padding-left: 60px;
padding-right: 60px;
padding-top: 60px;
text-align: center;
vertical-align: middle;
background-color: white;
}
.mitteunten
{ float: left;
width: 280px;
padding-top: 10px;
padding-left: 60px;
padding-right: 60px;
text-align: center;
vertical-align: middle;
background-color: white;
}
#footer
{
clear: both;
height: 20px;
width: 900px;
background-color: white;
}
Den Seiten-head hab ich schon durchforstet und konnte nichts finden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>||| home of ************ |||</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link href="homepage_styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="http://www.korrell.eu/favicon.gif" type="image/x-icon">
<link rel="icon" href="http://www.korrell.eu/favicon.gif" type="image/x-icon">
</head>
<body>
Was mich bei der Suche nach einer Problemlösung irritiert hat: man liest ja genug von Problemen mit dem Internetexplorer, aber über eine solch fundamentale Fehlfunktion hab ich nichts gefunden. Vielleicht ist es ja wirklich nur der berühmte blinde Fleck, der mir den Blick verstellt.
Liebe Grüße, Kasimir