SELECT-Box in absolut positiniertem DIV

Status
Nicht offen für weitere Antworten.

Martys

Erfahrenes Mitglied
Hallo,

ich habe ein Problem mit einem Select-Menü, welches rechts unten im Browser positioniert ist. Es befindet sich per float:right; in einem absolut positionierten (bottom:0), 100px hohem DIV. IM IE und Opera funktioniert es einwandfrei, im Firefox und Netscape hingegen nicht, d.h. es klappt nicht aus.

Zur Thematik habe ich dieses hier gefunden: http://forum.de.selfhtml.org/archiv/2007/3/t148571/ was mich allerdings nicht wirklich weiterbringt.

Kennt jemand dieses Problem und hat vielleicht Tipps oder eine Lösung dafür?

Danke schon mal,
Martys
 
Hi,

vielleicht solltest du hier besser den Quellcode deiner Seite anhängen, denn ich kann das Problem mit deinen Angaben (absolut positioniertes DIV und rechts-floatende Auswahlliste) bei mir nicht reproduzieren, sprich die Auswahlliste klappt im FF (2.0.0.7) und NN (7.0) problemlos auf.
 
Yepp, ganz vergessen.


HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>

<TITLE>Test</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//--></SCRIPT>
<style type="text/css">
#infotext {
	width:550px;
}

#more {   
    width:225px;
	height:60px;
	font-family:arial;
	margin:0 auto;
	overflow:auto;
	text-align:left;	
}

.infotext{
	text-align:left;
	margin:0px 7px 0px 0px;
	color:#fff;
}

div#unten {
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	width:100%;
	height:100px;
	background-image:url(gif/home_unten_back.gif);
	background-color:#ff0000;
	text-align:left;
	margin:0;
	padding:0;
	z-index:6;
}

div#unten p, div#unten form {
	margin:0;
	padding:0;
	float:right;
}

div#unten form {
	clear:right;
}

div#unten p img.worldwide {
	margin-top:20px;
	margin-bottom:10px;
	margin-right:83px;
}

p.logo {
margin:0;
padding:0;
position: absolute;
top:50%;
width:100%;
}

p.logo a img {
left:50%;
margin-left: -125px;
margin-top: -148px;
position: absolute;
}
</style>

</head>


<body style="margin:0;padding:0;">
<p class="logo"><a href="index.htm"><img src="gif/logo.gif" border="0" alt="" width="272" height="196"></a></p>
<!-- Infotext Beginn -->
<div id="infotext" style="position:absolute; bottom:0; z-index:20; height:70px; left: 50%; margin-left: -50%;text-align:center;width:100%;">
<div class="infotext" id="more"> ...
</div>
</div>
<!-- Infotext Ende -->

<div id="unten">
<!-- <p><img src="gif/space.gif" width="115" height="9" border="0" alt="" class="worldwide"></p> -->

<form name="Auswahl" action="" style="margin-top:39px;">
	<select name="target" onchange="MM_jumpMenu('parent',this,0)">
		<option selected="selected" value="1.htm">Test 1</option>
		<option value="2.htm">Test 2</option>
		<option value="3.htm">Test 3</option>
		<option value="4.htm">Test 4</option>
		<option value="5.htm">Test 5</option>
		<option value="6.htm">Test 6</option>
		<option value="7.htm">Test 7</option>
		<option value="8.htm">Test 8</option>
	</select>
</form>

<noscript>
	<P>
		<option selected="selected" value="1.htm">Test 1</option>
		<option value="2.htm">Test 2</option>
		<option value="3.htm">Test 3</option>
		<option value="4.htm">Test 4</option>
		<option value="5.htm">Test 5</option>
		<option value="6.htm">Test 6</option>
		<option value="7.htm">Test 7</option>
		<option value="8.htm">Test 8</option>
	</p>
</noscript>
</div>

</body>
</html>


Wenn ich das margin-top:39px auch ca. 19px setze funktioniert es. Leider muss die Box aber mehr Abstand von nach oben haben, bzw. sollte auch mal ganz unten liegen positioniert sein (Blöde Vorgaben). Was kann man machen?
 
Das DIV #infotext überlagert mit seiner höheren Schichtposition z-index:20 das DIV #unten ( z-index:6), weshalb sich die Auswahlliste nicht betätigen lässt.

Dass es dennoch im IE (bis Version 6) funktioniert, liegt lediglich daran, dass in ihm das select-Element von "windowless elements" (wie z.B. das DIV) in der Schichtposition nicht überdeckt werden kann.
 
Status
Nicht offen für weitere Antworten.
Zurück