Hallo!
Ich habe noch immer ein Problem, das auf diesem Thread resultiert. Nun habe ich im linkDiv ein Menu eingebaut, das im IE 7 auch wunderbar funktioniert. Firefox und Opera machen allerdings einen ungewollten Abstand zwischen dem Menu und dem Headbereich. Das ganze sieht in den einzelnen Browsern wie folgt aus: http://www.thomasd.info/temp/UnterschiedlicheDarstellung.jpg
"Schuld" daran, ist eine <ul>, die versteckt ist und bei onmouseover auf "Produkte" erscheint. Die Darstellung wurde mit visibility gesteuert. Gut, dachte ich mir, dann nehmen wir halt display, damit das versteckte Element keinen Platz einnimmt. Soweit so gut, es funktioniert so in allen Browser ... solange ich halt nicht das Menu durch onmouseover auf "Produkte" aufrufe. Denn dann wird display auf 'inline' gesetzt ('block' habe ich auch schon probiert), und es kommt in Firefox und Opera wieder zu den ungewollten Abständen.
Daraufhin dachte ich mir, dass ich das content-Div einfach absolut positioniere. Dies geht aber aufgrund der in diesem Thread beschriebenen Problemstellung nicht, da dann das Menu wieder im Hintergrund des Contents fallen würde. Somit bin ich irgendwie in der Zwickmühle und weiß nicht recht, was ich nun tun soll, damit einerseits der ungewollte Abstand in Firefox/Opera nicht zu sehen ist, andererseits das Menu aber vor dem Content-Div positioniert wird
.
index.php
CSS:
Dropdown-CSS:
Dieser Post ist nun ziemlich umfangreich geworden, nur leider ist das Problem IMO anders schwer zu beschreiben. Vielleicht kann mir ja hier jemand einen passenden Tipp geben, um diese Misere auszumerzen ...
Ich habe noch immer ein Problem, das auf diesem Thread resultiert. Nun habe ich im linkDiv ein Menu eingebaut, das im IE 7 auch wunderbar funktioniert. Firefox und Opera machen allerdings einen ungewollten Abstand zwischen dem Menu und dem Headbereich. Das ganze sieht in den einzelnen Browsern wie folgt aus: http://www.thomasd.info/temp/UnterschiedlicheDarstellung.jpg
"Schuld" daran, ist eine <ul>, die versteckt ist und bei onmouseover auf "Produkte" erscheint. Die Darstellung wurde mit visibility gesteuert. Gut, dachte ich mir, dann nehmen wir halt display, damit das versteckte Element keinen Platz einnimmt. Soweit so gut, es funktioniert so in allen Browser ... solange ich halt nicht das Menu durch onmouseover auf "Produkte" aufrufe. Denn dann wird display auf 'inline' gesetzt ('block' habe ich auch schon probiert), und es kommt in Firefox und Opera wieder zu den ungewollten Abständen.
Daraufhin dachte ich mir, dass ich das content-Div einfach absolut positioniere. Dies geht aber aufgrund der in diesem Thread beschriebenen Problemstellung nicht, da dann das Menu wieder im Hintergrund des Contents fallen würde. Somit bin ich irgendwie in der Zwickmühle und weiß nicht recht, was ich nun tun soll, damit einerseits der ungewollte Abstand in Firefox/Opera nicht zu sehen ist, andererseits das Menu aber vor dem Content-Div positioniert wird
.index.php
Code:
<div id="mainBackground">
<div id="mainContainer">
<div id="header">
<div id="linkDiv">
...
<span id="myMenu">
<ul id="myMenuList" onmouseover="javascript: menuhandleOver();" onmouseout="javascript: menuhandleOut();">
<?php
for ($c=0; $c<sizeof ($produktItems); $c++)
{
?>
<li onmouseover="javascript: this.className='selected';" onmouseout="javascript: this.className='';">
<a class="alignVertical" href="index.php?content=information&kategorie=<?php echo noUmlauts ($produktItems[$c]);?>">
<?php echo $produktItems[$c];?>
</a>
</li>
<?php
}
?>
</ul>
</span>
</div>
</div>
<div id="content" class="clearfix">
</div>
<div id="right">
</div>
</div>
</div>CSS:
Code:
#mainBackground
{
position: absolute;
text-align: left;
height: 100%;
margin: 0 auto;
padding: 0;
width: 100%;
top: 0px;
left: 0px;
background-image: url("res/site/background.png");
background-repeat: repeat;
overflow: auto;
z-index: 0;
}
#mainContainer
{
position: relative;
left: 50%;
width: 700px;
height: 100%;
margin-left: -350px;
background-image: url("res/site/basicFrame.gif");
background-repeat: no-repeat;
z-index: 1;
}
#header
{
position: relative;
width: 700px;
height: 170px;
z-index: 2;
}
#content
{
width: 500px;
min-height: 583px;
background-color: white;
padding-top: 25px;
padding-bottom: 16px;
padding-left: 23px;
clear: both;
float: left;
z-index: 2;
}
#linkDiv
{
position: relative;
top: 153px;
left: 20px;
height: 19px;
width: 670px;
font-weight: bold;
word-spacing: -2pt;
white-space: nowrap;
z-index: 4;
}
#right
{
position: relative;
height: 510px;
width: 165px;
top: 95px;
left: 6px;
float: left;
z-index: 2;
}Dropdown-CSS:
Code:
#myMenu
{
float: left;
}
#myMenuList
{
visibility: hidden;
/*display: none;*/
position: relative;
float: left;
margin-left: 9.3cm;
width: 4cm;
background-color: rgb(150, 150, 150);
color: white;
margin-top: 3px;
list-style-image: url("res/site/bullet.gif");
list-style-position: inside;
}
#myMenuList li
{
border: solid 0pt white;
border-bottom-width: 1pt;
padding: 4pt;
padding-top: 2pt;
padding-bottom: 2pt;
vertical-align: middle;
}
#myMenuList li.selected
{
background-color: rgb(153, 3, 3);
}
a.alignVertical
{
position: relative;
top: -1pt;
color: white;
}Dieser Post ist nun ziemlich umfangreich geworden, nur leider ist das Problem IMO anders schwer zu beschreiben. Vielleicht kann mir ja hier jemand einen passenden Tipp geben, um diese Misere auszumerzen
...
