Unterschiedl. Abstand zwischen zwei Divs bei Opera / Firefox

[Max-Leonhard von Schaper]

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

[at]

Hallo.

Der main CSS Code:

... könnte wesentlich übersichlicher sein.
Enthält

#container

ausschließlich das <img> und ist dieses mit display: block; formatiert?
Mit

!important ;

solltest du übrigens wesentlich sparsamer umgehen.
MfG, at

[Max-Leonhard von Schaper]

Hallo,

Das mit dem Foto ist nicht wichtig.

Es geht im Prinzip schon darum, dass ich zwei div's ohne Abstand aneinandersetzen moechte.

HTML:

<div class="top">
</div>

<ul id="list6">
<li><a href="index.html">Home</a></li>
</ul>

CSS:
div.top {Height:184px;
border-bottom:1px #B2B2B2 solid;
padding-bottom:0px;
margin-bottom:0px;}

#list6 ul{list-style:none;
margin-top:0px;
padding-top:0px;
border-top:0px;}

#list6 li{width:100px !important;
width:105px;
float:left;
list-style:none;
margin-top:-17px;
margin-left:0px;
padding-top:0px;
padding-right:5px;
font-size:9pt;}

#list6 a{font:normal 9pt arial,sans-serif;
text-decoration:none;
background:#FFF;
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 ;}

Wenn man das nun anschaut ergibt das oben eine bestimmt flaeche mit einem Strich unten als Grenze, an die sich ein Menu anschmiegen soll.

Problem:
Wenn man die Liste mit margin-top:-XX px; nach oben schiebt, stimmen die Pixelangaben fuer IE und Opera ueberein. Firefox braucht 2 pixel mehr. Wie kann ich das aber im CSS Code reinschreiben? !important gibt mir den Spielraum zwischen IE und Opera/Firefox, aber wie kann man zwischen Opera und Firefox im CSS Code unterschiedliche angaben machen?

Vielen Dank fuer eure Hilfen,

Gruss
Max-Leonhard

[at]

Hallo.

Das mit dem Foto ist nicht wichtig.

Dann hast du es also schon ausprobiert?

important gibt mir den Spielraum zwischen IE und Opera/Firefox, aber wie kann man zwischen Opera und Firefox im CSS Code unterschiedliche angaben machen?

Welche Browser-Weichen es gibt, findest du unter genau diesem Stichwort. !important dürfte nicht dazu zählen.
MfG, at

[Bogardo]

Jou Max-Leonhard

Es geht im Prinzip schon darum, dass ich zwei div's ohne Abstand aneinandersetzen moechte.

#list6 ul

^^^ Löschen -- und es geht.

#list6 ist die ID für deine _ul_! Ist dir noch nicht aufgefallen, dass der Selektor „#list6 ul“ in keinster Weise greift?

Deine „!important“ ... Bitte mehr Bescheidenheit. ;-)

Ciao, Bogardo

[Max-Leonhard von Schaper]

Hallo,

Vielen vielen Dank!

Ahh... so geht es... man programmiert und denkt sich nichts boeses, ploetzlich klappt was nicht und man sucht und sucht und sieht den Wald vor lauter Baeumen nicht.

Habe auch die anzahl der !important etwas zurueckgezogen.

Danke nochmals,

Gruss
Max-Leonhard