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

    Join Date
    Sep 2010
    Posts
    19
    Rep Power
    0

    Drop down menu positioning issue


    If you look at the main menu(Home-About MCAEC-The Academy-Adult Education-Shining Star-Giving) on this page and hover over one of the parent categories you'll see issues with the positioning of the dropdown. I adjusted the margin and it looks fine in IE but the dropdown floats over the parent tabs in Firefox and Opera. Is there a way to adjust this so it's consistent in all browsers?
    Here's the code for the dropdown ul ul li a:
    Code:
    #dropmenu { z-index:100; position:relative;}
    #dropmenu .menu ul ul {z-index:99; margin:0; width:160px; background:url(images/bg_sub.png) top left no-repeat    !important; margin: 10px 0px 0px 0px ;  position: absolute; display:none; padding-bottom:10px !important; clear:both; padding-top:13px;}	
    #dropmenu .menu ul ul li { line-height:inherit; height:auto; text-align:left; width:160px; text-align:left; line-height:1.69em;}
    #dropmenu .menu ul ul li a{ font-weight: normal; color:#fff; font-size:13px; text-transform:none; }	
    #dropmenu .menu ul ul li a:hover {  color:#edc951; font-weight:normal; }
    Thanks
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    IE7 wrongly allows the "clear" property to have an affect on absolutely positioned elements. That page includes the directive to make IE8 display like IE7, so it shows the bug too.

    To make browsers be more consistent, give "top:100%" to "#dropmenu .menu ul ul".

    Don't code for IE first. It's too buggy. Code to the standards first and then fix any issues you have.
    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).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    19
    Rep Power
    0
    Originally Posted by Kravvitz
    IE7 wrongly allows the "clear" property to have an affect on absolutely positioned elements. That page includes the directive to make IE8 display like IE7, so it shows the bug too.

    To make browsers be more consistent, give "top:100%" to "#dropmenu .menu ul ul".

    Don't code for IE first. It's too buggy. Code to the standards first and then fix any issues you have.
    Awesome. Thanks Kravvitz
  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
    You're welcome.

    I think I should rephrase my first sentence from earlier to make it clearer: IE7 wrongly allows the "clear" property to have an affect when applied to absolutely positioned 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).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2010
    Posts
    19
    Rep Power
    0
    is there a book/ site/ tutorials that you could recommend I look at to better understand problems like the one I had? e.g. clear property having an effect on absolutely positioned elements

    Thank you
  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
    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