Klappmenue-Probleme bei ein paar IE-Browsern

mic_jan · 19. Juli 2004 11:05

Hallo Leute,

ich habe ein Problem mit meinem Ausklapp-Menue.

Ich habe es mit Netscape und dem IE getestet.

Leider hat das Menue in einigen IEs (nicht in meinem) ein Problem mit den Abständen zwischen den einzelen ausgeklappten Menuepunkten. Die Abstände sind viiiiiieeel zu groß.

Und das steht in meinem Setup:

# Top Navigation 
subparts.TOPNAV = HMENU
subparts.TOPNAV.special = directory 
subparts.TOPNAV.special.value = 2 
subparts.TOPNAV.1 = TMENU_LAYERS
subparts.TOPNAV.1 { 

layerStyle = position:absolute;VISIBILITY:hidden; 
lockPosition = x 
relativeToParentLayer=1 
relativeToTriggerItem=1 
topOffset=17 
leftOffset=0 
hideMenuWhenNotOver = 50 
hideMenuTimer = 70 
nicetext = 1
expAll=1
before = &nbsp
after = &nbsp
 

NO.allWrap = <td CLASS="topnav">|   </td> 
ACT = 1
ACT.allWrap = <td CLASS="topnav">|  </td>
}

# Top Navigation 2nd Level 
subparts.TOPNAV.2 = TMENU_LAYERS 
subparts.TOPNAV.2 { 
layerStyle = position:absolute;VISIBILITY:hidden; 
lockPosition = x 
relativeToParentLayer=1 
relativeToTriggerItem=1 
hideMenuWhenNotOver=1 
topOffset=10 
leftOffset=15 
expAll=1 
NO.allWrap = <span CLASS="topnav_act"> | </span>
ACT = 1
ACT.allWrap = <span CLASS="topnav_act"> | </span>
}

Wenn ihr mehr Infos zur Lösung des Problems braucht, dann sagt Bescheid.

Gruss

Michael

mic_jan · 21. Juli 2004 16:33

Hmmm. wahrscheinlich kann keiner verstehen, was mein Problem ist. Deshalb hier mal zwei Bilderchen vom Problem:

Richtig:
Bild: zedwoo.de/…/menu-richtig.jpg
Falsch:
Bild: zedwoo.de/…/menu-falsch.jpg

Und hier noch der passende Teil aus meinem CSS (Die angegebenen Kommentare sind falsch... wie man unschwer erkennen kann, kenn ich die Seite von MC):

.topnav {
		background: #000000; /* lite blue grey */
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-variant: normal;
		text-transform: uppercase;
		font-weight: bold;
		padding-left: 5px;
		padding-right: 5px;
	}
	.topnav a:link {
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 11px;
		font-variant: normal;
		text-decoration: none;
		color: #FFFFFF; /* dark blue */
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 5px;
	}
	.topnav a:visited {
		font-family:Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: bold;
		font-variant: normal;
		text-decoration: none;
		color: #FFFFFF; /* dark blue */
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 5px;
	}
	.topnav a:hover {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: bold;
		font-variant: normal;
		text-decoration: none;
		background: #003366; /* dark blue */
		color: #FF8000; /* white */
		text-transform: uppercase;
		padding-left: 5px;
		padding-right: 5px;
	}
	.topnav_act a:active {
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-variant: normal;
		text-decoration: none;
		background: #003366; /* dark blue */
		color: #FFFFFF; /* white */
		padding-left: 5px;
		padding-right: 5px;
	}
	.topnav_act a:link {
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-variant: normal;
		text-decoration: none;
		color: #FFFFFF; /* dark blue */
		padding-left: 5px;
		padding-right: 5px;
	}
	.topnav_act a:visited {
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-variant: normal;
		text-decoration: none;
		color: #FFFFFF; /* dark blue */
		padding-left: 5px;
		padding-right: 5px;
	}
	.topnav_act a:hover {
		font-weight: bold;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-variant: normal;
		text-decoration: none;
		background: #000000; /* dark blue */
		color: #FF8000; /* white */
		padding-left: 5px;
		padding-right: 5px;
	}

Na, wie sieht es aus?

Liebe Grüsse,

Michael

sangria · 19. Oktober 2004 09:43

hmmm.... das selbe problem habe ich auch im IE 5.0... hat jemand schon eine lösung gefunden?

winke

sangria

jenses · 19. Oktober 2004 10:54

Das könnte mit dem Padding im CSS zusammenhängen,
damit hat der IE so seine Probleme.
Wenn du die Padding-Angaben mal testweise wegläßt,
was passiert dann ?

jenses

sangria · 19. Oktober 2004 11:14

hallo jenses,

nein... die paddingbefehle sind es nicht.... habe ich gerade ausprobiert...

das menue wird ja aus dem ts_setup und dem css generiert:

TS

marks.KOPF_MENU=HMENU 
marks.KOPF_MENU{ 
entryLevel = 0  
1 = GMENU_LAYERS 
1{ 
#max=1000
useLargestItemX = 1 
useLargestItemY = 1 
layerStyle = position:absolute; width:150px;VISIBILITY:hidden; 
topOffset=25 
leftOffset=0
#xPosOffset =-16 
lockPosition = y
expAll=1 
relativeToParentLayer = 1
relativeToTriggerItem = 1 
hideMenuWhenNotOver = 50
hideMenuTimer = 150
displayActiveOnLoad = 0
NO{ 
backColor=|*| #BED2C8|| #BED2C8|*|  
wrap=<td bgcolor="#FFFFFF" valign="middle">|</td> 
XY = [10.w]+10, [10.h]+6 
10 = TEXT 
10{ 
align = center 
fontFile = fileadmin/fonts/arial.ttf 
fontSize = 11 
fontColor = #000000 
text.field=title 
offset=0,12 
} 
} 
RO < .NO 
RO=1 
RO{ 
backColor=#000000 
10.fontColor=#ffffff 
} 
ACT < .NO 
ACT=1 
ACT{ 
backColor=#ffcccc 
10.fontColor=#000000 
} 
} 



2 = TMENU_LAYERS 
2{ 
layerStyle = position:absolute;width:150px;VISIBILITY:hidden; 
topOffset=-1 
leftOffset=143 
#xPosOffset =-50 
lockPosition = y
expAll=1 
relativeToParentLayer=1
relativeToTriggerItem=1 
hideMenuWhenNotOver=50 
hideMenuTimer = 150
displayActiveOnLoad = 0
wrap=<DIV ID="js-menu">|</DIV> 
NO{ 
linkWrap = |<BR> 
} 
ACT=1 
ACT{ 
linkWrap=<STRONG>|</STRONG><BR> 
} 
} 



3 = TMENU_LAYERS 
3{ 
layerStyle = position:absolute;width:150px;VISIBILITY:hidden; 
topOffset=-1 
leftOffset=60 
#xPosOffset =-50 
lockPosition = y
expAll=1 
relativeToParentLayer=1
relativeToTriggerItem=1
hideMenuWhenNotOver=50
hideMenuTimer = 150
displayActiveOnLoad = 0
wrap=<DIV ID="js-menu">|</DIV> 
NO{ 
linkWrap = |<BR> 
} 
ACT=1 
ACT{ 
linkWrap=<STRONG>|</STRONG><BR> 
} 
} 
4 = TMENU 
4{ 
wrap=<DIV ID="js-menu">|</DIV> 
NO{ 
linkWrap = |<BR> 
} 
ACT=1 
ACT{ 
linkWrap=<STRONG>|</STRONG><BR> 
} 
}

CSS

#kopfmenu{ 
width: 700px; 
height:18px; 
background-color: #000000; 
border: 1px solid #000000; 
color: #ffffff; 
margin-right: 0px; 
margin-bottom: 5px;
width:50px;
} 

#js-menu{ 
background-color: #B4D7D2; 
border-color: black; 
border: 1px solid; 
padding-left: 5px; 
padding-bottom: 3px; 
float:left; 
width:160px; 
filter: Alpha(opacity=100, finishopacity=100, style=1);
} 

#js-menu a{ 
margin-left: 5px; 
text-decoration: none; 
color:black;
padding-left: 5px; 
padding-bottom: 3px; 
float:left; 
width:160px; 
} 

#js-menu a:hover{ 
margin-left: 5px; 
text-decoration: underline; 
color:red;
padding-left: 5px; 
padding-bottom: 3px; 
float:left; 
width:160px; 
}

hat der IE 5 evtl. probleme mit dem <DIV> tag???

winke

sangria

jenses · 20. Oktober 2004 23:45

Er hat wohl Probleme mit verschachtelten, absolut positionierten <DIV>-Tags,
und davon gibts 'ne Menge im ausgegebenen Quelltext.

jenses