#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    6
    Rep Power
    0

    Trouble with css :hover menu in IE 7


    Hi, I've been at this for some time now. Currently building a site (development address: mainline.divsharp.com). Menu (left) was Javascript, its now CSS. Works fine in Chrome, Firefox and IE 8, but IE 7 is acting extremely strange. You can see the desired effect if you use a recent version of one of those browsers.

    When I pull it up in IE 7 on the homepage, I can't hover over the popup like I can in the other, more compliant browsers. It either hides the pane as soon as the mouse gets off the main menu link, or when the mouse leaves the picture once its over the pane.

    If I then click on, say, "Market Watch" and try to view the menu on an interior page, its even more erratic. I'm about at the end of what I know or can look up how to do here..

    If I can get the mouse over some part of the popout pane, it seems that if its over the content area of a div and not padding or margins, it stays open. For example, over the picture or over the grey area to the right... This might suggest something to someone..

    Unfortunately, the markup is clogged at best and my style is all over the place. Site is built in Wordpress and is a custom theme. Hopefully this will help:

    Home page style sheet:
    mainline.divsharp.com/wp-content/themes/mainline/style.css

    Interior page style sheet:
    mainline.divsharp.com/wp-content/themes/mainline/interior.css

    In those stylesheets, there isn't much discernible organization, but the pieces relating to this problem are near the id's labeled menu_bg in the middle and at the very bottom is where the hover effects are. The popout is achieved like this:

    Code:
    <li id="popout_hov">
       <div id="popout">code for menu pane</div>
    </li>
    #popout_hov #popout {
       visibility: none;
    }
    #popout_hov:hover #popout {
       visibility: visible;
    }
    Thanks.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    6
    Rep Power
    0
    All the styling for the sidebar menu is now in:

    mainline.divsharp.com/wp-content/themes/mainline/sidebar.css

    Overrides for the home page are still in:

    mainline.divsharp.com/wp-content/themes/mainline/style.css
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    6
    Rep Power
    0
    So in case anyone is interested, I found a solution, though not a very elegant one. If someone can think of a better solution, please let me know.

    Like I mentioned above, I noticed that the pane wouldn't close if the mouse was over actual content, like the picture, and closed only when crossing padding and margin borders between content (this should still have stayed open, however, as even the padding and margins are inside the original li.. but anyway). I used this behavior to trick IE 7 into thinking it was always over actual content by absolute positioning a transparent png behind the entire div, and slightly overlapping the menu, hidding overflow.

    Like I said, not an elegant solution, but it works for the <10% of people who still use IE <=7...
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, Rafiki.

    Congratulations on find a solution yourself.

    There is a simpler solution. You can use "min-height:1px" to trigger IE7's hasLayout flag on "#warper #main #sidebar #menu_bg #menu .menulinks .hoverbox .top .bottom .mid".

    By the way, you don't need to specify that many selectors. Simply using "#menu .hoverbox .mid" is much more efficient. It makes for a smaller stylesheet and less time for the rendering engine to check the selectors.

    Are you aware that your page contains errors? The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/

    XHTML 1.1, when used correctly, is not compatible with IE (as of version 8). Therefore, I recommend that you switch to HTML 4.01 Strict or XHTML 1.0 Strict. (If you want more information, just ask. )
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    6
    Rep Power
    0
    Thank you so much for your reply. Your solution is certainly simpler and more correct than mine. A lot of the reading I did on how to solve the problem mentioned the haslayout flag, but I never found that solution. I also did not know I had errors (a lot apparently), I didn't even know to look in these places, so thanks again.

    I guess my question would be how to make my background image expand vertically without using 3 div's to do it? you mentioned that I should use just #menu .hoverbox .mid, but I need a top image, a middle image, and a bottom image, the middle image gets repeated the length of the div, and one background image per div... am I missing something?

    I have also never payed much attention to doctypes. I'll need to look into those more carefully before picking one.. I've had compatibility problems with them before, but I've never really known the differences or nuances of each.

    Once again, thanks for your reply.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    One way to avoid using 3 <div>s is to merge the middle image with the top or bottom image. The middle image is repeated many times to make the resulting image tall enough so it will never need to be tiled vertically. The other way is to use CSS3 and just accept that the design will look different in IE.

    You do have one more <div> than you currently need though. You could have given a background image to ".hoverbox".

    However, that's not what I was commenting on. I wasn't talking about the elements, just the selectors. The space between each simple selector (class, ID, etc.) means that the one on the right is a descendant, not necessarily a direct one, of the one on the left. So like I said, you can use just a few simple selectors instead of 10.

    Here's more information on doctypes:
    http://dev.opera.com/articles/view/1...type-for-your/
    http://www.dynamicsitesolutions.com/...ocument-types/

    You might also find Making Elements Contain Floated Children useful.

    Comments on this post

    • Rafiki Sanchez agrees : very helpful
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    6
    Rep Power
    0
    Once again, thank you. Just got all the errors in the validator to finally go away. I also added "min-height: 1px;" to the middle section with the repeated background. I'm going to be able to test it in IE without my ridiculous full pane transparent png solution tomorrow, haven't made that change yet though. The lingering css errors are in one of my plugins, I'll also be fixing those soon (although I might lose the corrections in an update, but I don't think its too big a deal).

    Checked out those articles, thank you. Went with xhtml 1.0 strict, kind of arbitrarily, but you had mentioned it to be a good one. I'll be getting around to minimizing my use of selectors. I think I'm going to stick with slightly cluttering my markup with clear divs for now though. On my future sites, I'll make a point to get rid of them.

    Also, would it be too much to trouble you for your personal opinion of that site? Its going to go live soon and its always good to have feedback. You can PM me if that's not appropriate for this forum.

    EDIT: ..sorry I keep going on, but in Opera, the menu isn't working, but only on the home, in the interior its working fine. It also works fine when I open up dragonfly. The panes are only opening when my mouse is over the text.. the markup is exactly the same, and the style is hardly different.. any thoughts? Thanks
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    1500+ KB for the home page of site that is for business, not entertainment, is risky.

    Large photos are nice, but using them on the home page is hard to justify due to how long they take to load. Here's a good tool for analyzing how long pages take to load.

    Something else I would suggest is making use of Google's CDN to load jQuery and jQuery UI.
    http://weblogs.asp.net/jgalloway/arc...back-copy.aspx
    http://code.google.com/apis/librarie...de.html#jquery
    This shows how to do it in WP.

    sorry I keep going on, but in Opera, the menu isn't working, but only on the home, in the interior its working fine. It also works fine when I open up dragonfly. The panes are only opening when my mouse is over the text.. the markup is exactly the same, and the style is hardly different.. any thoughts?
    Don't worry about it. I'm happy to give advice.

    Hmm... that is odd. The first thing I would try is removing the excess <div>s. You don't need both the ".menulinks" <div> and the first child of each of those, e.g. "#comm_hov". Remember an element may have both an ID and a class (and the class attribute accepts a space delimited list of classes).

    Also it would be good to use a <ul> and <li>s instead of <div>s for the "#menu" and ".menulinks" elements.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo