Probleme mit Safari und einem CSS Menü

webfabrik · #1 (**permalink**) 26.06.2006, 16:41

Hallo zusammen,

habe auf meiner neuen Website ein CSS Menü eingebaut, welches 2 Ebenen tief geht. Mit irefox und IE auf Mac und Windows alles klasse, nur der Mac mit dem Safari macht hier echt mucken. Der Text springt und die Größe des Blocks springt bei einem Rollover.

Die Seite findet Ihr unter http://www.webfabrik.org

Der CSS Code des Menüs:

--- START ---
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 600px; /*For KHTML*/
list-style: none;
height: 24px;
}

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
height: 24px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul li {
float: none; /*For Gecko*/
display: block !important;
display: inline; /*For IE*/
height: 24px;
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
height: 24px;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
height: 24px;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
height: 24px;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
height: 24px;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
height: 24px;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
height: 24px;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
height: 24px;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
height: 24px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
height: 24px;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
height: 24px;
}

IChao · #2 (**permalink**) 26.06.2006, 17:58

Scheinbar ein Bug. Ich habe hier line-height nochmal extra notiert, und jetzt gehts im Safari 2.0.3.

Nebenbei: Wenn du bitte beim nächsten Mal dein CSS validieren würdest, Danke.

Code:

/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;

  line-height: 22px; /* IC */
  
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

webfabrik · #3 (**permalink**) 26.06.2006, 22:19

Na das nenne ich schnelle Hilfe.

Danke, hat wirklich an der einen Zeile gelegen...!!!

fakafi · #4 (**permalink**) 08.01.2008, 08:53

Hallo,

Ich habe Probleme with css Menu in Safari Browser. Die links werden
nach dem Anklicken nochmals in den rechten Fenster angezeigt . Mit Internet Explorer funktioniert die Menus and submenus wunderbar, aber nicht in SAFARI-Bowser. was kann ich da machen. Liegt das in der Einstellung?

Gruß
faKafi

hier sind die Codes für menu und submenus:

<HTML>
<HEAD>

<style type="text/css">
a {text-decoration: none;}

a:link { color:#00f; background-color:transparent; }
a:visited { color:#00f; background-color:transparent; }
a:hover { color:#ff0; background-color:lime; }
a:active { color:#ff0; background-color:Orangered; }

.title
{position: absolute;
width: 140px;
height: 20px;
left: 10px;
z-index: 10;
text-shadow: black;
font-family: Calligraph421 BT, helvetica, sans-serif;
font-weight: bold;

font-size: 14px;
}

.submenu
{position: absolute;
left: 35px;
width: 120px;


background-color= "#BB994A";
layer-background-color: yellow;
font-family: Calligraph421 BT, helvetica, sans-serif;
font-size: 12px;
text-shadow: black;

visibility: hidden;}
</style>

Crizzo · #5 (**permalink**) 08.01.2008, 11:43

Zitat:

Zitat von fakafi

Hallo,

Ich habe Probleme with css Menu in Safari Browser. Die links werden
nach dem Anklicken nochmals in den rechten Fenster angezeigt . Mit Internet Explorer funktioniert die Menus and submenus wunderbar, aber nicht in SAFARI-Bowser. was kann ich da machen. Liegt das in der Einstellung?

http://xhtmlforum.de/40080-f-r-frage...twortende.html und benutze bitte Code-Tags (HTML-Code Button rechts oben). Danke.

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
CSS Menü auf Internet Explorer abstimmen	raphi156	CSS	33	22.12.2010 10:10
css menü, brauche dringend hilfe	BlackRavn	CSS	9	09.10.2010 10:06
CSS Menü zickt rum /IE6/IE7/FF	GizmotroniX	CSS	3	11.07.2007 08:14
Mysteriöses in CSS Dropdown Menü	ph!L	CSS	3	21.07.2006 12:31
abgerundete ecken als hintergrund in css menü	gollib	CSS	3	18.07.2006 00:44