Darstellungsproblem bei Safari/ IE aber nicht bei FF

Memmpel · 22.06.2010

Guten Morgen

ich bin gerade dabei mir eine eigene Website zu erstellen. Das funktionierte auch bisher ganz gut und dank eines CSS-Dropdown Menü und einem Ajax-Code bin ich bisher auf keine weiteren Probleme gestoßen.

Nun habe ich aber auf der rechten Seite ein Menu eingefügt und und habe mit "text-decoration: none gesagt das ich bei den Links keine Unterlinie haben will, aber im IE und im Safari zeigt es mir diese noch immer an...

Zu sehen hier

bei Fragen immer ran oder wenn ihr was braucht.

Habe auch schon auf unterschiedlichen PC's probiert aber am Cache liegt es scheinbar nicht.

Grüße und danke im voraus

Hippy · 22.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

Hallo,

zum Darstellungsproblem kann ich Dir zwar nichts sagen, aber nur mal als Tip: Ist es wirklich sinnvoll, die Anleitung zur Installation einer geklauten PS-Version hier reinzustellen? Doch besser mal den Link ändern...

Gruß Hippy

Memmpel · 22.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

ich weiß von nix

war beim ändern

ich sehe grade, nützlich wäre auch die css-datei^^

Code:

body {
	background-color: #FFFFFF;
	margin: 10% auto 0% auto;
	cursor: default;
	background-repeat: repeat;
	background-image: url(storage/girl.png) no-repeat fixed right bottom;
	color: #333333;
	list-style: none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
#Main {
	width:100%;
	background-color: #FFFFFF;
	margin: 0 auto 0 auto;
}
#logo {
	height: 100px;
	float: left;
	background-image: url(logo_b.png);
	padding: 5px auto auto auto;
	margin-left: 15%;
	width: 500px;
}
#header {
	height: 150px;
	width: 590px;
	float: left;
	left: 366px;
	top: 110px;
}
#links {
	font-family: "Courier New", Courier, monospace;
	font-size: 16px;
	background-color: #666666;
	height: 25px;
	vertical-align: text-bottom;
	border-right-style: none;
	padding-right: 5px;
}
#box {
	height:100px;
	padding: 5px 0px 0px 2px;
}
#con {
	padding-top: 5px;
	width: 500px;
	float: left;
	border-right-color: #ff7e00;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-color: #ff7e00;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	height: 650px;
	overflow: auto;
}
#main_con {
	width:663px;
	height: 700px;
	margin-left: 15%;
	background: #fff url(home.png) right bottom no-repeat;
	border: solid #ff7e00 1px;
	margin-top: 1%;
}
#side_out {
	width: 152px;
	margin-left: 10px;
	float: left;
}

#side {
	height: 200px;
	width: 150px;
	border-left-color: #ff7e00;
	border-left-style: solid;
	border-left-width: 1px;
	border-bottom-color: #ff7e00;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-top: 5px;
}
#side2 {
	height: 200px;
	width: 150px;
	margin-top: 10px;
	border-top-color: #ff7e00;
	border-top-style: solid;
	border-top-width: 1px;
	border-left-color: #ff7e00;
	border-left-style: solid;
	border-left-width: 1px;
	border-bottom-color: #ff7e00;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	float: none;
	font-family: "Times New Roman", Times, serif;
}
.nav_c {
	width: 600px;
	float: right;
	padding-right: 5%;
}
#shadow {
	background-color: #eda;
	text-align: right;
	color: #ff7e00;
	padding-right: 10px;
	font-weight: bold;
	font-family: "Times New Roman", Times, serif;
}
.navnav {
	width: 100%;
	height: 27px;
	background-image: url(back.png);
}
#side_1_list {
	height:24px;
	background-color:#eda;
	text-align:center;
	border-top-color:#FFFFFF;
	border-top-style:solid;
	border-top-width:1px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	width:150px;
	font-size: 0.9em;
	padding-top:8px;
}
#side_1_list {
	color:#ff7e00;
	text-decoration:none;
}
#side_1_list:hover {
	background-color: #76b900;
	width:150px;
	height:24px;
	color:#FFFFFF;
}

Gackoo_duz · 22.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

Versuchs mal damit

#side_1_list a {text-decoration:none;
}

und eigendlich macht man Navigationsmenües mit Listenelementen <li>

z.B.
html
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">...</a></li>
</ul>
CSS
ul
{
background-color: #0FF;
height: 250px;
width: 150px;
}

li
{
list-style-type: none;
}

li a
{
text-decoration: none;
color: #00F;
}

Memmpel · 22.06.2010

hm ok das muss ich heute abend zuhause ausprobieren, danke dir erstmal, ich schreibe wieder wenn es nicht passt, denn derzeit ist es so das wenn ich den div rausnehme er mir den Background nicht mehr in der richtigen hover farbe anzeigt sondern nur den text hovert

Abend hab mir das nochmal durchgelesen und merke grade wenn ich das mache, das es mit dem css-dropdown menu dann nicht mehr klappt weil es mir dann das ganze verschiebt.
Das Div in der Liste habe ich ja nur gewählt weil ich diesen Button-Effekt haben will. Und mit deiner Variante zeigt es mir im FF/ Safari und IE wieder alles blau bzw. dann lila an, das is ja een genau das Gegenteil davon was ich will

Memmpel · 29.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

ok da ich arbeiten darf dauerte es etwas aber nun bin ich wieder dran

nun ja mit dem Ergebnis das es immer noch nicht klappt, entweder bin ich zu doof oder übersehe etwas ganz gewaltiges...

ich will das der hovereffekt über die gesamte breite von 150px geht aber er geht immer noch nur über den Text-Teil.

das ist der Quelltext mit entsprechender .css was das nächste Problem ist, aber dazu weiter unten

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css"> 
ul
{
}

#side_1 li
{
list-style-type: none;
background-color:#eda;
height: 24px;
width: 150px;

}

#side_1 li a
{
text-decoration: none;
color: #ff7e00;
}
#side_1 li a:hover 
{
text-decoration: none;
color: #FFFFFF;
background-color: #76b900;
width:150px;
height:24px;
}

</style>
</head>

<body>
<div id="shadow">Menu</div>
<div id="side_1">
	 <ul>
		 <li><a href="javascript:ajaxpage('ajax/home.php', 'con');#">Home</a></li>
		 <li><a href="#">f&uuml;r Susi</a></li>
		 <li><a href="#">Two.Three</a></li>
		 <li><a href="#">Two.Four</a></li>
		 <li><a href="#">Two.Five</a></li>
	 </ul>
</div>
</body>
</html>

wie hier zu sehen ist das Stylescript innerhalb des Dokumentes, da meine Website aber mit include-Befehl arbeitet bekomme ich den Teil für das Menü nicht in die eigentliche Design.css übernommen, er greift dann einfach nicht auf die css-Datei zu und macht den hässlichen übligen Standard.

und ich bekomm den Text einfach nicht vertikal mittig, wie mach ich das?

In der Hoffnung auf Hilfe und mit freundlichen Grüßen

Chriko · 29.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

mach mal aus dem "side_1 li a:hover" ein "side_1 li:hover"

edit:

Code:

#side_1 li a
{
text-decoration: none;
color: #ff7e00;
}
#side_1 li a:hover 
{
text-decoration: none;
color: #FFFFFF;
}
#side_1 li:hover{
background-color: #76b900;
}

Memmpel · 29.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

abend

habe es auf die weise gemacht die du mir unten aufgezeigt hast, damit ist zwar der hintergrund in der richtigen Farbe da man das <li> hovert aber der Text ist ja immer noch der eigentliche Link, und der färbt sich auch nur weiß wenn man über ihn drüberfährt und nicht wenn man auf dem Kästchen ist.

Es soll halt wie oben in dem Dropdown-Menü aussehen und sein. Sprich man fährt über ein Container drüber und hat den Hovereffekt und der ganze Container ist der Link.

freue mich auf weitere Hilfe

Chriko · 29.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

Dann dürfte dir das gefallen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css"> 
#side_1 li{
  list-style-type: none; 
  background-color: #888;
  width: 150px;
  height: 24px;
}
#side_1 li a {
  display: block;
  height: 24px;
}
#side_1 li a:hover {
  background-color: #eee;
}

</style>
</head>

<body>
<div id="shadow">Menu</div>
	 <ul id="side_1">
		 <li><a href="javascript:ajaxpage('ajax/home.php', 'con');#">Home</a></li>
		 <li><a href="#">f&uuml;r Susi</a></li>
		 <li><a href="#">Two.Three</a></li>
		 <li><a href="#">Two.Four</a></li>
		 <li><a href="#">Two.Five</a></li>
	 </ul>
</div>
</body>
</html>

Memmpel · 29.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

ok das funktioniert irgendwie^^

ich habe zwar noch nicht herausgefunden was es ist aber ich denke mal es "display: block" oder?

ich danke dir das war das was gefehlt und geholfen hat

ok dann ist nur noch die Frage wie ich den Text vertikal in die Mitte setze zu klären

Chriko · 29.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

ja, das display: block löst diesen effekt aus.
was meinst du mit mittig? Die Links zentriert auf dem Button?
unter side_1 li noch ein text-align: center;

Memmpel · 29.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

nein das habe ich schon längst eingefügt, aber man kann text ja nicht nur links- / rechtsbündig und zentriert ausrichten, sondern auch von oben nach unten ausrichten und das will ich noch wissen.

Offtopic: vll sollte ich demnächst auch mal den Thread umbenennen in Hempel's Fragesammlung umbenennen^^

Chriko · 30.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

#side_1 li a{
padding-top: ...px;

Memmpel · 30.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

GuMo

gibt es da nicht noch eine andere Möglichkeit?

Chriko · 30.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

Mir würde auf Anhieb nichts anderes einfallen. Das heißt aber nichts.
Was gefällt dir an dieser Variante nicht?

Memmpel · 30.06.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

ne nicht gefallen ist vll der falsche Ausdruck...Mir geht es ja eher um das Ergebnis, hab bloß Sorge das es dann in einem Browser nicht richtig angezeigt. Derzeit arbeite ich mit FF, Safari und IE 8, aber es gibt ja noch andere wie z.B Google Chrome, etc ich nenn es mal NoName-Browser.

Ein dickes Danke erstmal an dich, hast mir sehr geholfen

Bigmemo · 01.07.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

...
Hallo,
ich würde an deiner Stelle mal die Seite validieren, dann siehst Du noch sehr viele Fehler...viel Spass beim entrümpeln...

Memmpel · 01.07.2010

AW: Darstellungsproblem bei Safari/ IE aber nicht bei FF

oh hehe
gut das du mir das gesagt hast^^
hab mal mit dem W3C validator geschaut, da is ja wirklich ne Menge vorhanden

ich seh schon das wird noch was
hehe

na dann auf an die Arbeit
Grüße

Merke grade dass das nicht ganz richtig läuft, denn er zeigt mir zum Beispiel "Fehler" in meiner .css die gar nicht vorhanden sind, aufgrund dessen das es einfach Randnotizen sind

GuMo

ok hab mich dran gesetzt, das dumme ist bloß das ich die Angaben von hier

Bitte kostenlos registrieren, damit du die Links siehst.

nicht ändern kann, da es das Ajax-Script betrifft und dieses dann nicht mehr funktiniert. Mittlerweile sind es "nur" nich 11 Fehler gestern abend waren 27