Hallo, habe ein kleines Berufsschulprojekt am laufen, und gestallte grade dazu die Webseite.
Soweit so gut, ich habe auf meinem Hostsystem folgende Browser installiert:
IE 7, FireFox 1.5.0.12, und Opera 9.10
und auf einer VirtuellenMaschine noch einen IE 6 mit SP2
Die oben drei genannten Browser zeigen die Darstellung der Webseite korrekt an, außer mit Abweichungen der Opera, aber das wird wohl nur an einem fehlenden float oder sontigem hängen, nicht weiter schlimm.
Sehr wüst ist jedoch die Anzeige der Seite im IE6
Habe einiges versucht um dieses grade zu biegen, jedoch weiß ich nun nicht, ob es am CSS oder am HTML Doctype liegt.
Ich habe einfach mal ausprobiert und den Doctype aus der HTML Datei genommen, und IE 7, FireFox und Opera
zeigten nun die Webseite genauso an wie im IE6 auf der VM.
Könnte ihr mir einen rat geben? Hier nochmal ein wenig Code und Screenshots im Anhang:
Danke schonmal
Gruß Thorsten
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CD-DVD Web</title>
<link rel="stylesheet" type="text/css" href="css/cdweb_style.css" />
<link rel="stylesheet" type="text/css" href="css/loginBereich.css" />
<link rel="stylesheet" type="text/css" href="css/menue.css" />
</head>
<body>
<div id="header">
<div id="statusMeldung">
<div id="loadingMessage" style="display: none;width:100%;"></div>
</div>
</div>
<div id="cdwebLogo"></div>
<div id="loginBereich">
<div id="loginBereichText">
<form id="login" name="login" action="" onSubmit="return false;">
<p>Benutzer: <input class="benutzer" id="login_benutzer" name="login_benutzer" type="text" /> </p>
<p>Passwort: <input class="passwort" id="login_passwort" name="login_passwort" type="password" /> </p>
</div>
<div id="loginBereichButton"><input class="login_button" type="button" id="login_button" name="login_button" value="LogIn" /></div>
</form>
</div>
<div id="menue">
<ul>
<li><a href="index.php"><img src="images/menue_start.gif" style="margin-left:2px;" alt="Startseite" />Startseite</a></li>
<li><a href="administration.php"><img src="images/menue_admin.gif" style="margin-left:2px;" alt="Administrationsbereich" />Administration</a></li>
<li><a href="musikarchiv.php"><img src="images/menue_musik.gif" style="margin-left:2px;" alt="Musikarchiv" />Musikarchiv</a></li>
<li><a href="filmarchiv.php"><img src="images/menue_dvd.gif" style="margin-left:2px;" alt="Filmarchiv" />Filmarchiv</a></li>
<li><a href="gaestebuch.php" ><img src="images/menue_gb.gif" style="margin-left:2px;" alt="Gaestebuch" />Gästebuch</a></li>
</ul>
</div>
<div id="seitentitel">
<img class="titelbild" src="images/startseite.gif" alt="Startseite" /> <p class="titel">Startseite</p>
</div>
<div id="hauptBereich">
fg sgdfgsfd gdsfg dsf
</div>
<div id="footer">© 2007 by Thorsten Steinberg</div>
</body>
</html>
cdweb_style.css
Code:
*{
margin:0px;
padding:0px;
}
html
{
height:100%;
width:100%;
margin:0px;
padding:0px;
}
body
{
margin:0px;
padding:0px;
width:100%;
height:100%;
background-color: #666666;
}
#statusMeldung
{
position: absolute;
padding:0px;
top: 10px;
left:280px;
height: 28px;
width: 525px;
margin:0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
color:#ffffff;
z-index: 4;
}
#statusMeldung p
{
margin-top: 5px;
margin-left: 33px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9pt;
color:#ffffff;
}
#statusMeldung img
{
float:left;
margin:0px;
padding:0px;
}
#cdwebLogo
{
position:absolute;
top:2px;
left:0px;
width:248px;
height:103px;
background-image: url('../images/cdWebLogoLeft.jpg');
background-repeat: no-repeat;
z-index:1;
}
#hauptBereich
{
position: absolute;
overflow: auto;
left:21px;
right:85px;
top: 138px;
bottom: 30px;
width: auto;
height: auto;
border-right:1px solid #000000;
background-color: #ffffcc;
background-image: url('../images/border_left.jpg');
background-repeat: repeat-y;
margin-top:0px;
padding-top:4px;
padding-left:20px;
padding-right:20px;
z-index:0;
}
#footer
{
position:absolute;
text-align:right;
width: auto;
bottom:11px;
height: 19px;
background-color: #ffffcc;
border-right:1px solid #000000;
left:21px;
right:85px;
background-image: url('../images/footer.jpg');
background-repeat: no-repeat;
padding-left:20px;
padding-right:20px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 7pt;
font-weight: bold;
}
#seitentitel .titel{
display:block;
padding-left:8px;
margin:0px;
text-align:left;
color: #000000;
border-bottom: 1px solid #000000;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 16pt;
font-weight: bold;
}
#seitentitel img.titelbild{
float:left;
margin-left: 10px;
margin-right: 8px;
margin-top: 3px;
margin-bottom: 0px;
padding: 0px;
border:0px;
}
#seitentitel
{
position:absolute;
top: 105px;
left:21px;
right:85px;
height:auto;
border-right:1px solid #000000;
background-color: #ffffcc;
background-image: url('../images/border_left.jpg');
background-repeat: repeat-y;
margin-top:0px;
padding-left:20px;
padding-right:20px;
z-index:5;
}
menue.css
Code:
/* CSS-Style für die Menüs */
/* Stylesheets für das Hauptmenü der Seite */
#menue
{
position: absolute;
float:left;
padding:0px;
right:85px;
left:242px;
width: auto;
height:60px;
top: 45px;
border-right:1px solid #000000;
background-color: #ffffcc;
background-image: url('../images/border_top.jpg');
background-repeat: repeat-x;
z-index:2;
}
#menue img{
float:left;
margin-top: 0px;
margin-right: 4px;
margin-bottom:0px;
border:0px;
}
#menue ul{
margin-top:12px;
margin-left:0px;
padding: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10pt;
list-style-type: none;
height: 100%;
}
#menue ul li{
display: block;
float: left;
text-align: left;
margin-left:10px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#menue ul li a{
display: block;
margin-top:0px;
border-top: 4px solid #cccccc;
height: auto;
width: 130px;
color:#000000;
padding-top:2px;
text-align:center;
}
#menue ul li a:link, a:visited{
color: #000000;
text-decoration: none;
}
#menue ul li a:hover{
border-top: 4px solid #666666;
color: #000000;
font-weight:normal;
text-decoration: none;
}
und die loginBereich.css
Code:
#loginBereich
{
position:absolute;
right:15px;
top:10px;
width:223px;
height:92px;
background-image: url('../images/loginBereich.jpg');
background-repeat: no-repeat;
z-index:3;
}
#loginBereichText
{
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9pt;
margin-left:12px;
margin-top:10px;
}
#loginBereich input.benutzer
{
margin-top:10px;
background-image: url('../images/user.gif');
background-position:right;
background-repeat: no-repeat;
}
#loginBereich input.passwort
{
margin-top:2px;
margin-left: -2px;
background-image: url('../images/key.gif');
background-position:right;
background-repeat: no-repeat;
}
#loginBereich input.benutzer, .passwort
{
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 8pt;
border: 1px solid #000000;
padding-top: 2px;
padding-left: 2px;
width: 130px;
height: 15px;
background-color: #ffffff;
}
#loginBereichButton input.login_button
{
background-image: url('../images/go.gif');
}
#loginBereichButton input.logout_button
{
background-image: url('../images/menue_logout.gif');
}
#loginBereichButton input.logout_button, .login_button
{
float:left;
width: 100px;
height: 21px;
border: 1px solid #000000;
background-color: #cccccc;
background-position:1px 1px;
background-repeat: no-repeat;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9pt;
font-weight: bold;
}
#loginBereichButton
{
position:absolute;
right:10px;
bottom: 6px;
width: 100px;
height: 21px;
}