Hallo Leute,
ich hab ein großes Problem,
ich soll ne Seite erstellen, möglichst barrierearm.
Soweit sogut, jedoch stellt sich die Seite im IE anderst dar als im Firefox.
Wo liegt mein Fehler?
Menüdemo
Code:
/* menu */
* {
margin: 0;
padding: 0;
}
#menue {font-size: 12px; font-weight: bold; width: 1062px; height: 90px; margin: 0; background: url(../image/menue_hintergrund.png) repeat-x;z-index:90000;}
#menue ul { margin-left: 330px; position:absolute; width: 100%; bottom:0; z-index:999;}
#menue ul li {height: 48px; list-style: none; margin: 0; float: left; display: block;}
#menue ul li a {text-decoration: none; display: block; height: 48px; line-height: 60px; font-size: 1.2em; padding: 0 0 0 10px; color: #0A1F49; background: url(../image/menue_links_normal.gif) no-repeat bottom left;}
#menue ul li a span {text-align: center; float: left; padding-right: 10px; height: 48px; background: url(../image/menue_rechts_normal.gif) no-repeat bottom right;}
#menue ul li a:hover, #menue ul li:hover a { text-indent: 0; line-height: 44px; cursor: pointer; background: url(../image/menue_links_an.gif) no-repeat bottom left;}
#menue ul li a:hover span, #menue ul li:hover a span { text-indent: 0; font-style: normal; background: url(../image/menue_rechts_an.gif) no-repeat bottom right;}
/*#menue ul li a.current, #menue ul li a.section, #menue ul li a.section:hover, #menue ul li a.current:hover { text-transform: uppercase; line-height: 44px; cursor: pointer; background: url(../image/menue_links_aktuelle_rubrik.gif) no-repeat bottom left;}
#menue ul li a.current span, #menue ul li a.section span, #menue ul li a.section:hover span, #menue ul li a.current:hover span { text-indent: 0; font-style: normal; background: url(../image/menue_rechts_aktuelle_rubrik.gif) no-repeat bottom right;}*/
#menue ul li#menueClosing {background: url(../image/menue_links_normal.gif) no-repeat bottom left; width: 30px;}/*
/* sub-menu (level 1) */
#menue ul li ul, #menue ul li:active ul {text-indent:0; margin-left: 0px; width: auto; float: none; position: absolute; left: -49999px; top:48px;}
#menue ul li:hover ul {left: auto; text-indent:0;}
#menue ul li li {font-size: 0.9em; list-style: none; float: none; height: auto; position: relative;}
#menue ul li li a {
width: 100px;
font-size: 12px;
font-weight: normal;
color: #0e295c;
height: auto;
line-height: 18px;
/* background: #0A1F49; */
padding: 5px 10px 5px 10px;
outline-width: 0;
filter:Alpha(opacity=100, finishopacity=0, style=0); !important
-moz-opacity: 0.75; !important
opacity: 0.75; !important
overflow: hidden;
border-bottom: 1px solid #b3c9d4;
}
#menue ul li:hover li a {line-height: 18px; background: #e7eff5;}
#menue ul li li a:hover {
width: 100px;
height: auto;
line-height: 18px;
background: #465672;
color: #0e295c;
padding: 5px 10px 5px 10px;
filter:Alpha(opacity=100, finishopacity=0, style=0); !important
-moz-opacity: 0.75; !important
opacity: 0.75; !important
overflow: hidden;
}
#menue ul li li a span {
/*background: transparent; */
float: none;}
#menue ul li:hover li a span {
background: transparent;
float: none;
}
#menue ul li li a.current, #menue ul li li a.section {
background: #8c9daf;
color: #ffffff;
text-transform: uppercase;
line-height: 18px;
filter:Alpha(opacity=100, finishopacity=0, style=0); !important
-moz-opacity: 0.75; !important
opacity: 0.75; !important
}
#menue ul li li a.section:hover, #menue ul li li a.current:hover {
background: #a3bcd0;
color: #0e295c;
text-transform: uppercase;
line-height: 18px;
filter:Alpha(opacity=100, finishopacity=0, style=0); !important
-moz-opacity: 0.75; !important
opacity: 0.75; !important
}
#menue ul li li:hover a {background-color: #c3d5e2; color: #0e295c;}
#menue ul li li:hover a:hover {background-color: #465672; color: white;}
#menue ul li li:hover a.current, #menue ul li li:hover a.section {background: #8c9daf; color: #ffffff;}
#menue ul li li a.current span, #menue ul li li a.section span, #menue ul li li a.section:hover span, #menue ul li li a.current:hover span {
font-style: normal;
/* background: transparent; */
}
#menue ul li li a span em {font-style: normal;}
/*.menueansicht {
filter:Alpha(opacity=0, finishopacity=0, style=0); !important
-moz-opacity: 0.0; !important
opacity: 0.0; !important
} */
Code:
<div style="position: absolute; top: 109px; left: 101px; filter:Alpha(opacity=100, finishopacity=0, style=0); -moz-opacity: 0.75; opacity: 0.75;" id="menue">
<ul>
<li><a href="#" class="menueansicht"><span>Veranstaltung</span></a>
<ul>
<li><a href="#" class="menueansicht" title="Das Programm"><span><em>Programm</em></span></a></li>
<li><a href="#" title="Der Schiffsfahrplan"><span><em>Fahrplan</em></span></a></li>
</ul>
</li>
<li><a href="#"><span>Besucherservice</span></a>
<ul>
<li><a href="#" title="Eintrittspreise"><span><em>Eintrittspreise</em></span></a></li>
<li><a href="#" title="Pauschalangebote"><span><em>Pauschalen</em></span></a></li>
</ul>
</li>
<!-- leerer Reiter zum Menüabschluß -->
<li id="MenuClosing"></li>
<!-- ############################## -->
</ul>
</div>
Menüdemo