Hallo miteinander
Ich habe folgendes Problem: meine mit xhtml und css erstellte Seite ist im Firefox gut, im Opera erste Probleme und im IE 6.0 nur Probleme, zb Menuleiste oben im IE fehlt gelbes Band und schwarze Linie stimmmt nicht mehr, die beiden Bilder sind im IE verschwunden und verdecken den Text, es muss etwas mit meinen Positionierungen zu tun haben, es sollte so aussehen wie im Firefox.
Nachstehend der code:
Code <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Blumen Design - Nicht Alltägliches für den Alltag.</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="robots" content="index" /> <meta name="robots" content="follows" /> <meta name="language" content="deutsch" /> <meta name="Keywords" content="Blumen Design, Paula Jost, Fleurop, Allflora, Binningen, Basel, Basel und Umgebung, Bottmingen, Therwil, Biel-Benken, Oberwil, Allschwil, Schönenbuch, Leimental, Blumen, Schnittblumen, Pflanzen, Floristik, Blumenstrauss, Rosen, Rosenstrauss, Sträusse, Gesteck, Hauslieferdienst, Zustelldienst, Lieferung, Lieferdienst, Events, Hochzeit, Liebeserklärung, Brautstrauss, Hochzeitsauto, Kirchendekoration, Festtafel, Haarschmuck, Dekoration, Dekorationsobjekt, Tischdekoration, Trauerkranz, Trauerkarte, Trauerspenden, Trauer, Gratulation, Geburtstag, Feier, Weihnachten, Ostern, Valentinstag, Muttertag, Advent, Geschenk, Geschenkideen, Accessoires, Jubiläum, Firmenkunden, Sympathieträger, Arrangements, Visitenkarte, Abonnement, Bürobegrünung, Sujets, Blatt, Blüte, natürlich, Gestaltungsmittel, saisonal, Öffnungszeiten, Bouquet" /> <meta name="description" content="Blumen Design ist eine kreative Blumenwerkstatt, die es versteht natürliche Werkstoffe mit tollen Accessoires zu tollen Sträussen, Bouquets oder Arrangements zu vermählen. Freude und fachliche Kompetenz zeichnet das gesamte Team aus." /> <meta name="distribution" content="global" /> <meta name="robots" content="all" /> <meta name="revisit-after" content="10 days" /> <link rel="stylesheet" type="text/css" href="bd.css" /> <script language='javascript' src='http://127.0.0.1:1032/js.cgi?pca&r=27529' type="[XHTML 1.0 transitional]"></script> </head> <body> <!-- Container oder Boxdefinition --> <div id="container"> <!-- Titelzeile mit Logo --> <div id="title"> <a href="index2.html"><img src="Logo_Banner_klein2.gif" alt="Logo Blumen Design" border="0" /></a></div> <!-- Menüleiste --> <div id="menu"> <a class="menu" href="#">Portrait</a> | <a class="menu" href="#">Inspirationen</a> | <a class="menu" href="#">Neue Werke</a> | <a class="menu" href="#">Angebot</a> | <a class="menu" href="#">Referenzen</a> | <a class="menu" href="#">Kontakt</a> | <a class="menu" href="#">Links</a> </div> <!-- Inhalt --> <div id="content"> <!-- Es folgt ein script zur Ausgabe des aktuellen Datums--> <p class="datum"> <script language="JavaScript1.2" type="text/javascript"> function Datum() { var now = new Date(); var TageLang = new Array ("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); var MonateLang = new Array ("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"); var date = now.getDate(); function VierZeichen(number) { return (number < 1000) ? number + 1900 : number; } heute = TageLang[now.getDay()]+ ", " + date + ". " + MonateLang[now.getMonth()] + " " +(VierZeichen(now.getYear())) ; document.write("" +heute); } Datum(); </script> </p> <p> </p> <h1>Blumen und mehr... </h1> <p> </p> <p class="kurztext">Hier erleben Sie in kurzer Zeit die ganze Pracht der Natur...</p> <p class="kurztext">Unsere Homepage wird in den nächsten Wochen laufend ausgebaut. Einzelne Links funktioneren noch nicht, doch kommen Sie in den nächsten Wochen zurück und entdecken Sie Neues... </p> <div id="media"><img src="HauptbildHome.jpg" width="250" height="190" alt="Rosen" /></div> <div id="media2"><img src="Tulpenstrauss.jpg" width="250" height="190" alt="Tulpenstrauss" /> </div> </div> <!-- Subcontent rechts für Box und Submenu --> <div id="subcontent"> <div class="box"><strong>Herzlich willkommen bei Blumen Design!</strong> <br /> <br />Wir sind ein junges und aktives Team, das sich jeden Tag darauf freut, für Sie tätig zu werden... <br />In unserem neuen Internet-Auftritt finden Sie einen kurzen Abriss unseres Schaffens, ein Besuch bei uns im Laden ist aber noch spannender! Bis bald...</div> <h2>Untermenu</h2> <ul class="untermenublock"> <li><a href="#">Menu option 1</a></li> <li><a href="#">Menu option 2</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> </ul></li> <li><a href="#">Menu option 3</a></li> <li><a href="#">Menu option 4</a></li> </ul> <p> </p> </div> <!-- Footer --> <div id="footer"> <p align="center">Copyright © 2006 Blumen Design</p> <div align="right"><span class="impressum "><a href="impressum.html">Impressum </a> | <a href="www.flyfisherman.ch">created by </a> </span></div> </div> </div> <script language='javascript' type="[XHTML 1.0 transitional]">postamble();</script> </body> </html> /* CSS Document für Blumen Design Relaunch Mai 2006 */
/* Body und Tag Infos */
body { background-color: #CCCC99;
color: #996600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/* Hack für Zentrierung wegen Int Explorer */
text-align: center;
}
h1 { font-size:18px;
color:#996600;
margin:0px; }
h2 { font-size:14px;
color:#996600; }
h3 { font-size:12px;
color:#996600; }
p { margin-top:0px;
color: #996600;
font-size: 10px; }
a:link, a:visited, a:active, a:hover
{
text-decoration:none;
font-weight:bold;
color:#996600;
font-size:9px;
}
a:active, a:hover
{
color:#FF3333;
font-size: 9px;
}
/* Container oder Boxdefinition */
#container {
background-color: #FFFFCC;
width: 760px;
margin:0px auto;
padding: 0px 0;
text-align: left;
}
/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{
color:#996600;
text-decoration:none;
}
a.menu:active, a.menu:hover
{
color:#FF3333;
}
/* Die Titelzeile mit Logo */
#title {
height:80px;
padding:5px;
text-align:center;
background-color:#996600;
}
/* Das Menü */
#menu {
border-top:1px solid #000000;
color:#996600;
background-color:#FFCC33;
text-align:center;
padding:10px 0px;
}
/* Der Inhalt im Content */
#content {
border-top:1px solid #000000;
background-color:#FFFFCC;
width: 500px;
float: left;
padding:5px 30px 10px 10px;
color:#000000;
position: absolute;
}
p.datum {
color: #996600;
font-size: 10px;
}
p.kurztext {
padding: 0 0 0 25px;
}
/* Media-Bereich für Fotos */
#media {
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
top: 200px;
left: 36px;
background-color: #FFFFCC;
width: 250px;
height: 190px;
float: left;
border: 1px solid #996600;
}
#media2 {
position: absolute;
bottom: -325px;
right: 50px;
background-color: #FFFFCC;
width: 250px;
height: 190px;
float: left;
border: 1px solid #996600;
}
/* Subcontent für Box und Untermenu */
#subcontent {
float: right;
width: 200px;
border-top:1px solid #000000;
background-color: #FFFFCC;
padding: 40px 10px 10px 10px;
line-height:1.4em;
}
.box {
margin: 20px 10px 20px 10px;
padding: 10px;
border: 1px solid #996600;
background-color: #FFFFCC;
color: #996600;
line-height: 1.5em;
}
#subcontent h2{
padding: 10px;
display:block;
margin:0 0 15px 0;
font-size:1.6em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#996600;
background-color:inherit;
}
#subcontent p{margin:0 0 16px 0; font-size:0.9em;}
/**************** Stile für Untermenublock ****************/
.untermenublock{margin:0 0 20px 8px; font-size:0.9em;}
.untermenublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
.untermenublock li a{font-weight:bold; text-decoration:none;}
.untermenublock li a:hover{text-decoration:none;}
.untermenublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.untermenublock li ul li{margin-bottom:0;}
.untermenublock li ul a{font-weight:normal;}
/* Footer */
#footer {
clear: both;
background-color: #ffcc33;
width: 760px;
border-top: 1px solid #000000;
color: #996600;
font-size: 70%;
}
#footer p {
margin: 0em 0em 0.5em 0.5em;
padding: 2px;
}
#footer impressum {
float: right;
font-size: 9px;
text-decoration: none;
margin-top: 0em;
}
Wer kann mir helfen?
Danke und Gruss
flyfisherman
flyfisherman
<url>http://www.flyfisherman.ch</url>