PDA

View Full Version : Chrome CSS Drop Down Menu Messed Up in IE



domskidan
01-24-2011, 10:52 PM
1) Script Title: Chrome CSS Drop Down Menu (v2.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem:

I made some modifications to the CSS and now it's all fudged up in ie.

Here is the URL of the problem:

http://ampevent.com/

It works perfectly in every browser except IE Usually have the opposite problem.

CSS Code:

.chromestyle{
font-weight: bold;
margin: 0px;
padding: 0px;
z-index: 100;


}

.chromestyle:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
z-index: 100;

}

.chromestyle ul{
background: url(nav_bg.jpg) no-repeat left top;
text-align: center;
height: 48px;
padding-top: 15px;
position: static;
border-top-width: medium;
border-top-style: solid;
border-top-color: #999999;
margin-top: 0px;
margin-bottom: 0px;
z-index: 100;






}

.chromestyle ul li{
display: inline;
z-index: 100;



}

.chromestyle ul li a{
color: #2D2D36;
padding: 15px 20px 11px;
margin: 0;
text-decoration: none;
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
font-style: normal;
z-index: 100;


}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(down_nav_shade.jpg) repeat-x left top;
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
color: #99FF00;
text-decoration: none;
z-index: 100;


}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
font:normal 11px Tahoma;
z-index:100;
width: auto;
visibility: hidden;
border-top: 2px solid #999999;
border-right: 2px solid #999999;
border-bottom: 0 solid #999999;
border-left: 2px solid #999999;
background-repeat: repeat;
margin-top: 0px;
text-align: left;
padding: 0px;
color: #FFFFFF;



}


.dropmenudiv a{
width: auto;
border-bottom: 2px solid #999999;
text-decoration: none;
font-weight: bold;
font-family: Tahoma;
padding: 10px;
font-size: 10px;
color: #FFFFFF;
background-repeat: repeat;
display: block;
background-image: url(bgtrans.png);
z-index: 100;


}

* html .dropmenudiv a{
width: 100%;
z-index: 100;
}

.dropmenudiv a:hover{
font-family: Tahoma;
font-weight: bold;
color: #99FF00;
font-size: 10px;
padding: 10px;
display: block;
background-image: url(bgtransdown.png);
background-repeat: repeat-x;
background-position: left top;
z-index: 100;


}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}


HTML

<div class="chromestyle" id="chromemenu">

<ul>

<li><a href="index.php">Home</a></li>

<li><a href="#" rel="services">Services</a></li>

<li><a href="#" rel="showcase">AMP Showcase</a></li>

<li><a href="#" rel="social">Social</a></li>

<li><a href="http://ampevent.com/blog/">Blog</a></li>

<li><a href="#">Customers</a></li>

<li><a href="#" rel="about">About AMP</a></li>

</ul>

</div>



<div id="services" class="dropmenudiv" style="width: 113px;">

<a href="shell.php?dj_intro">Disc Jockey</a>

<a href="shell.php?prod">Production</a>

<a href="shell.php?epp">Audio/Visual</a>

<a href="shell.php?vp">Videography & Photography</a>

<a href="shell.php?web">Visual & Web Design</a>

<a href="shell.php?request">Request a Service</a>

</div>





<div id="showcase" class="dropmenudiv" style="width: 162px;"> <a href="shell.php?djp">Disc Jockey & Production</a> <a href="shell.php?epps">Event & Party Planning</a> <a href="shell.php?vps">Videography

& Photography</a> <a href="shell.php?vwds">Visual & Web Design</a> </div>



<div id="social" class="dropmenudiv" style="width: 93px;"> <a href="shell.php?facebook">Facebook</a>

<a href="shell.php?twitter">Twitter</a> <a href="javascript:bookmark()">Bookmark</a> </div>



<div id="about" class="dropmenudiv" style="width: 131px;">

<a href="shell.php?over">Overview</a>

<a href="shell.php?ampteam">AMP Team</a>

<a href="shell.php?mission">Mission Statement</a>

<a href="shell.php?cli">Company & Legal Information</a>

</div>

zaffuto234
02-18-2011, 05:05 AM
I have never seen that happen before.

vixonb
02-19-2011, 01:06 PM
hi there, try adding this:

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(down_nav_shade.jpg) repeat-x left top;
padding: 15px 20px 11px;
margin: 0;
font-family: Tahoma;
font-size: 17px;
font-weight: normal;
color: #99FF00;
text-decoration: none;

zaffuto234
02-20-2011, 10:53 PM
It still does not work in ie