schnaegg
14.10.2006, 19:19:06
Hallo ich habe das problem, dass mir der Internetexplorer nicht das selbe anzeigt wie der Mozilla Firefox Browser. Warscheinlich liegt dies an meinen css Programmierkentnissen und hoffe dieses Thema befindet sich hier am richtigen Ort.
Das Stylesheet sieht folgendermassen aus:
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: orange;
background-color: black;
}
#seite
{
margin: 1em auto;
width: 650px;
text-align: center;
background-color: #99CCFF;
border: 1px solid black;
}
#kopf
{
height: 110px;
text-align: center;
background-color: black;
background-image: url(kopf/adrian_braun.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#hauptteil
{
margin-top: 1em;
margin-right: 1em;
margin-left: 1em;
margin-bottom: 1em;
float: right;
width: 470px;
background-color: #99CCFF;
}
#menue
{
width: 149px;
text-align: left;
border-right: 2px solid black;
border-bottom: 1px collapse black;
margin-bottom: 25em;
}
#menue ul
{
margin: 0; padding: 0;
list-style-type: none;
text-indent: 20px;letter-spacing: 1px;
}
#menue li
{
list-style-image: none;
margin:0;
border-bottom: 1px solid black;
}
#menue a
{
display: block;
width: 150px;
height: 22px;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
}
#menue a:link, #menue a:visited
{
background: url(menue/menue.gif);
color: #CC6600;
text-decoration: none;
padding-bottom: 0;
}
#menue li a:hover
{
background: url(menue/menue.gif)
/* hier wird das Image verschoben */
0px -22px no-repeat;
color: #fff;
text-decoration: none;}
#menue li a#current
{
background: url(menue/menue.gif)
/* hier wird das Image verschoben */
0px -22px no-repeat;
color: #fff;
text-decoration: none;
}
#fusszeile
{
clear: both;
height: 20px;
background-color: #99CCFF;
}
Und die html-Datei so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>..::ADRIAN BRAUN::..</title>
</head>
<body>
<div id="seite">
<div id="kopf"></div>
<div id="hauptteil"><img src='home/sorry.gif'></div>
<div id="menue">
<div id="navcontainer">
<ul>
<li><a href="index.php" id="current">Home</a></li>
<li><a href="galerie.php">Galerie</a></li>
<li><a href="gaestebuch.php">Gästebuch</a></li>
<li><a href="links.php">Links / Banner</a></li>
<li><a href="intern.php">Intern</a></li>
</ul>
</div>
</div>
<div id="fusszeile">fusszeile</div>
</div>
</body>
</html>
ansehen kann man sich das ganze Phänomen unter http://adrianbraun.ad.funpic.de/homepagetest/index.php
Das Stylesheet sieht folgendermassen aus:
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: orange;
background-color: black;
}
#seite
{
margin: 1em auto;
width: 650px;
text-align: center;
background-color: #99CCFF;
border: 1px solid black;
}
#kopf
{
height: 110px;
text-align: center;
background-color: black;
background-image: url(kopf/adrian_braun.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#hauptteil
{
margin-top: 1em;
margin-right: 1em;
margin-left: 1em;
margin-bottom: 1em;
float: right;
width: 470px;
background-color: #99CCFF;
}
#menue
{
width: 149px;
text-align: left;
border-right: 2px solid black;
border-bottom: 1px collapse black;
margin-bottom: 25em;
}
#menue ul
{
margin: 0; padding: 0;
list-style-type: none;
text-indent: 20px;letter-spacing: 1px;
}
#menue li
{
list-style-image: none;
margin:0;
border-bottom: 1px solid black;
}
#menue a
{
display: block;
width: 150px;
height: 22px;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
}
#menue a:link, #menue a:visited
{
background: url(menue/menue.gif);
color: #CC6600;
text-decoration: none;
padding-bottom: 0;
}
#menue li a:hover
{
background: url(menue/menue.gif)
/* hier wird das Image verschoben */
0px -22px no-repeat;
color: #fff;
text-decoration: none;}
#menue li a#current
{
background: url(menue/menue.gif)
/* hier wird das Image verschoben */
0px -22px no-repeat;
color: #fff;
text-decoration: none;
}
#fusszeile
{
clear: both;
height: 20px;
background-color: #99CCFF;
}
Und die html-Datei so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>..::ADRIAN BRAUN::..</title>
</head>
<body>
<div id="seite">
<div id="kopf"></div>
<div id="hauptteil"><img src='home/sorry.gif'></div>
<div id="menue">
<div id="navcontainer">
<ul>
<li><a href="index.php" id="current">Home</a></li>
<li><a href="galerie.php">Galerie</a></li>
<li><a href="gaestebuch.php">Gästebuch</a></li>
<li><a href="links.php">Links / Banner</a></li>
<li><a href="intern.php">Intern</a></li>
</ul>
</div>
</div>
<div id="fusszeile">fusszeile</div>
</div>
</body>
</html>
ansehen kann man sich das ganze Phänomen unter http://adrianbraun.ad.funpic.de/homepagetest/index.php