Hallo,
Ich habe vor kurzen ein Listenmenu ueber CSS programmiert und es direkt unterhalb eines anderen 'div's mit einem Photo plaziert.
Jetzt gibt es allerdings zwischen Firefox und Opera Unterschiede: Bei Firefox kann ich das Menu haarscharf an das Foto 'ankleben', jedoch hat Opera dann noch einen / zwei Pixel Abstand.
Den IE konnte ich ueber !important ausmanoevrieren, so dass es keine Probleme gibt.
Der Main HTML Code:
<div id="container">
<div class="top">
//enthaelt Foto
</div>
<div class="menu">
<ul id="list6">
<li><a href="index.html">Home</a></li>
</ul>
</div>
</div>
Der main CSS Code:
#container {
WIDTH: 710px;
border:1px #CCC solid;
margin-top:10px;
margin-left:150px !important ;
margin-right:100px !important ;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;}
div.top {
Height:184px;
border-bottom:1px #B2B2B2 solid;
padding-bottom:0px;
margin-bottom:0px;}
div.menu {
margin-top:-17px !important;
margin-top:-19px;
padding-top:0px;
border-top:0px;}
#list6 ul{
list-style:none;
margin-top:0px;
padding-top:0px;}
#list6 li{
width:100px !important;
width:105px;
float:left;
list-style:none;
margin-top:0px;
margin-left:0px;
padding-top:0px;
padding-right:5px;
font-size:9pt;}
#list6 a{
text-align:center;
padding:5px 0 5px 0;
width:100%;
margin-top:0px;
margin-left:0px !important;
margin-left:0px;
display:block;
border-bottom:1px #B2B2B2 solid;
border-left:1px #B2B2B2 solid;
border-right:1px #B2B2B2 solid;
border-top:1px #B2B2B2 solid !important ;
border-top:0px #B2B2B2 solid ;}
Oben im div.menu habe ich die margin-top's mit negativen Zahlen belegt um das Menu nach oben zu verschieben.
Ich befuerchte, dass ich evtl. das Menu anders aufbauen muss, stehe aber gerade auf der Leitung wie das gehen soll.
Als Ansichtsbeispiel sei hier die Seite www.green-t.biz genannt, auf die ich dass schon einmal aufgeladen habe.
Vielen Dank im Vorraus,
Gruss
Max-Leonhard