✔ Unterschiedliche Darstellung?

[aminox]

Hallo,

ich habe heute folgende Spezialität:
Ein Menü wird über LI-Elemente gelöst, soweit kein Thema. Die LI-Elemente bekommen eine hover Backgroundfarbe, so dass sie eine Linie schließen.
Es klappt in allen Browsern. FF3.6.8 (Win), IE8, Safari (mac). Allerdings habe ich eine unterschiedliche Darstellung im FF3.6.8 (Mac) und auf dem iPhone.
Da verrutschen die Hintergrundlinien oder die LI-Elemente.

Kann mir jemand verraten, woran es liegt?
Im Anhang befinden sich zwei Screens. Einmal wie es sein sollte, und einmal wie es stellenweise ist.

CSS:

.navigation {
	width:					100%;
	height:					auto;
	position:				relative;
	background-color:		#FFF;
	padding-top:			10px;
	padding-bottom:			15px;
}

.navigation_back_line_element1 {
	position:				absolute;
	top:					140px;
	width:					100%;
	height:					13px;
	background-color:		#29a9e1;
}

.navigation_back_line_element2 {
	position:				absolute;
	top:					163px;
	width:					100%;
	height:					13px;
	background-color:		#72be44;
}

.navigation_back_line_element3 {
	position:				absolute;
	top:					186px;
	width:					100%;
	height:					13px;
	background-color:		#f6921e;
}

.navigation_back_line_element4 {
	position:				absolute;
	top:					209px;
	width:					100%;
	height:					13px;
	background-color:		#d82989;
}

.navigation_back_line_element5 {
	position:				absolute;
	top:					232px;
	width:					100%;
	height:					13px;
	background-color:		#6850a0;
}

.navigation ul {
	list-style:				none;
}

.navigation ul li {
	margin-top:				10px;
	width:					760px;
	padding-left:			40px;
	font-size:				11px;
}

.navigation ul li a {
	text-decoration:		none;
}

.navigation ul li a:hover {
	color:					#FFF;
}

.navigation ul li .element1 {
	color:					#29a9e1;
}

.navigation ul .li1:hover {
	background-color:		#29a9e1;
	color:					#FFF;
}

.navigation ul .li1Selected {
	background-color:		#29a9e1;
	color:					#FFF;
}

.navigation ul li .aSelected {
	color:					#FFF;
}

.navigation ul .li1:hover .element1 {
	color:					#FFF;
}

.navigation ul li .element2 {
	color:					#72be44;
}

.navigation ul .li2:hover {
	background-color:		#72be44;
	color:					#FFF;
}

.navigation ul .li2Selected {
	background-color:		#72be44;
	color:					#FFF;
}

.navigation ul .li2:hover .element2 {
	color:					#FFF;
}

.navigation ul li .element3 {
	color:					#f6921e;
}

.navigation ul .li3:hover {
	background-color:		#f6921e;
	color:					#FFF;
}

.navigation ul .li3Selected {
	background-color:		#f6921e;
	color:					#FFF;
}

.navigation ul .li3:hover .element3 {
	color:					#FFF;
}

.navigation ul li .element4 {
	color:					#d82989;
}

.navigation ul .li4:hover {
	background-color:		#d82989;
	color:					#FFF;
}

.navigation ul .li4Selected {
	background-color:		#d82989;
	color:					#FFF;
}

.navigation ul .li4:hover .element4 {
	color:					#FFF;
}

.navigation ul li .element5 {
	color:					#6850a0;
}

.navigation ul .li5:hover {
	background-color:		#6850a0;
	color:					#FFF;
}

.navigation ul .li5Selected {
	background-color:		#6850a0;
	color:					#FFF;
}

.navigation ul .li5:hover .element5 {
	color:					#FFF;
}

 

[Sven Mintel]

Moin,

ich würde mal folgendes vermuten:
Du hast den <li> ja ein margin-top gegeben, jedoch kein margin-bottom, überlässt dies also den Standard-Werten des Clienten, welche bei den Problem-Browsern evtl. anders sind, als bei den anderen, was diese Verschiebung verursachen könnte.

Also: lege auch margin-bottom für die <li> fest, optimalerweise auch Werte für padding-top und padding-bottom, evtl. sogar line-height, musst halt schauen, was Wirkung zeigt.

 

[aminox]

Jo das wars wohl Danke!