Navigationsleiste Problem bei Darstellung im IE

fado · 29 August 2009

Hallo Community!

Ich brauche eure Hilfe. Hab leider nur sehr wenig Ahnung von der Materie...
Bei der Erstellung einer Homepage habe ich einen Navigationsleiste erstellt, die in Firefox problemlos funktioniert, im Internet Explorer allerdings weder funktioniert noch richtig dargestellt wird.

Kann mir jemand sagen woran das liegt und helfen dieses Problem zu lösen?

Quelltext:

HTML:

<ul id="MenuBar1" class="MenuBarVertical">
  <li>
  <a href="mainframe.html" title="ejw-oehringen"

target="mainFrame"onmouseover="MM_swapImage('Image21','','pictures/buttons/buttonhomedown.jpg',1)" onmouseout="MM_swapImgRestore()" ">
<img src="pictures/buttons/buttonhomeup.jpg" alt="home" name="Image21" width="128" height="29" border="0" id="Image21" /></a>
</li>
  <li><a href="ueberuns.html" title="ueberuns" target="mainFrame" onmouseover="MM_swapImage('Image22','','pictures/buttons/buttonueberunsdown.jpg',1)" onmouseout="MM_swapImgRestore()">
<img src="pictures/buttons/buttonueberunsup.jpg" name="Image22" width="128" height="29" border="0" id="Image22" />
</a>
    <ul>
      <li><a href="struktur.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image34','','pictures/buttons/buttonstrukturdown.jpg',1)">
<img src="pictures/buttons/buttonstrukturup.jpg" name="Image34" width="120" height="23" border="0" id="Image34" />
</a>
</li>
<li>
<a href="bak.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image33','','pictures/buttons/buttonbakdown.jpg',1)"><img src="pictures/buttons/buttonbakup.jpg" name="Image33" width="120" height="23" border="0" id="Image33" /></a></li><li><a href="kontakt.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image32','','pictures/buttons/buttonkontaktdown.jpg',1)"><img src="pictures/buttons/buttonkontaktup.jpg" name="Image32" width="120" height="23" border="0" id="Image32" />
</a>
</li>
<li>
<a href="kooperationkuen.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image35','','pictures/buttons/buttonkoopkuendown.jpg',1)"><img src="pictures/buttons/buttonkoopkuenup.jpg" name="Image35" width="120" height="23" border="0" id="Image35" /></a></li><li><a href="chronik.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image36','','pictures/buttons/buttonchronikdown.jpg',1)"><img src="pictures/buttons/buttonchronikup.jpg" name="Image36" width="120" height="23" border="0" id="Image36" /></a></li><li><a href="material.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image37','','pictures/buttons/buttonmaterialdown.jpg',1)"><img src="pictures/buttons/buttonmaterialup.jpg" name="Image37" width="120" height="23" border="0" id="Image37" /></a></li>
    </ul>
  </li>
  <li><a href="konzerte.html" title="konzerte" target="mainFrame" onmouseover="MM_swapImage('Image23','','pictures/buttons/buttonkonzertedown.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="pictures/buttons/buttonkonzerteup.jpg" alt="konzerte" name="Image23" width="128" height="29" border="0" id="Image23" /></a><ul><li><a href="rockintheruins.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image38','','pictures/buttons/buttonrockintheruinsdown.jpg',1)"><img src="pictures/buttons/buttonrockintheruinsup.jpg" name="Image38" width="120" height="23" border="0" id="Image38" /></a></li><li><a href="jrocknight.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image39','','pictures/buttons/buttonjrocknightdown.jpg',1)"><img src="pictures/buttons/buttonjrocknightup.jpg" name="Image39" width="120" height="23" border="0" id="Image39" /></a></li><li><a href="churchnight.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image40','','pictures/buttons/buttonchurchnightdown.jpg',1)"><img src="pictures/buttons/buttonchurchnightup.jpg" name="Image40" width="120" height="23" border="0" id="Image40" /></a></li></ul></li><li><a href="freizeiten.html" title="freizeiten" target="mainFrame" onmouseover="MM_swapImage('Image24','','pictures/buttons/buttonfreizeitendown.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="pictures/buttons/buttonfreizeitenup.jpg" name="Image24" width="128" height="29" border="0" id="Image24" /></a><ul><li><a href="kinderfreizeiten.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image41','','pictures/buttons/buttonkinderdown.jpg',1)"><img src="pictures/buttons/buttonkinderup.jpg" name="Image41" width="120" height="23" border="0" id="Image41" /></a></li><li><a href="teenfreizeiten.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image42','','pictures/buttons/buttonteenagerdown.jpg',1)"><img src="pictures/buttons/buttonteenagerup.jpg" name="Image42" width="120" height="23" border="0" id="Image42" /></a></li><li><a href="jugendfreizeiten.html" target="mainFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image43','','pictures/buttons/buttonjugendlichedown.jpg',1)"><img src="pictures/buttons/buttonjugendlicheup.jpg" name="Image43" width="120" height="23" border="0" id="Image43" /></a></li></ul></li><li><a href="international.html" title="international" target="mainFrame" onmouseover="MM_swapImage('Image19','','pictures/buttons/buttoninternationaldown.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="pictures/buttons/buttoninternationalup.jpg" name="Image19" width="128" height="29" border="0" id="Image19" /></a></li>

</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

Vielen Dank!

Mod-Edit: Code-Tags hinzugefügt - Beim nächsten Mal bitte dran denken (XraYSoLo)

Imbericle · 29 August 2009

Meine armen Augen :-o
SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei

Das es in Internet Browser net funzt liegt wahrscheinlich daran, das Microsoft, Javascript als ActiveX Steuerelemente behandelt und diese in den Grundeinstellungen ignoriert, auch wenn es schwachsinnig ist, halt n dummer tick von Microsoft.

Daher lass Javascript am besten weg, oder lege ein nocscript bereich an der mit ner css leiste ist, am besten machst du es gleich nur mit CSS

fado · 30 August 2009

Danke für deine Hilfe! Sorry für das Chaos beim Quelltext.
Soweit so gut, jetzt weiß ich, dass Microsoft nen Tick hat, aber wie funktioniert das jetzt in CSS?
Ich lese grad die Einführungen, aber da gehts immer nur um die Formatierung von Text mittels CSS.
Mein Problem is ja, dass die Navigationsleiste im IE zum einen nicht vollständig angezeigt wird und zum anderen die Untermenüs nicht richtig dargestellt werden

Imbericle · 30 August 2009

In Css ist onMouseover hover

HTML:

<style type="text/css">
#IddesObjekts: hover /*(Das hier ist ein Kommentar) dein Objekt kannst du auch anhand einer Klasse abändern dann mittels .Klassedesobjekts */
{
Eigenschaften die das Objekt bekommen soll wenn man mit der Maus darüber fährt. 
}
</style>

MfG

fado · 30 August 2009

Ok, wenn dir die AUgen eh schon wehtun, dann schick ich dir jetzt mal meine bisherige CSS

Code:

@charset "UTF-8";

/* SpryMenuBarVertical.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
    margin: 0;
    padding: 0;
    width: 9em;
    list-style-type: none;
    cursor: default;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [URL]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/URL] */
ul.MenuBarActive
{
    
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
    text-align: left;
    position: relative;
    margin: 0;
    padding: 0;
    list-style-type: none;
    visibility: visible;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
    position: absolute;
    cursor: default;
    left: -1000em;
    list-style-type: none;
    margin: -5% 0 0 95%;
    padding: 0;
    top: 10px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
    left: -10px;
    list-style-type: none;
    
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
    width: auto;

}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
    
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
    display: inline;
    cursor: pointer;
    background-color: #FFFFFF;
    color: #333;
    text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
    background-color: #0000FF;
    color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
    background-color: #33C;
    color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;

}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{

}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
    ul.MenuBarVertical li.MenuBarItemIE
    {
    display: block; 
    float: left;
    background: #FFF;
    }
}

Ich hab nämlich keine Ahnung wo ich den Befehl hover jetzt platzieren muss.

Mod-Edit: Code-Tags hinzugefügt - Und noch mal... (XraYSoLo)

Imbericle · 30 August 2009

1. bitte schreibe deinen code wenn du ihn in das forum postest so:

Code:

[html*]dein html code[/html]

ohne das sternchen.

2. Bitte LIES!!! Das Ding was sein aussehen änder soll, kopierst du ok

HTML:

#bla {bla;}

kopierst es, setzt hover dran, und änderst den inhalt sio ab wie es aussehen soll wenn man drüwer fährt!!!

HTML:

#bla:hover {bla wies aussehen soll wenn man drüber fährt; }

kompletter code dann

HTML:

#bla {bla;}
#bla:hover {bla wies aussehen soll wenn man drüber fährt; }

MfG siehe auch hier

Navigationsleiste Problem bei Darstellung im IE

fado

Neues Mitglied

Imbericle

Blogger

fado

Neues Mitglied

Imbericle

Blogger

fado

Neues Mitglied

Imbericle

Blogger

Neueste Beiträge