Fehler im IE und Opera - Firefox OK

sucka · 26 Juli 2006

Hallo,

ich habe meine erste Homepage mit Hilfe von CSS gemacht. Sieht gut auf dem Firefox Browser aus, doch leider macht der IE große und der Opera kleine Probleme.

Hier erstmal der Link: http://kakapopo.ka.funpic.de/jewelry/index.html

Hier der Code( ist noch etwas ungeordnet):

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Goldsmith Jewelry</title>
</head>
<style type="text/css">
#body {
font: 100.01% sans-serif;
background-color:white;
}
#container {
width: 645px;
text-align: left;
margin: 0 auto;
background-color: white;
}
#header {
width: 745px;
height: 77px;
display: block;
background-repeat: no-repeat;
background-image:url(img/header.gif);
margin-top: 0;
font-size: 12px;
font-weight: bold;
}
#topnavigation {
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  font-size: 15px;
  background-image:url(img/navigation.gif);
  display:block;
  width:645px;
  height:44px;
}
img.bigimage{
border: 0px solid #333333;
}
img.picsright1{
border: 0px solid #333333;
position:absolute;
margin:auto auto auto 1px;
}
img.picsright2{
border: 0px solid #333333;
position:absolute;
margin:57px auto auto 1px;
}
img.picsright3{
border: 0px solid #333333;
position:absolute;
margin:114px auto auto 1px;
}
img.picsright4{
border: 0px solid #333333;
position:absolute;
margin:171px auto auto 1px;
}
img.bestsellers {
width: 410px;
border: 0px solid #333333;
position:absolute;
float:left;
margin: 1px 1px 1px 0;
}
.topnavi {
padding-top: 6px;
display:block;
color:#FFFFFF;
}
a:visited {
color:#FFFFFF;
text-decoration:none;
}
a:hover {
text-decoration:none;
color:#80072e;
}
a:link {
color:#FFFFFF;
text-decoration:none;
}
#newsletter {
background-image:url(img/newsletterspace.gif);
width: 234px;
height: 32px;
display:block;
float:right;
margin-top: 1px; 
}
a:hover.aktivlink {
color: #ff8800;
}
#bigimage {
width:410px;
height: 226px;
display:block;
margin-top:1px;
}
.product123 {
width:135.7px;
display:inline;
margin: 0 1px 1px 0;
}
.product456 {
width:135.7px;
display:inline;
margin: 1px 1px 1px 0;
}

#bestsellers {
width: 410px;
display:block;
margin-top: 34px;
}
a:hover.bigimage {
text-decoration:none;
}
#block{
width: 235px;
height: 235px;
display: block;
background-color:#80072e;
position:absolute;
top: 390px;
right: 181px;
color:#FFFFFF;
text-align:center;
font-weight:bold;
}
#footer {
text-align:center;
color:#80072e;
font-size:12px;
padding-top: 10px;
}
#footer a:visited {
color:#80072e;
}
#footer a:link; {
color:#80072e;
}
#footer a:hover {
text-decoration:underline;
}
#search {
color:#80072e;
background-color:white;
border: 0;
margin-left: 18px;
margin-top: 7px;
}
.submit {
background-color:#ff8800;
color: white;
border: 0;
font-weight:bold;
margin-left: 0;
}
</style>


<body>
<div id="container">
   <div id="header"></div>
   <div id="topnavigation"><span class="topnavi">&nbsp; &nbsp; <a href="index.html" class="aktivlink">&nbsp;&nbsp; Home &nbsp; &nbsp;</a> &nbsp; &nbsp; &nbsp; &nbsp; <a href="index.html">&nbsp;&nbsp;Bridal &nbsp; &nbsp;</a> &nbsp; &nbsp; &nbsp; <a href="index.html">&nbsp;  &nbsp;Jewelry &nbsp; &nbsp;</a> &nbsp; &nbsp; &nbsp; &nbsp;<a href="index.html">&nbsp;&nbsp; Gifts</a></span></div>
   <div id="bigimage"><a href="index.html"><img class="bigimage" src="img/bigimage.gif" alt="Special Offer"/></a><a href="index.html"><img class="picsright1" src="img/earrings.gif" alt="Earrings" /></a><a href="index.html"><img class="picsright2" src="img/necklaces&pendants.gif" alt="Necklaces&Pendants" /></a><a href="index.html"><img class="picsright3" src="img/bracelets.gif" alt="Bracelets" /></a><a href="index.html"><img class="picsright4" src="img/rings.gif" alt="Rings" /></a>
   <img class="bestsellers" src="img/ourbestsellersbar.gif" alt="Best Sellers" />
   </div>
   <div id="newsletter"><form action="index.html" method="post">
   <input type="text" name="search" id="search" size="20" maxlength="40" value="&nbsp;Enter your Mail here" />
   <input class="submit" type="submit" name="go" value="Send"/>
   </form>
   </div>
   <div id="bestsellers"><img class="product123" src="img/productimage.gif" alt="Product" /><img class="product123" src="img/productimage.gif" alt="Product" /><img class="product123" src="img/productimage.gif" alt="Product" /><img class="product456" src="img/productimage.gif" alt="Product" /><img class="product456" src="img/productimage.gif" alt="Product" /><img class="product456" src="img/productimage.gif" alt="Product" /></div>
   <div id="block">Whatever you want goes here</div>
   <div id="footer"><a href="index.html">About Us</a> | <a href="index.html">Privacy Policy</a> | <a href="index.html">Shipping &amp; Returns</a> | <a href="index.html">Site Map</a> | <a href="index.html">Contact Us</a> <br />
   Copyright 2006 Goldsmith Jewelry Shoppe<br /> <br /><img src="img/payment.gif" alt="Payments" /></div>
</div>   
</body>
</html>

Könntet ihr mir vielleicht sagen, wie ich die Fehler beseitigen kann?

danke

mfg

sucka · 26 Juli 2006

Hallo,

danke ich werde das ein andere Mal versuchen. Das ist kein Template.

EINE ANDERE FRAGE:

Ich habe mich gerade an eine neue Page gemacht. Ich habe eine Frage. Ich will einen weißen Hintergrund mit deinem blauen Balken, der quer verläuft.

Hier könnt ihr es sehen: http://kakapopo.ka.funpic.de/huette/index.html

Doch leider läßt sich der Balken nicht verschieben, ich möchte ihn ca. in der Mitte haben, ohne dass er den gesamten Content verschiebt. Und er soll immer im Hintergrund sein und nichts bedecken.

Ich habe es so versucht:

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Your Hotel Page</title>
</head>
<style type="text/css">
body {
font: 100.01% Verdana;
background-color:#FFFFFF;
color:#333333;
}
#body {
width:100%;
}
#container {
width: 746px;
text-align:left;
margin: 0 auto;
}
.bg {
width: 100%;
height: 200px;;
background-color:#283140;
}
#header {
background-image:url(img/header.gif);
width: 746px;
height: 89px;
display:block;
margin-top: 15px;
}
#navigationtop {
width: 746px;
height: 35px;
background-image:url(img/navigationoben.gif);
font-weight:bold;
font-size:12px;
color:white;
display:block;
}
.topnavi a:visited   {
color:#FFFFFF;
text-decoration: none;
}
.topnavi a:link {
color:#FFFFFF;
text-decoration:none;
}
.topnavi a:hover  {
color: white;
text-decoration:underline;
}
.topnavi {
padding-top: 7px;
padding-left: 215px;
display:block;
}
#navigationleft {
display:block;
width:200px;
height: 186px;
background-color:#FFFFFF;
background-repeat:no-repeat;
font-size:11px;
line-height: 20px;
}
ul {
list-style-image:url(img/listspace.gif);
}
</style>
<body>
<div class="bg" id="body">
<div id="container">
   <div id="header"></div>
   <div id="navigationtop"><span class="topnavi"><a href="index.html">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Rooms &amp; Rates</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Region &amp; Local Attractions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">About Us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">Contact Us</a></span></div>
   <div id="navigationleft">
      <ul>
         <li>Individual Room Details</li>
         <li>Special Deals</li>
         <li>Meals &amp; Menus</li>
         <li>Terms &amp; Conditions</li>
         <li>Attractions &amp; Pastimes</li>
         <li>Photo Gallery</li>
         <li>Links</li>
         <li>References &amp; Testimonials</li>
      </ul>     
   </div>
</div>   
</body>
</html>

Doch leider läßt sich der Balken, ohne dass sich der content mit verschiebt, nicht bewegen.

Habt ihr eine Lösung?

Und noch etwas: Die linke Navigation ist soweit vom oberen Teil entfernt. Wisst ihr, wie ich das ändern kann? Im IE ist sie sehr nah oben am Header.

Danke

mfg

flapo · 27 Juli 2006

Hat wahrscheinlich nichts mit der Problemlösung zu tun, aber:
Die Stylesheets kommen in den head und nicht zwischen </head> und <body>.

Fehler im IE und Opera - Firefox OK

sucka

Neues Mitglied

sucka

Neues Mitglied

flapo

Neues Mitglied

Neueste Beiträge