block element verbrauch trotz position:relative platz am falschen Ort

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

minialanguageschool hat kostenlosen Webspace.

19:17, 27.10.2009

Hallo
und dann hab ich mal wieder ne frage :

Ich hab mir jetzt ein Menu zusammengesetzt:

der css teil, beschraenkt auf das wichtigste

ul#menu_list      {margin:0;padding:0;}
ul#menu_list li   {list-style:none;margin:0;padding:0;background-image:url(img/button.gif);background-repeat:no-repeat;width:162px;height:40px;text-align:center;line-height:40px;}
ul#menu_list li ul li {width:162px;height:40px;text-align:center;line-height:40px;}
ul#menu_list li ul {display:none;position:relative;left:161px;bottom:30px;}
.menu_link        {display:block;}
ul#menu_list li:hover ul {display:block;}

HTML

<td class="menu">
<ul id="menu_list">
  <li class="li_standart">Home</li>
  <li class="li_standart" onmouseover="makevisible('submenu2')"  onmouseout="makeinvisible('submenu2')">About us
    <ul id="submenu2">
    <li class="li_submenu"><a href="dummy.html" class="menu_link">Our Motto</a></li>
    <li class="li_submenu">The Staff</li>
    </ul></li>
  <li class="li_standart" onmouseover="makevisible('submenu3')"  onmouseout="makeinvisible('submenu3')">Classes
    <ul id="submenu3">
    <li class="li_submenu">Primary</li>
    <li class="li_submenu">Preparatoria</li>
    <li class="li_submenu">Secondary</li>
    </ul></li>
  <li class="li_standart">Contact</li>
</ul>
</td>

und das javascript workaround fuer den IE

function makevisible(which)
{
document.getElementById(which).style.display = "block";
}

function makeinvisible(which)
{
document.getElementById(which).style.display = "none";
}

Jetzt ist mein Problem, dass im IE Platz unter dem Menuepunkt, wo man grade drauf ist freigehalten wird, fuer die zusaetzliche Liste, die die Untermenues enthaelt, obwohl ich diese Liste ja per position relative verschoben habe. FF machts mal wieder richtig.

Wers mal sehen will:http://minialanguageschool.lima-city.de/Proposition/Design.html

Danke im Voraus

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

simuliertes

simuliertes hat kostenlosen Webspace.

0:02, 28.10.2009

minialanguageschool schrieb:
[..]

Jetzt ist mein Problem, dass im IE Platz unter dem Menuepunkt, wo man grade drauf ist freigehalten wird, fuer die zusaetzliche Liste, die die Untermenues enthaelt, obwohl ich diese Liste ja per position relative verschoben habe. FF machts mal wieder richtig.
[..]

Hab kurz rumprobiert und meine Lösung wäre das Du doch position:absolute machst dafür aber einfach den wert "bottom" entfernst (der dadurch das er nicht definiert ist ja relativ wird)

Der ganze Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>submenuetest</title>
	<style type="text/css" >
	ul#menu_list      {margin:0;padding:0;}
ul#menu_list li   {list-style:none;margin:0;padding:0;background-image:url(img/button.gif);background-repeat:no-repeat;width:162px;height:40px;text-align:center;line-height:40px;}
ul#menu_list li ul li {width:162px;height:40px;text-align:center;line-height:40px;}
ul#menu_list li ul {display:none; position:absolute; left:161px; }
.menu_link        {display:block;}
ul#menu_list li:hover ul {display:block;}
	</style>
	<script type="text/javascript">
	function makevisible(which)
{
document.getElementById(which).style.display = "block";
}

function makeinvisible(which)
{
document.getElementById(which).style.display = "";
}
	</script>
</head>
<body>
<td class="menu">
<ul id="menu_list">
  <li class="li_standart">Home</li>
  <li class="li_standart" onmouseover="makevisible('submenu2')"  onmouseout="makeinvisible('submenu2')">About us
    <ul id="submenu2">
    <li class="li_submenu"><a href="dummy.html" class="menu_link">Our Motto</a></li>
    <li class="li_submenu">The Staff</li>
    </ul></li>
  <li class="li_standart" onmouseover="makevisible('submenu3')"  onmouseout="makeinvisible('submenu3')">Classes
    <ul id="submenu3">
    <li class="li_submenu">Primary</li>
    <li class="li_submenu">Preparatoria</li>
    <li class="li_submenu">Secondary</li>
    </ul></li>
  <li class="li_standart">Contact</li>
</ul>
</td>
</body>
</html>

Autor dieses Themas
minialanguageschool

minialanguageschool hat kostenlosen Webspace.

14:51, 28.10.2009
Hi
dein Vorschlag hat fast funktioniert:
leider hats dann im FF das Menue zerhauen, deshalb hab ichs so gelassen und dann fuer den IE ein spezielles javascript gemacht, dass diese Werte nachtraeglich aendert (im IE funzt es ja sowieso nur mit js, also kein Problem)
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city