Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Elements of website don't work in IE

    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!

    Code:
     <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>
    Code:
    /* 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}

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    911
    Thanks
    0
    Thanked 120 Times in 119 Posts
    twice you have 2 :hover within the same selector.
    Code:
    .boyItem:hover li h4:hover { background:#2A8FF5;}
    and
    Code:
    .group:hover .nested:hover { background:#2A8FF5}
    I believe that is what is confusing IE.

    renove he first :hover each so you get
    Code:
    .boyItem li h4:hover { background:#2A8FF5;}
    and
    Code:
    .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.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Lerura View Post
    twice you have 2 :hover within the same selector.
    Code:
    .boyItem:hover li h4:hover { background:#2A8FF5;}
    and
    Code:
    .group:hover .nested:hover { background:#2A8FF5}
    I believe that is what is confusing IE.

    renove he first :hover each so you get
    Code:
    .boyItem li h4:hover { background:#2A8FF5;}
    and
    Code:
    .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...

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,922
    Thanks
    15
    Thanked 229 Times in 229 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •