...

View Full Version : Elements of website don't work in IE



mjcuva
06-05-2012, 01:57 AM
On the site I'm working on for my high school basketball team, certain elements don't work in Internet Explorer. The site is hermantownbasketball.com. The boys basketball sidebar should have nested drop down menus, one when you mouse over the team, such as "High School" and then another when you mouse over the grade under the team, such as 9th grade. This works perfectly fine in chrome, however, I can't get it to work in any version of Internet Explorer. Below is the part of the html and the corresponding css I am using.

Unfortunately, I don't know enough css to know which part of my code IE doesn't like or how to fix it.

Any help is greatly appreciated!


<span class = "boyItem">
<h3>High School</h3>

<li class="group">
<h4>9th Grade</h4>
<div class = "nested">Schedule</div>
<div class = "nested">Events</div>
<div class ="nested">Forms</div>
<div class ="nested">Calendar</div>
</li>
<li class="group">
<h4>JV/Varsity</h4>
<div class = "nested">Schedule</div>
<div class = "nested">Events</div>
<div class = "nested">Forms</div>
<div class = "nested">Calendar</div>
</li>

</span>


/* Creates the box around the title for each boy section. */
.boyItem h3 { background:#1C23E8;
color:#EFFA20;
padding-right:2px; padding:10px;
font-size:18px;
margin-left:-30px;
margin-top:-10px;
}


.boyItem h3:hover { background:#2A8FF5; }

/* Prevents the boy sub-sections from being visable */
.boyItem li h4 { position: absolute; left:-9999px; font-size:15px; list-style-type:none;}

/* Shows the boy sub-sections when user mouses over the section title. */
.boyItem:hover li h4 {
position:relative;
left:10px;
background:#1C23E8;
color:#EFFA20;
padding-left:20px;
padding:5px;
}

.boyItem:hover li h4:hover { background:#2A8FF5;}


.nested { position:absolute;
left:-9999px;
background:#352EFF;
color:#EFFA20;
padding-right:2px;
padding:4px;
font-size:14px;
margin:2px;
margin-left:30px;
margin-top:0px;
margin-right:0px;
margin-bottom:-2px;}

.group:hover .nested {position:relative; left:0px; }
.group:hover .nested:hover { background:#2A8FF5}

Lerura
06-05-2012, 02:46 AM
twice you have 2 :hover within the same selector.
.boyItem:hover li h4:hover { background:#2A8FF5;} and
.group:hover .nested:hover { background:#2A8FF5}
I believe that is what is confusing IE.

renove he first :hover each so you get

.boyItem li h4:hover { background:#2A8FF5;} and
.group .nested:hover { background:#2A8FF5}

the :hover on the parent element, implies that it also is possible to hover the child, without hovering the parent. which makes no sense.

mjcuva
06-05-2012, 02:53 AM
twice you have 2 :hover within the same selector.
.boyItem:hover li h4:hover { background:#2A8FF5;} and
.group:hover .nested:hover { background:#2A8FF5}
I believe that is what is confusing IE.

renove he first :hover each so you get

.boyItem li h4:hover { background:#2A8FF5;} and
.group .nested:hover { background:#2A8FF5}

the :hover on the parent element, implies that it also is possible to hover the child, without hovering the parent. which makes no sense.

I fixed it, unfortunately, it still isn't working in IE...

DrDOS
06-05-2012, 06:55 PM
I've totally given up on using css hover effects for drop down menus. I spent many hours building and testing them, but different browsers work differently in css and there was always some problem or other. So I've completely switched to javascript with display: block; and display: none; for my menus. The javascript is standardized and very old code, my menus work on IE5.5 in Window95, and just a well in Chrome or Opera.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum