spry menü im internet explorer

[Leonidas]

ich habe in meinem design ein vertikales menü eingebaut und lange zeit munter drauf los gebastelt.
jetz habe ich aus zufall mal die ganze seite im internet geöffnet und festgestellt, dass das komplette menü sich nach rechts verschoben hat.
da ich kein margin oder padding in meinem code gefunden habe, dass für die verschiebung verantwortlich sein könnte, bin ich nun ziemlich ratlos.

hier der code des menüs:

@charset "UTF-8";

/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
	margin-top: 5em;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 10.5em;
	white-space: nowrap;
	position: inherit;
	text-align: justify;
}
/* 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 same fixed width as parent */
ul.MenuBarVertical li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 10em;
	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
{
	margin: -1% 0 0 100%;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: absolute;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	left: -1000em;
	top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
	left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
	width: 8.2em;
}

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

 DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
	text-align: left;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
	border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
	display: block;
	cursor: inherit;
	background-color: #242424;
	padding: 0.5em 0.75em;
	color: #FFF;
	font-family: Calibri;
	text-align:left;
}
/* 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: #242424;
	color: #3E80E1;
	font-size: 100%;
	text-align: left;
	font-family: Calibri;
}
/* 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: #3E80E1;
	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
{
	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.MenuBarVertical li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background-color: #3E80E1;
	}
}
.btn1 {
	text-align: center;
	vertical-align: middle;
}

vielen dank schonmal für eure mühe

p.s.: falls sich jemand ein bild davon machen will : http://www.knicker-wortmann.de/Neu/T...l_Compose.html einfach einmal im ie und in ff öffnen

[phpBuddy]

Bitte die zum Quelltext passende Codebox benutzen. So wird sich das nämlich kein Mensch durchlesen. Danke!

[Leonidas]

alles klar, wusste ich nicht wird beim nächsten mal gemacht!

[hero-master]

alles klar, wusste ich nicht wird beim nächsten mal gemacht!

ist genehmigt

Dein Problem liegt glaube ich doch bei den Abständen, nämlich bei denen, die du nicht definiert hast:

ul.MenuBarVertical
{
	margin-top: 5em;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: 10.5em;
	white-space: nowrap;
	position: inherit;
	text-align: justify;
}

Listen haben nämlich vordefinierte Abstände. Somit müsstest du den übrigen margin-Werten eine 0 mitgeben. Das Ganze kannst du auch noch ziemlich kürzen:

{
	margin: 5em 0 0;
	padding: 0;
	list-style-type: none;
	width: 10.5em
}

[Leonidas]

danke erstmal für die hilfe..... also wenn ich die zeilen aus dem link einfüge in meinen code
* {
margin:0;
padding:0;
border:0;
list-style:none
}

dann klappts im ie super allerding dann nich mehr im firefox ....... kann man irgendwie diese 4 zeilen so eingeben, dass die nur für den ie gelten?

[Rinaldo]

kann man irgendwie diese 4 zeilen so eingeben, dass die nur für den ie gelten?

Conditional Comments

[hero-master]

allerding dann nich mehr im firefox

Dann ist was im CSS faul
CSS-Hacks

[Leonidas]

alles klar leute habs hinbekommen... die conditional comments waren der entscheidende haken ...... wieder einmal klasse hilfe von rinaldo danke... aber auch an alle anderen die sich bemüht haben

[Leonidas]

neues problem!

ich hab den rest ganz gut hinbekommen, aber wenn ich diese seite http://knicker-wortmann.de/Neu/TV_Loewe.html
im ie öffne dann sitzen die submenüs völlig falsch, im ff jedoch genau richtig.
ich hab schon im zugehörigen stylesheet rumgebastelt aber ich krieg die submenüs einfach nich nach links, so wie die andern!

irgendwer ideen, welchen wert ich verändern muss?

[Rinaldo]

alles klar leute habs hinbekommen... die conditional comments waren der entscheidende haken ...... wieder einmal klasse hilfe von rinaldo danke...

Ähem - hero-master hat es auch schon gesagt: Da ist dann was am CSS-Code faul, wenn Du hierfür Conditional Comments nutzen musst...

Ich füge als erstes bei jeder Site von mir * {margin:0; padding:0} ein - das stand noch nie in einem Conditional Comment.

Ich war ehrlich auch zu faul, mir das mal anzusehen - daher schnell der Hinweis auf Conditional Comments.

Vielleicht/Warscheinlich ist das neue Problem jetzt auch nur ein Folgefehler...

[Leonidas]

ok aber ich glaube es ist jetzt einfacher einen einzigen conditional comment hinzuzufügen, als nach dem entscheidenden fehler im css code zu suchen oder?

oder hättet ihr vorschläge woran im code es liegen könnte.... also ich bin auch nich zu faul um lange danach zu suchen aber ehrlich gesagt hab ich das schon gemacht und nix gefunden

[Leonidas]

ok ich hab das ganze anders gelöst bekommen.... und zwar hab ich einfach die originale css nochma rein gemacht und neu verändert (eig. genauso wie die vorherige) doch komischerweise klappts jetz alles.... weiß zwar nich wirklich was ich jetz anders gemacht habe aber es sitzt alles gut auch ohne conditional comments.

trotzdem nochmal danke