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 7 of 7
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE7 a:hover issue

    Hi,
    I have searched forever and can not find a fix this problem. I have a menu that works in all browsers except IE7. It seems to be the standard IE7 hover problem but the forums say that IE7 fixed this and now a:hover should work given that you have the right doctype. This is my DOCTYPE declaration:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    Here is the CSS for the menu:
    Code:
    #mainContent_menu ul{
         list-style-type: none;
         padding: 0;
         margin: 0;
    }
    #mainContent_menu li a{
    	text-decoration:none;
    	display:block;
    	color:#FFFFFF;
    	width: 145px;
    	height: 1%;
    }
    #mainContent_menu li a:hover{
        background-color: #76B2e6;
        color: #FFFFFF;
    	}
    
    body#homepage ul li#home a, body#brandpage ul.none li#brands a, body#hellopage ul.none li#hello a, body#newpage ul.none li#new a, body#plugpage ul.none li#plug a {
      background: #76B2e6;
      color: #FFF;
    }
    and here is the HTML:
    Code:
    <body id="homepage"> 
    <div id="mainContent_menu"><ul>
                                           <li id="home"><a href="OurSpace.html">01. our space</a></li>
                                            <li id="brands"><a href="InspiringBrands.html">02. inspiring brands</a></li>
                                            <li id="hello"><a href="SayHello.html">03. say hello</a></li>
                                            <li id="new"><a href="NewAtBlu.html">04. new at blu</a></li>
                                            <li id="plug"><a href="PlugInto.html">05. plug into</a></li>
                                            </ul>                       
          </div></body>
    It is really just a simple menu that when you rollover a item the background goes blue, and stays blue for whatever page you are on. It works in IE6, FF, Opera, Safari, and Chrome but does nothing in IE7. Any help or suggestions would be greatly appreciated!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have try with the following,
    Code:
    #mainContent_menu li a{
    	text-decoration:none;
    	display:block;
    	width: 145px;
    	height: 1%;
    }
    #mainContent_menu li a:link,#mainContent_menu li a:visited{
    background-color: #76B2e6;
    color:#FFFFFF;
    }
    #mainContent_menu li a:hover,#mainContent_menu li a:active{
        background-color: #76B2e6;
        color: #FFFFFF;
    	}
    IE needs these pseudos in the Link,Visited, Hover, Active (LoVe-HAte) order, see http://www.w3schools.com/CSS/css_pseudo_classes.asp
    Last edited by abduraooft; 05-25-2009 at 04:34 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that was fast, but it didn't work. I changed it to the following, only omitting one line of your code because it made it so that the blue was always there irrelevant of if the item was hovered over or not.

    Code:
    #mainContent_menu li a{
    	text-decoration:none;
    	display:block;
    	color:#FFFFFF;
    	width: 145px;
    	height: 1%;
    }
    
    #mainContent_menu li a:link,#mainContent_menu li a:visited{
    color:#FFFFFF;
    }
    #mainContent_menu li a:hover,#mainContent_menu li a:active{
        background-color: #76B2e6;
        color: #FFFFFF;
    	}
    
    body#homepage ul li#home a, body#brandpage ul.none li#brands a, body#hellopage ul.none li#hello a, body#newpage ul.none li#new a, body#plugpage ul.none li#plug a {
      background: #76B2e6;
      color: #FFF;
    }
    I still get the same results - nothing in IE7. Any other suggestions?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    It is really just a simple menu that when you rollover a item the background goes blue, and stays blue for whatever page you are on.
    Code:
    body#homepage ul li#home a, 
    body#brandpage ul.none li#brands a, 
    body#hellopage ul.none li#hello a, 
    body#newpage ul.none li#new a, body#plugpage ul.none li#plug a {
    Any clues?

    (Your above css won't work in FF or any other browsers, for that particular requirement)

    PS: Make use of firebug, to inspect your element's style on run
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I forgot to delete the .none, you are right that it would not have worked with that still in there for the other pages but right now I am just looking at the home page, trying to get hover to work. I haven't even developed the other pages yet, just working on getting my template to work in all browsers first. Also, I do use firebug, and load of other FF addons to help with debugging but my problem is only in IE7.

    Any more suggestions?
    Last edited by dublin6; 05-25-2009 at 06:08 PM.

  • #6
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry, fixed second problem, now just the same old hover/active problem in IE7...
    Last edited by dublin6; 05-25-2009 at 07:31 PM. Reason: fixed

  • #7
    New Coder
    Join Date
    May 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No clue why this worked but I fixed it by turning it into a template and applying it to a new page.

    Now the problem in IE(6,7and8) is that in the new page the menu is shifted to the bottom of the page. Any idea why this would happen? If it would be benificial for me to post all of the code I can do.


  •  

    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
    •