Spry Menu Bar Displays wrong in explorer

Question

famousexpert 0 Newbie Poster

14 Years Ago

I have read a million posts about this problem to no avail. I was wondering if ayone could look at my test site and tell me why in IE on a PC my spry sub menu bars drop to the right a bit?
www.americanaccents.com/test/index.html
Kind Regards

web-design

3 Contributors
7 Replies
129 Views
1 Month Discussion Span
Latest Post 14 Years Ago Latest Post by elninomago

MJ Pieterse 2 Poster

14 Years Ago

you need to set your margin on your style sheet.

if you can paste your spry style sheet it will be a lot easier for people to add to that coding and to see what is wrong, instead of them having to extract your code from your page.

MJ Pieterse 2 Poster

14 Years Ago

mmm... try changing your margin-left from margin-left:2px to margin-left:-10px

if that does not work, you will have to tweak it in your html, for instance:

<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="#">More</a>
    <ul>
       <li style="margin-left:-10px"><a href="option1.html">Option 1</a></li> //margin to minus whatever
    </ul>
  </li>
</ul>

Edited 14 Years Ago by MJ Pieterse because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

elninomago · Answer 1 · 2010-06-01T07:04:22+00:00

I have read a million posts about this problem to no avail. I was wondering if ayone could look at my test site and tell me why in IE on a PC my spry sub menu bars drop to the right a bit?
www.americanaccents.com/test/index.html
Kind Regards

I'm having the same problem on my site. if anyone could help, that would be great.

thanks

elninomago · Answer 2 · 2010-06-01T20:46:12+00:00

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

 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
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 95%;
	cursor: default;
	width: 936px;
	background-color: #f2f2f2;
	font-family: Calibri;
	color: #FFFfff;
}
/* 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
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: auto;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	cursor: pointer;
	width: 117px;
	float: left;
	background-color: #000;
	
	
}



/* 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: 95%;
	z-index: 1020;
	cursor: default;
	width: 117px;
	position: absolute;
	left: -1000em;
	background-color: #ffffff;
	height: auto;
	float: none;
	margin-top: 5px;
	margin-right: 2px;
	margin-bottom: 5px;
	margin-left: 2px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, the background of the pull down menus.  we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
	background-color:#fff;
	
	
	
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 117px;
	background-color: #fff;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 2px;
	color: #000;
}
	
	
	
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: auto;
	
}
/* ???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: 0;
	background-color: #e6e6e6;
	color:#000;
	font-size: 95%;
	margin: auto;
	width: 117px;
}

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

 DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	border: 0px #000;
}
/* this is the text highlighted area for Western Canda, Ontario, etc. but not a hover, just the colour box around the text.  Menu items are a  block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	font-size: 100%;
	cursor: pointer;
	background-color: #fff;
	color: #000;
	text-decoration: none;
	font-family: Calibri;
	width: 117px;
	text-align:center;
	
}
/* this is the western canada, ontario menu that depicts what happens in a hover. Menu items that have mouse over or focus have a white background and black text that's bolded */

ul.MenuBarHorizontal a:hover 
{
	background-color: #fff;
	color: #000;
	font-family: Calibri;
	font-size: 100%;
	margin: auto;
	width: 117px;
	font-weight: bold;
	
}
ul.MenuBarHorizontal a:focus
{
	font-family: Calibri;
	font-size: 100%;
	margin: auto;
	width: 117px;
	height:auto;
	font-weight: bold;
	background-color: #fff;


}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */


/*this first one is the hover (mouse passing over)of the western canada, ontario, etc menu refers to the font colour on hover.*/

ul.MenuBarHorizontal a.MenuBarItemHover
{
	background-color: #fff;
	font-size: 100%;
	color: #0101df;
	margin: auto;
	width: 117px;
	left:auto
}
ul.MenuBarHorizontal a.MenuBaraHover
{
	background-color: #000;
	font-size: 100%;
	color: #fff;
	margin: auto;
	width: 117px;
	
}



ul.MenuBarHorizontal a.MenuBarItemVisible
{
	background-color: #000;
	font-size: 100%;
	color: #fff;
	margin: auto;
	width: 117px;
}

/*this next menu is for the */

 
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
 {
	background-color: #d8d8d8;
	font-size: 95%;
	color: #000;
	margin: auto;
	width: 117px;
 }


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

 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
{
	background-image: none;
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-color: #000;
	color: #fff;
	font-family: Calibri;
	font-weight: bold;
}



/* 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
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-color: #e6e6e6;
}
/* 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
{
	background-image: none;
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-color: #000;
	color: #fff;
}


/* 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
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	background-color: #e6e6e6;
}

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

 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;
	}
}

elninomago · Answer 3 · 2010-06-03T02:35:33+00:00

Thanks. but tried this. It makes IE look better, but creates a problem in firefox.

MJ Pieterse 2 Poster · Answer 4 · 2010-06-03T14:02:05+00:00

i would suggest that you use conditional commenting then. create it correctly for FF and use the conditional comments to overwrite it for IE to work properly

elninomago · Answer 5 · 2010-06-03T18:04:16+00:00

Actually got it to work now in compatability mode. But now the submenus appear too wide. Here's the new css.

thanks again for all the help.

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

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
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 95%;
cursor: default;
width: 936px;
background-color: #f2f2f2;
font-family: Calibri;
color: #FFFfff;
}
/* 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
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
    margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: 117px;
	float: left;

}



/* 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: 95%;
	z-index: 1020;
	cursor: default;
	width: 117px;
	position: absolute;
	left: -1000em;
	background-color: #ffffff;
	height: auto;
	float: none;
	margin-top: 5px;
	margin-right: 2px;
	margin-bottom: 5px;
	margin-left: 2px;
	
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, the background of the pull down menus. we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
background-color:#fff;



}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 117px;
background-color: #fff;
margin-left:0px;
margin-right:0px;
margin-top: 5px;
margin-bottom: 2px;
color: #000;
}



/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: auto;

}
/* ???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: 0;
background-color: #e6e6e6;
color:#000;
font-size: 95%;
margin: auto;
width: 117px;
}

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

DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 0px #000;
}
/* this is the text highlighted area for Western Canda, Ontario, etc. but not a hover, just the colour box around the text. Menu items are a block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
font-size: 100%;
cursor: pointer;
background-color: #fff;
color: #000;
text-decoration: none;
font-family: Calibri;
width: 117px;
text-align:center;



}
/* this is the western canada, ontario menu that depicts what happens in a hover. Menu items that have mouse over or focus have a white background and black text that's bolded */

ul.MenuBarHorizontal a:hover 
{
background-color: #fff;
color: #000;
font-family: Calibri;
font-size: 100%;
margin: auto;
width: 117px;
font-weight: bold;

}
ul.MenuBarHorizontal a:focus
{
font-family: Calibri;
font-size: 100%;
margin: auto;
width: 117px;
height:auto;
font-weight: bold;
background-color: #fff;


}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */


/*this first one is the hover (mouse passing over)of the western canada, ontario, etc menu refers to the font colour on hover.*/

ul.MenuBarHorizontal a.MenuBarItemHover
{
background-color: #fff;
font-size: 100%;
color: #0101df;
margin: auto;
width: 117px;
left:auto
}
ul.MenuBarHorizontal a.MenuBaraHover
{
background-color: #000;
font-size: 100%;
color: #fff;
margin: auto;
width: 117px;

}



ul.MenuBarHorizontal a.MenuBarItemVisible
{
background-color: #000;
font-size: 100%;
color: #fff;
margin: auto;
width: 117px;
}

/*this next menu is for the */


ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #d8d8d8;
font-size: 95%;
color: #000;
margin: auto;
width: 117px;
}



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

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
{

background-color: #000;
color: #fff;
font-family: Calibri;
font-weight: bold;
}



/* 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;
}
}