Fehler im IE und Opera - Firefox OK @ tutorials.de: Tutorials, Forum & Hilfe

kakapopo · 26.07.06 13:53

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-Code:

<!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>
<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>
</head>
<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

gamba · 26.07.06 14:12

Kenn mich zwar nicht mit den Unterschieden der einzelnen Browser aus, aber ich habe deine Seite mal mit Firefox geöffnet und mir fiel sofort das Textfeld (Email) über dem Menüpunkt "Rings" auf. Von daher weiß ich jetzt nicht, was für Fehler bei den anderen Browsern zu erwarten ist. Ich vermute mal,dass das Textfeld da auch im Firefox nicht hinsoll.

Sorry vllt. schreibst nochmal ne genaue Fehlerbeschreibung hinzu, damit man nicht die einzelnen Fehler suchen muss.

Gruß

***deepthroat*** · 26.07.06 14:16

Hi.

Erstmal sind noch ein paar kleinere Fehler drin:

Zitat von kakapopo

Code css:

1
2
3

#footer a:link; {
color:#80072e;
}

Da ist irgendwie ein Semikolon reingerutscht was da nicht hingehört. Der Firefox ignoriert daher diesen Regelsatz.

<style> Tags sollten innerhalb vom <head> Element stehen, du hast sie danach unterhalb des <html> Elements.

Dann solltest du alle Spezialzeichen wie das Ampersand bei "Necklaces&Pendants" als "Character Entities" - also & - schreiben.

Vielleicht hilft das ja schon etwas wenn du diese Fehler korrigierst?

Gruß

kakapopo · 26.07.06 14:21

Hy,

das Semikolon kommt doch eigentlich dorthin oder?

Es klappt ja auch im Firefox.

Schaut es euch bitte mal im IE an, da ist es schlimm

***deepthroat*** · 26.07.06 14:27

Zitat von kakapopo

Hy,

das Semikolon kommt doch eigentlich dorthin oder?

Hinter a:link darf kein Semikolon stehen.

Zitat von kakapopo

Es klappt ja auch im Firefox.

Schaut es euch bitte mal im IE an, da ist es schlimm

Eventuell kommt der Firefox einfach nur besser mit den Fehlern in der Seite klar als die anderen Browser. Wenn eine Seite nicht korrekt ist kann man nicht erwarten das sie in irgendeiner Form richtig dargestellt wird.

Verbessere bitte erstmal die Fehler, dann schau ich mir die Seite genau an. Solange da solch offensichtliche Fehler drin sind mach ich mir nicht die Mühe.

Gruß

kakapopo · 26.07.06 14:30

Ok alles verbessert

HTML-Code:

<!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>
<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>
</head>
<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>

***deepthroat*** · 26.07.06 16:11

Du verwendest absolute Positionierung. Der IE berechnet da einiges falsch wenn man keine Positionsangabe macht. Ein Workaround ist einfach das absolut positionierte Element in einen relativ positionierten umgebenden Block zu stecken und explizit die top und left Eigenschaft auf 0 zu setzen.

HTML-Code:

<div style="position:relative"><img style="top:0; left:0" class="bestsellers" ... </div>

Gruß

kakapopo · 26.07.06 17:29

Hy,

Ich habe es verändert.

Doch es ist jetzt ganz oben in der Ecke :|

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-Code:

<!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

Maik · 06.08.06 20:36

Warum legst du für das body-Element noch zusätzlich einen ID- und Klassen-Selektor an, und beschneidest die Höhe auf 200 Pixel?

Von welchem blauen Balken auf weißem Hintergrund sprichst du überhaupt?

Zudem solltest du den toten Link aus deinem Beitrag entfernen.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Webseitendarstellung Opera Firefox

Firefox, IE und Opera

Firefox+IE gut, Opera schlecht

opera und firefox problem

SVG Zugriffsproblem über Firefox und Opera

E-Mail:

Abonnieren Abbestellen