• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Web darstellunng bei IE und Mozilla unterschiedlich

Y

YETHH

Neues Mitglied
Hallo
Ich bin anfänger bei HTML und auch ganz neue hier.
ich habe ein Problem bei meinem Homepage
bei meinem IE wird sie angezeigt, wie sie sein soll. Bei Mozilla aber ziemlich durcheinander,Navigation Menü ist auf dem Logo, Die Inhalt ist nicht unter der navigation menü sondern neben der menü.
Was mache ich hier falsch?
Folgende sind meine css und html code.
Ich bin für jede Hilfe ziemlich Dankbar

CSS:
Code: 
body {
background-color :#660000;
background-image:url("img/Logo.jpg");
background-repeat:repeat-x;
}
h1
{
font family :arial,verdana,sans-serif;
font-weight:bold;
font-size:30px;
color :#ffffff
}
h2
{
font family : "Times New Roman",serif;
font-weight:bold;
font-size:25px;
color :#ffffff
}
h3
{
font family : "Times New Roman",serif;
font-weight:bold;
font-size:20px;
color :#ffffff
}
h4
{
font family : "Times New Roman",serif;
font-weight:bold;
font-size:19px;
color :#ffffff
}
p
{
font family :arial,"Times New Roman",verdana,sans-serif;
font-size:17px;
color :#ffffff
}
tr
{
color :#ffffff
}
/* Horizontal menu */
#mainmenu {float:left; margin-left:-0.5%; margin-bottom:0;height:35px; margin-top:101px; background:RGB(87,87,87) ; width =102%; }
#mainmenu ul {font-size:16px; margin:0; padding:0;}
#mainmenu li {float:left; height:25px; list-style:none; margin:0; padding:0; }
#mainmenu a {border-right:1% solid #b0b0b0; color:#660000; display:block; font-size:0.7em; padding:11px 10px 10px; text-transform:uppercase; }
#mainmenu a:hover {background:#f0f0f0 url(img/hover.jpg) top left repeat-x; color:#505050; text-decoration:none;}
#mainmenu a.current {background:#f0f0f0 url(img/hover.jpg) top left repeat-x; color:#505050; text-decoration:none;}
#container{clear:both; font-size:0.9em; padding:0;
}
#leftside{float:left; margin-right:10px; margin:0; margin-top:30px;padding:0 10px 10px; height:100%; width:15%;}
#leftside a:hover {background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x; color:#505050; text-decoration:none;}
#leftside a.current {background:#f0f0f0 url(img/menuhover.jpg) top left repeat-x; color:#505050; text-decoration:none;}
#leftside p {font-size:0.6em;}
.linklist {list-style:none; margin:0 0 16px 10px; padding:0;}
.linklist li {margin-bottom:0.7em;}
/* Sidebar menu */
.nav {background:#e8e9ea; border:1px solid #b0b0b0; color:#606060; display:block; margin-top:8px; padding:5px 4px 4px 10px; position:relative; text-transform:uppercase; width:150px;}
.nav:hover,.active {background:#f8f9fa; border:1px solid #909090; color:#303030; text-decoration:none;}
.sub {font-size:1em; letter-spacing:1px; margin:3px 0 2px 10px; padding:4px 2px 2px 8px; width:125px;}
#Mitte{float:center; margin:0; padding:0 10px 5px ; height:100%; width:85%;margin-left:15%; margin-top:20px; }
#LeftBI{float:center; margin:0; padding:0 10px 10px; height:100%; width:80%;margin-left:3%; margin-top:5px;}
-------
HTML:


HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
 <meta name="keywords" content="" />
 <meta name="author" content="" />
 <meta name="Language" content="German, de, deutsch" />
 <link rel = "stylesheet" type = "text/css" href = "style.css"/>
 <title>XYZ</title>
</head>
<body>
<div id="container">
<div id="mainmenu">
  <ul>
   <li><a href="index.html">Home</a></li>
   <li><a class="current" href="Speisekarten.html">Speisekarten</a></li>
   <li><a href="Aktion.html">Aktion</a></li>
   <li><a href="Event.html">Event</a></li>
   <li><a href="Happyhour.html">Happy Hour</a></li>
 
  </ul>
</div>
<div id="leftside">
   <h3>Menu </h3>
   <p>
   <a class="nav active" href="Brunch.html">Brunch</a><span class="hide"> </span>
   <a class="nav active" href="Fruehstueck.html">Fr&uuml;hst&uuml;ck</a><span class="hide">  </span>
   <a class="nav active" href="Hauptgericht.html">Hauptgerichte</a><span class="hide">  </span>
   <a class="nav active" href="Suppe.html">Suppe</a><span class="hide"> </span>
   <a class="nav active" href="Salat.html">Salat</a><span class="hide">  </span>
   <a class="nav active" href="Dessert.html">Dessert</a><span class="hide">  </span>
 
   </p>
 
</div>
<div id="Mitte">
  <table border = "2" cellspacing = "0"  ruleS = "None" >
  <colgroup>
  <col width = "40%"  align = "left"> <col width = "5%" align = "right"> 
  <h3>DESSERT</h3>
  <valign ="top"> 
 
  <th bgcolor="#ad6822" ><b>Tiramisu</b></th> <th bgcolor="#ad6822" ><b> 3,50&#128</b></th> 
  <tr>
  <td><em>Hausgemacht</em> <td> 
  </tr> 
 
  <tr>
  <th bgcolor="#ad6822" ><b>Panna Cotta </b></th> <th bgcolor="#ad6822" ><b> 3,50&#128</b></th> 
  </tr>
  <tr>
  <td><em>Hausgemacht</em> <td> 
  </tr> 
  <tr>
  <th bgcolor="#ad6822" ><b>Apfelkuchen </b></th> <th bgcolor="#ad6822" ><b> 2,40&#128</b></th> 
  </tr>
  <tr>
  <td><em>Hausgemacht</em> <td> 
  </tr>
  <tr>
  <th bgcolor="#ad6822" ><b>Apfelstrudel </b></th> <th bgcolor="#ad6822" ><b> 3,50&#128</b></th> 
  </tr>
  <tr>
  <td><em>warmer Apfelstrudel mit Vanilleeis und Sahne</em> <td> 
  </tr>
  <tr>
  <th bgcolor="#ad6822" ><b>Eis mit Fr&uuml;chten </b></th> <th bgcolor="#ad6822" ><b> 3,90&#128</b></th> 
  </tr>
  <tr>
  <td><em>wahlweise Schokolade oder Vanilleeis</em> <td> 
  </tr>
 
 <div class="clearingdiv">&nbsp;</div>
</div>  
</div>
 </body>
 
Werbung:
ein link zu deiner Seite wäre vill auch sehr hilfreich um dir weiter helfen zu können. Bei IE und Firefox gibt es oftmals noch unterschiede in der Anzeige der verschiedenen Elemente schau dir mal die Seite hier genau an ( http://de.selfhtml.org/css/eigenschaften/positionierung.htm ) dort siehst du nach jeder Erklärung für welche Version des jeweiligen Browsers die Befehle ausführbar sind und bei welchem nicht.
 
Dem Quellcode fehlt ein Doctype. Der kann entscheidend für eine saubere und einheitliche Darstellung sein.
 
Werbung:
Nebst dem DOCTYPE solltest du immer im CSS als erstes allen Tags die Browser Standard Margin und Paddings auf 0 setzen, da diese sich voneinander unterscheiden.

Und zwar so:

Code: 
* {
margin:0;
padding:0;
}

Mit * sprichst du alle Tags an.
 
Danke für eure Hinweise.
Das link hat mir geholfen um meine position Fehler zu beheben.
Ich habe aber noch zusätzlich beim darstellung umlaute probleme bei Mozilla, die werden immer mit code angezeigt wie &uuml.
Werden die umlaute auch durch Doctype korrekt dargestellt?
 
Der Doctype ist nicht für Zeichendarstellung zuständig. Wenn es dir um Zeichendarstellung geht, musst Du dich zu Zeichensätzen informieren. Wenn bei Deiner Webseite Umlaute falsch angezeigt werden, verwendet höchstwahrscheinlich dein HTML-Editor einen anderen Zeichensatz als er vom Server und/oder der HTML-Charset-Angabe definiert wird. Kontrolliere also welchen Zeichensatz dein HTML-Editor verwendet und welchen Du in der Webseite angibst.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben