IE vs firefox - layer an verschiedene stellen - again!

anonym

hallo!

hab jetzt erst mal gelesen und anscheinend einen anfänger fehler begangen!
hab meine page komplett nach firefox ausgrichtet und alles passt!
checkt die seite unter: ********************

und dann hat ein freund von mir sie mit IE "bewundert"!! grauenvoll... was kann ich jetzt noch retten??

so schaun die layers bei mir normalerweise nicht aus, denn das style=position hab ich erst jetzt dann rein, führt aber leider auch kaum zum gewünschten ergebnis!

Zitat

<div align="center" style="width: 670; height: 285">
<div id="Layer1" style="position:absolute; width:627px; height:115px; z-index:1; left: 35px;">
<div align="left">
<font size="1" face="Arial, Helvetica, sans-serif"><p class="Stil1" style="margin:0"></p> Meine
Seite beschreibt einen interessanten Weg in der Verwendung von Webseiten
und ermöglicht es, verschiedene Aktivitäten zu kombinieren.
Ich habe versucht verschiedene Interessen einfach aber sinnvoll zu
verbinden. Bei Anregungen oder Ideen bitte ich Sie mir einfach ein
Mail zu schicken. Ich bin natürlich für Veränderungen oder
Erweiterungen offen.</font></div>
</div>

Alles anzeigen

vielen lieben dank,

ralph

anonym

also, problem is ja nich weil es bloß 1,2 eben sind sondern ein ganzer haufen,...gibt es ein möglichkeit das noch in den griff zu bekommen oder heißt das ich muss von vorne beginnen - und gleichzeitig immer bei IE, firefox und am besten auch gleich opera schaun ob alles gleich aussieht??

bitte um antwort!

lg ralph

sejuma

Code

<div align="center" style="width: 670; height: 285">

Da fehlen noch die px-Angaben.
Ansonsten wäre Link oder kompletter Quelltext hilfreich.

DrunkenDX

ich denke mit css kannst du da noch einiges retten... wenn du den divs schon ne id oder class geben hast...---> externe css

quelltext posten...

anonym

ok, das wär mal der quellentext von meinem linken frame.. der wo das menü drinnen ist:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Microsoft FrontPage 5.0">
<title>left_banner</title>
<style type="text/css" media="screen"><!--
#Layer1 { position: absolute; top: 260px; left: 46px; width: 100px; height: 248px; visibility: visible; display: block }
#layer2 { position: absolute; top: 91px; left: 14px; width: 80px; height: 23px; visibility: visible; display: block }
#layer3 { position: absolute; top: 18px; left: 14px; width: 80px; height: 21px; visibility: visible; display: block }
#layer4 { position: absolute; top: 163px; left: 8px; width: 80px; height: 23px; visibility: visible; display: block }
#layer5 { position: absolute; top: 127px; left: 5px; width: 80px; height: 23px; visibility: visible; display: block }
#layer6 { position: absolute; top: 226px; left: 26px; width: 36px; height: 23px; visibility: visible; display: block }
#layer8 { position: absolute; top: 22px; left: 44px; width: 100px; height: 31px; visibility: visible; display: block }
#layer7 { position: absolute; top: 208px; left: -19px; width: 118px; height: 71px; visibility: visible; display: block }
#layer9 { position: absolute; top: 54px; left: 11px; width: 118px; height: 71px; visibility: visible; display: block }

a { text-decoration: none; color:black; }
a:hover { text-decoration: underline }
a:visited { text-decoration:none; color:black; }
a:visited:hover { text-decoration: underline }
a:active { text-decoration:none; color:red; }
a:focus { text-decoration:none; color:red; }
--></style>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

</p>

<div id="layer1" style="width: 121px; height: 188px">
<div id="layer2" style="width: 80; height: 23"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a href="JKU_start.html" target="main_frame">JKU
Linz</a></font></div>

</p>
<div id="layer3"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Nachhilfe</font></div>
<div id="layer9" style="width: 83; height: 16"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular"><a href="sell&buy.htm" target="main_frame">Sell
& Buy</a></font></div>

</p>

</p>
<div id="layer4"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Impressum</font></div>

</p>
<div id="layer5" style="width: 80; height: 23"> <font size="2" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Search-Map</font>
</div>

</div>
</p>

</p>
</div>
<div id="layer8">
<div align="left">
<font size="4" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">Home</font></div>
</div>

</body>

</html>

sejuma

Es macht keinen großen Sinn, für jeden Link einen einzelnen Layer zu verwenden, der zudem noch absolut positioniert ist. Da blickst du irgendwann überhaupt nicht mehr durch und durch die Positionsangaben kann es schnell mal zu Fehlern und damit Überlagerungen kommen.
Ich empfehle dir deshalb, deine gesamte Navi mit einem Listencode zu ersetzen.
Zahlreiche Code-Beispiele findest du hier, mit Hintergrundgrafiken z.B. dieses.

anonym

wenn ichs jetzt noch mal machen würd, würd ichs auch anders machen...
ich hab einfach den text auf die buttons gesetzt (mit ebenen), di buttons normal dann in eine ebene die über das hintergrundbild geht.. und eine zusätzliche eben unten...

gibt es da keine möglichkeit das hin zu kriegen..?

sejuma

Doch, es gibt eine saubere Lösung, siehe meinen letzten Link.
Die Buttons fügst du dabei jedoch nicht als img sondern als background-image im a-Tag ein. Verwende doch einfach mal diesen Code, ersetze die Bilddatei mit deiner und ersetze den Linktext mit deinem. Ggf. sind dann noch der width-Wert und die Farben anzupassen.
Wenn sich der Button dann beim a-Element befindet, kommt auch die Textbeschriftung drauf. Unterschiedliche Layer und Ebenen sind dabei nicht erforderlich.

Tags