Menüleiste im IE 6 horizontal gespiegelt

**heiderdeify** · 22.06.2009 14:37

hallo zusammen
meine index.html hat folgende Struktur:
header (div)
nav (div)
darunter links bild (div) - daneben content (div)

im div nav befindet sich ein spry "menuleiste": float right

zu meiner Frage
in Safari ist alles ok in firefox auch, nur beim internet explorer 6 wird diese Menüleiste nach links verschoben und das Hintergrundbild wird überhaupt nicht gezeigt
genauer
im div nav gibt es 4 Items: eins - zwei - drei - vier (rechts gefloated)
im IE erscheinen diese in umgekehrter Reihenfolge: vier - drei - zwei - eins und dann auch noch linksbündig
wieso ?
wie kann ich das "richten" ?

**jayjay** · 22.06.2009 15:38

gibts nen link? oder code?
so ist das wie mit der katze im sack...

**heiderdeify** · 22.06.2009 17:46

so - lange Liste

Quellcode

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>tralala</title>
<link href="styles.css" rel="stylesheet" type="text/css" /><!--[if IE 5]>
<style type="text/css"> 
/* Fügen Sie CSS-Box-Modell-Korrekturen für IE 5* in diesen bedingten Kommentar ein. */
. #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* Fügen Sie CSS-Korrekturen für alle IE-Versionen in diesen bedingten Kommentar ein. */
. #sidebar1 { padding-top: 30px; }
. #mainContent { zoom: 1; }
/* Mit der obigen proprietären Zoom-Eigenschaft wird IE die Eigenschaft hasLayout zugewiesen, die zur Verhinderung verschiedener Fehler erforderlich ist. */
</style>
<![endif]-->
<style type="text/css">
<!--
#mainContent p {
	font-size: 85%;
	padding-right: 50px;
}
.fett {
	font-weight: bold;
	text-decoration:none;
	font-size: 100%;
	color:#000
}

-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
  <div id="header">
    <h1>&nbsp;</h1>
  <!-- end #header --></div>
  <div id="nav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">vier</a></li>
      <li><a class="MenuBarItemSubmenu" href="#">drei</a>
        <ul>
          <li><a href="#">u1</a></li>
          <li><a href="#">u2</a></li>
          <li><a href="#">u3</a></li>
        </ul>
      </li>
      <li><a href="#">zwei</a></li>
      <li><a href="#">eins</a></li>
    </ul>
  </div>

  
<div id="sidebarIndex">
  <!-- end #sidebar1 -->
</div>
  <div id="mainContent">
    <h2>TEXTTEXTTEXT</h2>

	<!-- end #mainContent --></div>
	<!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. --><br class="clearfloat" />
  <div id="footer">
    <ul>
      <li><a href="#">text</a></li>
      <li><a href="#">text</a></li>
      <li><a href="#">text</a></li>
      <li><a href="#">text</a></li>
      <li><a href="#">text</a></li>
    </ul>
    <!-- end #footer -->
  </div>
  <!-- end #container -->
</div><script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1");
//-->
</script>
</body>
</html>

css

Code:

@charset "UTF-8";

body  {
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #28446C;
}
#container {
	width: 980px; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	border: 1px solid #000000;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #FCF6E8;
	border: 2px solid #9F1200;
	padding: 2px;
} 
#header {
	background-color: #FEF4E8;
	background-image: url(Images/header.jpg);
	background-repeat: no-repeat;
	height: 123px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 20px;
} 
#header h1 {
	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
}
#sidebar1 {
	float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
	width: 273px;
	font-size: 85%;
	background-color: #FEF4E8;
	background-repeat: no-repeat;
	height: 531px;
	margin: 0px;
	padding: 0px;
}
#sidebarIndex {
	width: 273px;
	background-color: #FEF4E8;
	height: 873px;
	float: left;
	background-image: url(leftSideImage/indexleftSide.jpg);
	background-repeat: no-repeat;
}
#mainContent {
	background-color: #FEF4E8;
	padding-top: 20px;
	margin: 0px;
	float: left;
	width: 707px;
} 
#mainContent h1 {
	margin: 0px;
	padding: 0px;
}

#footer {
	background-image: url(Images/footer.jpg);
	background-repeat: no-repeat;
	height: 81px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 20px;
	background-color: #FEF4E8;
} 
#footer p {
	margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
	padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
}
.fltrt { /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#footer ul {
	list-style-type: none;
	float: right;
	padding-top:2.4em;
	margin-top: 0;
	margin-right: 0em;
	margin-bottom: 0;
	margin-left: 0em;	
}
#footer ul li {
	display: inline;
}
#footer ul li a {
	text-decoration: none;
	color: #FEF4E8;
	margin-left: 1em;
	margin-right: 1.5em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 0.6em;
	padding-right: 1em;
}
#nav {
	height: 33px;
	background-image: url(Images/navigation.jpg);
	background-repeat: no-repeat;
	background-color: #FEF4E8;
}

css menubar

Code:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

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

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

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

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

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */

ul.MenuBarHorizontal
{
	list-style-type: none;
	font-size: 90%;
	cursor: default;
	width: auto;
	margin-top: 0px;
	margin-right: 40px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	/*width: 6em;*/width: 5.3em;
	float: right;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	/*width: 7em;*/width: 8.4em;
	position: absolute;
	left: -1000em;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	float: none;
	/*width: 7em;*/width: 8.4em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

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

 DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	margin-top: -4px;
	margin-left: 6px;
	border: thin solid #FC3;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	background-color: #FCF6E8;
	color: #333;
	text-decoration: none;
	text-align: center;   /*text in allen Menus steht auf CENTER*/
	padding-top: 0.5em;
	padding-right: 0.75em;
	padding-bottom: 0.5em;
	padding-left: 0.75em;
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #D04C00;
}


/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	background-color: #28446C;
	color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	background-color: #F90;
	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.MenuBarHorizontal a.MenuBarItemSubmenu
{
}
#MenuBar1 li .MenuBarSubmenuVisible li a {
	text-align: left;
	font-size: 90%;
}
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
}
/* 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.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
}
/* 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.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{

}




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

 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.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* 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.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
}

**heiderdeify** · 24.06.2009 14:24

fehlt noch was ?

**hero-master** · 25.06.2009 16:04

Moin

kann das mit dem IE6 nicht nachvollziehen, habe den wichtigen Teil deienes Codes bei mir getestet und es sieht genau gleich aus wie im FF. Es könnte was in der JS-Datei nicht stimmen? Dabei wäre ein Onlinbeispiel immer hilfreich, damit man das genau nachvollziehen kann woran es genau liegt, damit jeder die "gleichen Vorraussetzungen" hat

zur Startseite vom TP

Thema: Menüleiste im IE 6 horizontal gespiegelt

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Menüleiste im IE 6 horizontal gespiegelt

Ähnliche Themen

Menüleiste

iTunes -> Menüleiste

Das Internet wird gespiegelt

Menüleiste

menüleiste mit unterpunkten

Aktive Benutzer

Aktive Benutzer