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

unterschiedliche darstellungen

C

Conti93

Neues Mitglied
nabend zusammen,

also folgendes Problem: Ich habe für nen Schulprojekt erstmal das Design gebaut und sieht auch ganz gut aus, keine probleme. dann wollt ich das heute vorstellen, und auf einmal wurde das ganz anders dargestellt. Die Buttons waren im IE sehr viel kleiner als gedacht und wurden auch nicht vollständig angezeigt. hier mal nen screenshot:
unbenannt1pak.jpg

links im IE 7 rechts Firefox 2.
ich weis absolut nich woran das liegt.
merkwürdig is auch das der Darstellungsfehler nur in IE 5-7 vorkommt. Im neuen IE 8 geht das wunderbar. Ich kann in keiner der dateien einen fehler erkennen vllt kann ja mal hier einer drübergucken.

die css:
body {
background-image: url(../img/bg_navi.png);
margin:0px;
padding:0px;
}

a:link {
color: #FFFFFF;
text-decoration:none;
}

a:visited {
color: #FFFFFF;
text-decoration:none;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}


#home a {
height: 25px;
width: 180px;
display: table-cell;
background: url("../img/buttons/home.png") 0px 0px no-repeat;
}

#home a:hover {
background-position: 0px -25px;
}


#biografie a {
height: 25px;
width: 180px;
display: table-cell;
background: url("../img/buttons/biografie.png") 0px 0px no-repeat;
}

#biografie a:hover {
background-position: 0px -25px;
}


#rechenmaschine a {
height: 25px;
width: 180px;
display: table-cell;
background: url("../img/buttons/rechenmachine.png") 0px 0px no-repeat;
}

#rechenmaschine a:hover {
background-position: 0px -25px;
}


#dualzahlen a {
height: 25px;
width: 180px;
display: table-cell;
background: url("../img/buttons/dualzahlen.png") 0px 0px no-repeat;
}

#dualzahlen a:hover {
background-position: 0px -25px;
}


#windmuehlen a {
height: 25px;
width: 180px;
display: table-cell;
background: url("../img/buttons/windmuehlen.png") 0px 0px no-repeat;
}

#windmuehlen a:hover {
background-position: 0px -25px;
}


#wasserleitung a {
height: 25px;
width: 180px;
display: table-cell;
background: url("../img/buttons/wasserleitung.png") 0px 0px no-repeat;
}

#wasserleitung a:hover {
background-position: 0px -25px;
}


#monaden a {
height: 25px;
width: 180px;
display: table-cell;
background: url("../img/buttons/monaden.png") 0px 0px no-repeat;
}

#monaden a:hover {
background-position: 0px -25px;
}


#impressium a {
height: 25px;
width: 180px;
display: table-cell;
background: url("../img/buttons/impressium.png") 0px 0px no-repeat;
}

#impressium a:hover {
background-position: 0px -25px;
}
Zum Vergrößern anklicken....
die html:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

    <link href="../css/rollover.css" type="text/css" rel="stylesheet" />
</head>

<body>
<ul>
  <li>
  <div id="home">
  <a href="start.htm" target="main">&nbsp;</a>
  </div><br /><br />
  </li>
  <li>
  <div id="biografie">
  <a href="biografie.htm" target="main">&nbsp;</a>
  </div>
  <br /></li>
  <li>
  <div id="rechenmaschine">
  <a href="rechenmaschine.htm" target="main">&nbsp;</a>
  </div>
  <br /></li>
  <li>
  <div id="dualzahlen">
  <a href="dualzahlen.htm" target="main">&nbsp;</a>
  </div>
  <br /></li>
  <li>
  <div id="windmuehlen">
  <a href="windmuehlen.htm" target="main">&nbsp;</a>
  </div>
  <br /></li>
  <li>
  <div id="wasserleitung">
  <a href="wasserleitung.htm" target="main">&nbsp;</a>
  </div>
  <br /></li>
  <li>
  <div id="monaden">
  <a href="monaden.htm" target="main">&nbsp;</a>
  </div>
  <br /><br /></li>
  <li>
  <div id="impressium">
  <a href="impressium.htm" target="main">&nbsp;</a>
  </div>
  <br /></li>

  
</ul>
</body>
</html>

hoffe das hier wer helfen kann.
 
Der IE kennt erst ab Vers.8 display:table-cell.
Alle anderen IEs behandeln a mit display:inline;
Inline-Element können kein height annehmen.

In deinem Fall würde display: block für a geeignet sein.
 
Probleme mit Firefox

Hallo zusammen,

Tja, da habe ich all mein Mut genommen und dachte ich werde mal ne Seite über meinen Verein machen. Ich muss dazu sagen das ich blutiger Anfänger mit, naja seit 6 Monaten beschäftige ich mich jetzt damit.
Nun bin ich auf ein Problem gestoßen, wo ich mit meinem Wissen nicht weiter komme und bitte hier um HILFE. Meine Seite funktioniert im IE wunderbar und wenn ich die Seite über Firefox mir anschaue sind die Tabellen usw total verschoben.
Hier der Link damit ihr mal schauen könnt: SV Kandelin

Danke schonmal im voraus
 
@Totti09: Für eigene Fragen solltest Du einen eigenen Thread aufmachen.
Daher hier nur soviel: Deine Arbeitsweise, wie die Website erstellt ist, entspricht der der frühen 1990er Jahre. Du missbrauchst Tabellen zu Layoutzwecken und belästigst den Nutzer mit Frames. Und von CSS glaubst Du, das wäre dazu da, Farben zu definieren.

Mach Dich schlau über HTML, Semantik, Trennung von Inhalt und Layout, CSS, Nachteile von Frames. Wenn Du dann oder jetzt noch Fragen hast, solltest Du einen eigenen Thread aufmachen.
 
Du kannst ja mal versuchen, nicht nur bei body sondern auch bei html das margin und padding auf 0 zu setzen.

Das würde halt folgendermaßen aussehen...

body, html {
padding:0px;
margin:0px;
}

Ein Versuch ist es auf jeden Fall wert, wie ich finde
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben