Unterschiedliche Darstellung in Firefox / IE - Seite 2

fricca · #11 (**permalink**) 30.08.2011, 09:34

Floate die li-Elemente, nicht nur die Links.

Zitat:

#Text_Home a, a:visited

Das willst du sicher nicht wirklich. Damit formatierst du alle besuchten Links. Du musst den vollständigen Selektor wiederholen -- kommt sehr oft in deinem Code vor.
Schreib die Selektoren untereinander, dann passiert dir sowas nicht.

memphis2k · #12 (**permalink**) 30.08.2011, 10:32

du meinst also:

Code:

#Text_Home a, a:visited

wird zu

Code:

#Text_Home a, 
#Text_Home a:visited

Danke dass du dir die Mühe gemacht hast, den Code durchzuschauen!

K.Roland · #13 (**permalink**) 30.08.2011, 13:12

Hallo,

nicht gut so:

Code:

}

ul.navigation_items li {	list-style-type: none;	display: block;}
ul.navigation_items li a,
ul.navigation_items li a:link,
ul.navigation_items li a:visited {
	color:#ffffff;
	float: left;
	text-align: center;
}

Ein Beispiel von mir:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>testen</title>

<style type="text/css">
html, body, div, ul, li, a { 
   margin: 0; padding: 0; 
}
html {
   height: 100%;
}
body {
   font: 100.1% Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-align: center; 
}
#navigation_right {
   width: 679px;
    float: left;
    background: #ffffff;
    text-align: center; 
    background-image: url(index.php-Dateien/top_gradient.gif);
    background-repeat: repeat-x;
    background-position: bottom;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}
ul.navigation_items {
    margin-top: 31px;
    height: 78px;
}
ul.navigation_items li {	
   list-style-type: none;
   display: inline;
}
ul.navigation_items li a {
    color:#ffffff;	
    float: left; 
    width: 100px;
    text-decoration: none;
    padding-top: 58px;
    margin-left: 60px;
}
ul.navigation_items li#li_nav1 a {
    background-image: url(index.php-Dateien/nav_1.gif);
    background-repeat: no-repeat;
    background-position: center top;	
}
ul.navigation_items li#li_nav1 a:hover {
    background-image: url(index.php-Dateien/nav_1_hover.gif);
    background-repeat: no-repeat;
    background-position: center top;
    color: #77d02b;
}
ul.navigation_items li#li_nav2 a {
    background-image: url(index.php-Dateien/nav_2.gif);
    background-repeat: no-repeat;
    background-position: center top;	
}
ul.navigation_items li#li_nav2 a:hover {
    background-image: url(index.php-Dateien/nav_2_hover.gif);
    background-repeat: no-repeat;
    background-position: center top;	
    color: #77d02b;
}
ul.navigation_items li#li_nav3 a {
    background-image: url(index.php-Dateien/nav_3.gif);
    background-repeat: no-repeat;
    background-position: center top;
}
ul.navigation_items li#li_nav3 a:hover {
    background-image: url(index.php-Dateien/nav_3_hover.gif);
    background-repeat: no-repeat;
    background-position: center top;	
    color: #77d02b;
}
ul.navigation_items li#li_nav4 a {
    background-image: url(index.php-Dateien/nav_4.gif);
    background-repeat: no-repeat;
    background-position: center top;	
}
ul.navigation_items li#li_nav4 a:hover {
    background-image: url(index.php-Dateien/nav_4_hover.gif);
    background-repeat: no-repeat;
    background-position: center top;	
   color: #77d02b;
}
</style>
	
</head>
<body>

<div id="navigation_right">
		
<ul class="navigation_items">
	<li id="li_nav1"><a href="#">Schwimmen</a></li>
	<li id="li_nav2"><a href="#">Fu&szlig;ball</a></li>
	<li id="li_nav3"><a href="#">Leichathletik</a></li>
	<li id="li_nav4"><a href="#">Wintersport</a></li>
</ul>
			
</div>

</body>
</html>
}

getestet im IE7 Anhang 4313

Clearen nicht vergessen
Und Nutze auch background-color: damit deine Navi sichtbar bleibt, bei ohne Grafiken.
______________
Gruß.
Roland

memphis2k · #14 (**permalink**) 30.08.2011, 13:56

Hallo K.Roland!

Also deine Tipps von oben hab ich verstanden, da hatte ichs echt umständlich gelöst - so ists deutlich aufgeräumter!

Aber was genau meinst du mit der Background-color?

K.Roland · #15 (**permalink**) 30.08.2011, 16:17

Background-farbe Fehlt für die Navigation, wenn man sich das mal ohne Grafiken anschauten tut.

Habe mal ein Bild gemacht: Anhang 4314

_____________
Gruß,
Roland

memphis2k · #16 (**permalink**) 30.08.2011, 16:40

Du meinst also, falls jemand die Grafiken deaktiviert hat (aus welchem Grund auch immer), kann er mit der Seite nichts mehr anfangen, da Schrift = weiß und Hintergrund = weiß? Verstehe - an was man nicht alles denken muss

Danke! Habs geändert. Ist echt toll dass ihr euch so viel Zeit dafür nehmt!

K.Roland · #17 (**permalink**) 30.08.2011, 17:40

Hi,

deine Website gefällt mir sehr gut vom Aussehen, her gesehen.
Alles gute noch.
_________
Gruß,
Roland

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
unterschiedliche Darstellung zwischen ie und firefox	danyboy	CSS	13	17.12.2008 22:38
Unterschiedliche Darstellung in Firefox und IE	leamaus	CSS	6	06.12.2007 19:04
Unterschiedliche darstellung IE6 und Firefox	kruegge	CSS	1	20.10.2005 17:23
unterschiedliche css darstellung IE und firefox	eyetag	Site- und Layoutcheck	3	12.04.2005 17:09
Unterschiedliche Darstellung in Firefox und IE	Icetiger	CSS	3	17.03.2005 18:59