Inhald von Menü-div verschiebt sich (IE-FF)

Allpa

Ich habe folgendes Problem:
Auf einer meiner Seiten werden die Buttons im Menü-div im IE völlig richtig angezeigt, wärend sie im FF um etwa 20px nach unten und nach rechts verschoben sind, sodass nicht alles drauf ist!

Muss ich da noch irgend etwas eingeben?
Mit margin-top:0px hats nicht geklappt!

Falls ihr den Quelltext braucht, einfach kurz schreiben!

Schonmal vielen Dank für eure Bemühungen!

Alienx

Jo,

der Quelltext wäre sinnvoll. Hast du vielleicht mit 'padding'-Werten gearbeitet?

MfG Alienx

Allpa

HTML

<html>


<head>
<title>stage-technics.de</title>


<style type="text/css">


div
{
position:absolute;solid black;border:0px
}


.haupt
{ 
position:absolute; 
border:0px ;solid black;
width:1024px; height:650;
margin-top:-300px;
margin-left:-512px; 
left:50%; top:50%;
background-color:#ffffff;
}


.div1
{ 
border:0px ;solid black;
left:0px;top:0px;
width:1024px; height:1;
background-color:#ffffff;
}




.menue
{
border:0px ;solid black;
left:500px;top:0px;
width:500px;height:30;
background-image:url(dateien/design/menue23.png);


}


.div4
{
border:0px ;solid black;
left:-200px;top:0px;
width:200px;height:30;
background-image:url(dateien/design/div4.png);


}




.start
{
border:0px ;solid black;
left:-50px;top:30px;
width:750px;height:600;
background-color:#ff4500;
background-image:url(dateien/design/start.png);


}




.bilder
{
border:0px ;solid black;
left:-250px;top:0px;
width:250px;height:600;
background-color:#ff4500;
background-image:url(dateien/design/bilder.png);


}


.div2
{
border:0px ;solid black;
left:0px;top:-30px;
width:459px;height:300;
background-image:url(dateien/design/div2.png);


}


.div3
{
border:0px ;solid black;
left:667px;top:405px;
width:333px;height:225;
background-image:url(dateien/design/div3.png);


}


.div5
{
border:0px ;solid black;
left:125px;top:195px;
width:190px;height:20px;
background-color:#000000;


}


a.link1 { 
width:92px; 
height:30px; 
background-image:url(dateien/menue/aktuelles1.png); 
} 


a.link1:hover { 
background-image:url(dateien/menue/aktuelles2.png); 
}


a.link2 { 
width:93px; 
height:30px; 
background-image:url(dateien/menue/ueberuns1.png); 
} 


a.link2:hover { 
background-image:url(dateien/menue/ueberuns2.png); 
}


a.link3 { 
width:117px; 
height:30px; 
background-image:url(dateien/menue/referenzen1.png); 
} 


a.link3:hover { 
background-image:url(dateien/menue/referenzen2.png); 
}


a.link4 { 
width:88px; 
height:30px; 
background-image:url(dateien/menue/material1.png); 
} 


a.link4:hover { 
background-image:url(dateien/menue/material2.png); 
}


a.link5 { 
width:79px; 
height:30px; 
background-image:url(dateien/menue/galerie1.png); 
} 


a.link5:hover { 
background-image:url(dateien/menue/galerie2.png); 
}


</style>
</head>


<body link="white" vlink="white" alink="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">




<div class="haupt">


<div class="div1">


<div class="menue" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
[url='dateien/aktuelles.html'][img]dateien/menue/001.png[/img][/url][url='dateien/ueberuns.html'][img]dateien/menue/002.png[/img][/url][url='dateien/referenzen.html'][img]dateien/menue/003.png[/img][/url][url='dateien/material.html'][img]dateien/menue/004.png[/img][/url][url='dateien/galerie.html'][img]dateien/menue/005.png[/img][/url] 






<div class="div4">


<div class="start">
<font align="justify" color="white" size="3" face="Verdana">


























[b]Stage-technics goes online.[/b] 




Wir haben nun unsere Internetpräsenz erstellt und Online gestellt. 


Wir wünschen Ihnen viel Spaß beim durchstöbern und vielleicht sehen wir uns einmal 


auf der einen oder anderen Veranstaltung wieder.




Ihr stage-technics Team
</font>




<div class="bilder">


<center>


























<a href="dateien/aktuelles/003.png" target="neu">
[img]dateien/aktuelles/001.png[/img]
</a>






<a href="dateien/aktuelles/004.png" target="neu">
[img]dateien/aktuelles/002.png[/img]
</a>
</center>






<div class="div2">
<div class="div3">
<div class="div5">


<font color="white" size="2" face="Verdana">
[url='dateien/contact.html']Contact[/url] | [url='dateien/impressum.html']Impressum[/url] | [url='dateien/links.html']Links[/url]
</font>




</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</body>
</html>

Alles anzeigen

Nee, mit padding werten hab ich nichts gemacht!

Greg10

Der FF erzwingt bei listen immer links und oben einen freiraum, kann man nix gegen machen
Musst mit absätzen und dem • zeichen arbeiten

Allpa

Also anstatt die Buttons alle hintereinander reinzuschreiben soll ich sie untereinander machen?

Greg10

upps, sry ich glaub ich bin da irgendwo verrutscht^^
(hab gestern durchgemacht)

mmh zum egentlichen problem hab ich keine lösung....
werd nochmal drüber nachdenken

koslowski

Hi,

Zitat von Greg10

Der FF erzwingt bei listen immer links und oben einen freiraum, kann man nix gegen machen
Musst mit absätzen und dem • zeichen arbeiten

*räusper*, ähem..., ich seh da nirgendwo eine Liste.

Der menü-div enthält eine Reihe von a's.

a ist ein inline-Element, da kannste vertikale margins knicken.
Die Höhe von Inline-Elementen kannste nur durch die Schriftgröße oder line-height verändern.

Ich glaube auch nicht das das so mit deinem grafischen Menü funktionieren wird.

Erstmal gehören die Links in eine Liste:

Code

<ul id="navi">
   <li id="navi01">[url='wegvomlink.htm']Link 1[/url]
     ......................usw.
[/list]

Für alle Zustände des Links (normal, hover, etc.) macht man eine Grafik die alle Zustände enthält.
Die Buttons werden als Hintergrundgrafik eingebunden und je nach Zustand einfach mit Background-position verschoben, sodaß immer die gewünschte Grafik je nach Linkzustand eingeblendet wird.

a braucht position:absolute dafür und bekommt die HG-Grafik zugewiesen.
li braucht dann natürlich position:relative damit sich die absolut positionierte
Grafik daran orientieren kann.

Der Linktext sollte auch nicht in der Grafik stehen, weil dann die Sumas nicht weiterkommen (können nicht in Grafiken lesen!), Screenreader-user nicht weiterkommen und bei ausgeschalteten Grafiken auch nix mehr geht.

Einzige Möglichkeit das zu umgehen wäre
Image Replacement nach Gilder/Levin.

Grafische Menüs sind nicht ganz so einfach zu realisieren.

koslowski

Tags