XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE: Problem mit Abständen und Positionierungen (http://xhtmlforum.de/showthread.php?t=39810)

Mulma 05.05.2006 11:14

IE: Problem mit Abständen und Positionierungen
 
Bin blutige Anfängerin. Also, ich habe eine horizontale Navigationsleiste mit 5 gleichbreiten Rubriken darin. Per :hover soll sich via Klassenzuweisung pro Rubrik das jeweilige Hintergrundbild (b 180px, h 25px) ändern.
Klappt auch überall außer im IE.

Der stellt nämlich alles dar, bricht aber in eine nächste Zeile um, wo dann komischerweise nochmal die letzten drei Buchstaben der ganz rechten, also letzten, Rubrik stehen.

Mit dem Underscore-Hack hatte ich nun die Rubrikbreite um einen Pixel
runtergesetzt. Dann entstehen aber von links nach rechts zwischen den Rubriken immer etwas weitere Abstände. Weiß wirklich nicht mehr, was ich noch machen kann. Hat jemand eine Idee?

Hier mal die URL:
https://gmn.novedia.de/css/

----- in CSS ------------

Code:

#horizontalNav {
        background-image:url(../design/sec_initial.jpg);
        background-repeat:repeat-x;
        width:900px;
        height:25px;
        font-size:12px;
}

#horizontalNav .Section1, .Section2, .Section3, .Section4, .Section5 {               
        float:left;
        width:165px;
        height:25px;
        padding:3px 0 0 15px; /*zum Positionieren der Links */
        }

#horizontalNav .Section1:hover, .Section2:hover, .Section3:hover,
.Section4:hover, .Section5:hover {background-repeat:no-repeat;}

#horizontalNav .Section1:hover {background-image:url(../design/sec1.jpg);}
#horizontalNav .Section2:hover {background-image:url(../design/sec2.jpg);}
#horizontalNav .Section3:hover {background-image:url(../design/sec3.jpg);}
#horizontalNav .Section4:hover {background-image:url(../design/sec4.jpg);}
#horizontalNav .Section5:hover {background-image:url(../design/sec5.jpg);}

----- in HTML ----------

Code:

<div id="horizontalNav">
Rubrik1
Rubrik2
Rubrik3
Rubrik4
Rubrik5
</div>


IChao 05.05.2006 12:41

Poste doch bitte mal einen Link.

Mulma 05.05.2006 13:06

Zitat:

Zitat von IChao
Poste doch bitte mal einen Link.

Danke für den Hinweis. Hab ich eben nachgetragen:
https://gmn.novedia.de/css/

RoToRa 05.05.2006 13:19

Wird wohl dieser sein:

http://www.positioniseverything.net/...haracters.html

Robin

IChao 05.05.2006 13:25

Die Wiederholung der letzten drei Buchstaben ist ein Fehler, der im IE bei engen floats, Kommentaren und/oder display:none-Blöcken auftritt.

In deinem Fall sollte ein negativer margin für das letzte Element ausreichen.
.Section5 {margin-right:-3px;}


nebenbei
- Überleg doch mal, ob du eine Liste von links im Menue nicht auch als Liste auszeichnen solltest.

- wenn du schreibst

Code:

#horizontalNav .Section1, .Section2, .Section3, .Section4, .Section5 {
nehme ich an, dass du in Wirklichkeit meinst

Code:

#horizontalNav .Section1,
#horizontalNav .Section2,
#horizontalNav .Section3,
#horizontalNav .Section4,
#horizontalNav .Section5 {

Deine Fassung besagt, dass nur .Section1 diese hohe Spezifität aufweisen soll, die Regeln also nur für .Section1 innerhalb von #horizontalNav gelten sollen, ansonsten aber für alle .Section2 .Section3 usw. in deinem Dokument

Mulma 05.05.2006 14:07

JA! Hat geklappt! :) Vielen Dank für die vielen wichtigen Hinweise! Hatte schon die margin-Variante gestern - leider erfolglos - ausprobiert. Da wusste ich aber das mit der Listenauszeichnung nicht. Nun habe ich den Code analog deiner Empfehlung umgeschrieben und alles läuft.


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:28 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023