zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE: Problem mit Abständen und Positionierungen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.05.2006, 11:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.11.2005
Beiträge: 4
Mulma befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.05.2006, 12:41
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Poste doch bitte mal einen Link.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.05.2006, 13:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.11.2005
Beiträge: 4
Mulma befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von IChao
Poste doch bitte mal einen Link.
Danke für den Hinweis. Hab ich eben nachgetragen:
https://gmn.novedia.de/css/
Mit Zitat antworten
  #4 (permalink)  
Alt 05.05.2006, 13:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.843
RoToRa wird schon bald berühmt werden
Standard

Wird wohl dieser sein:

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

Robin
Mit Zitat antworten
  #5 (permalink)  
Alt 05.05.2006, 13:25
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #6 (permalink)  
Alt 05.05.2006, 14:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.11.2005
Beiträge: 4
Mulma befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Text neben Navigationsleiste andi01 CSS 6 08.06.2011 17:54
Problem mit Abständen LordAvalon CSS 1 07.04.2007 02:20
Header - Container - Footer / Problem mit Abständen k3nny CSS 4 08.01.2007 04:41
Problem bei Div's - zwei mal das gleiche und doch nicht ... Niriel CSS 10 09.06.2005 18:39
Problem mit einem CSS Layout nARC CSS 20 21.05.2005 07:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:34 Uhr.