nicht angemeldet
div rückt im IE7 4 pixel nach unten.
Hi!
Ich beschreibe mal kurz mein Problem:
Ich habe auf meiner Seite oben die Hauptnavigation horizontal in einem Div.
Mit der nächsten Version meiner Seite gibt es eine Suchfunktion. Die Suchbox habe ich oben rechts neben der Navigation angeordnet. Dazu habe ich im Navigationskontainer zwei Divs nebeneinander angeordnet. In Linken liegt jetzt die eigentliche Navigation und im Rechten die Suchbox. Der Navigationskontainer hat eine Höhe von 30 Pixel und sorgt für die Hintergrundgrafik. Die beiden Kontainer nebeneinander haben auch eine Höhe von 30 Pixel und sorgen für die horizontale aufteilung. So, wenn diese Beigen Kontainer leer sind liegen sie genau in der Navigation. Wenn ich jedoch einen, oder beide(ist egal) mit Inhalt versehe(auch wenn ich nur einen Buchstaben reinschreibe), wird der Linke Kontainer um 4 Pixel nach unten verschoben. Dieses Problem tritt jedoch nur beim IE7 auf. In allen anderen Browsern funktioniert es.
Hier könnt ihr das in live sehen:
http://misch.kineticarm.com/
Hier der entsprechende HTML-Ausschnitt des menus:
Fürs Verständniss habe ich hier Zeilenumbrüche und Kommentare eingefügt. Original gibt es diese nicht, da steht einfach alles ohne Leerzeichen aneinander gekettet.
<div class="n"><!-- navigationskontainer für hintergrundfüllung-->
<div class="nl"><!-- für linken rand-->
<div class="nr"><!-- für rechten rand-->
<div class="mml"><!--linker kontainer für hor. aufteilung -->
<div class="mmaa">home</div>
<a class="mma" href="/newgames/1">new games</a>
<a class="mma" href="/mostplayed/1">most played</a>
<a class="mma" href="/updatedgames/1">updated games</a>
</div>
<div class="mmr"><!-- rechter kontainer für hor. aufteilung-->
<form method="get" action="/search">
<input type="text" name="sf[q]" value="haus" class="txt" id="sf_q" />
<input type="hidden" name="sf[_csrf_token]" value="b0a8f71e81632916636418d8733558a5" id="sf__csrf_token" />
<input type="submit" value="search" />
</form>
</div>
</div>
</div>
</div>
Und schließlich ein Auszug aus dem CSS:
.n{
background-image:url(/images/bbg.gif);
margin-bottom:5px;
margin-right:5px;
}
*html .n{
margin-right:0px;
}
.nl{
background-image:url(/images/bbl.gif);
background-repeat:no-repeat;
font-weight:bold;
}
.nr{
padding-left:10px;
padding-right:10px;
background-image:url(/images/bbr.gif);
background-repeat:no-repeat;
background-position:right;
line-height:30px;
height:30px;
vertical-align:middle;
}
.mml,
.mmr{
height:30px;
/* width:200px;*/
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
_height:30px;
}
.mml{
width:646px;
}
.mmr{
padding-left:5px;
border-left:1px solid #6081ba;
border-right:1px solid #6081ba;
width:220px;
}
Es wäre echt super, wenn mir da jemand weiterhelfen könnte. Ich hänge da jetzt schon seit Tagen dran und komm' nicht drauf. Danke
Michael
-
Hat keiner eine Idee?
-
Hi!
Gelöst. .mmr und .mml mit vertical-align:top; versehen und jetzt passt es.
Michael
http://www.kineticarm.com
http://www.dikeytus.com
http://www.lueftenegger.atHat keiner eine Idee?
-