Subject : Display Spry menu in IE
Hello everyone,
Here is my problem:
- I created a Spry menu bar in Dreamweaver CS5 but it does not place himself in
the right place in IE (it goes at the top of the page) so that it works in
Mozilla. How? Create two style sheets? Put conditional comments?
I use version 7 of IE, Firefox version 4.0 and I am running Windows XP
(unfortunately).
Thank you for your help,
Html code:
<! - Menu ->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li> <a href="#"> <br/> Mountains and ports </ a> </ li>
A civilization <li> <a href="#"> <br/> Pyrenean </ a> </ li>
<li> <a href="#"> Networks <br/>
Medieval </ a> </ li>
<li> <a href="#"> Genesis and peculiarities <br/>
a border </ a> </ li>
<li> <a href="#"> Frontier <br/> place of danger </ a> </ li>
<li> <a href="#"> Frontier <br/> door hello </ a> </ li>
<li> <a href="#"> Links <br/> economic </ a> </ li>
<li> <a href="#"> People <br/>
Border </ a> </ li>
<li> <a href="#"> Vision <br/> the other </ a> </ li>
<li> <a href="#"> Frontier <br/> today </ a> </ li>
</ Ul>
The CSS:
/ * The outermost container of the Menu Bar, auto width box Year With No margin
or padding * /
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
}
/ * Set the active Menu Bar with this class, Currently setting z-index to
accomodatie IE rendering bug:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html * /
ul.MenuBarActive
{
z-index: 1000;
border: # E6E6E6;
}
/ * Menu item containers, position relative to this container Children and are
a fixed width * /
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 13px;
cursor: pointer;
float: left;
left: 4px;
top: 78px;
border-right: 1px solid # 333;
}
/ * Menu item containers are fixed width as parent Sami * /
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/*************************************************
******************************
DESIGN INFORMATION: describes color scheme, borders, fonts
**************************************************
*****************************/
/ * Submenu containers Borders Have we all sides * /
ul.MenuBarHorizontal ul
{
border: 4px solid # CCC;
}
/ * Menu items are a light gray Block With padding and no text decoration * /
ul.MenuBarHorizontal has
{
display: block;
cursor: pointer;
background-color: # FFF;
padding: 0.5em 0.75em;
color: # 3D93AA;
text-decoration: none;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
}
/ * 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: # E6E6E6;
color: # 62843A;
}
/ * 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: # E6E6E6;
color: # 62843A;
}
/*************************************************
******************************
SUBMENU INDICATION: styles if There Is a submenu Given Under a 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 Vertically centered (50%) *
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url (SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/ * 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 Vertically centered (50%) *
ul.MenuBarHorizontal ul 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 Vertically centered (50%) *
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url (SpryMenuBarDownHover.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 Vertically centered (50%) *
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url (SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*************************************************
******************************
BROWSER HACKS: the hacks below should "Be not changed UNLESS you are an Expert
**************************************************
*****************************/
/ * 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;
}
}
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
