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

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2

    Menu - firebug please


    Hi all,

    Re my menu here can anyone please tell me what is causing link 1 to be be bigger than the others?

    Thank you...
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Do you not have Firebug? It's because of two of the styles applied to the nested <ul>. Try disabling the various styles to see which ones are the problem and then add a new rule to override those styles for that particular <ul>.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    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
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2
    Originally Posted by Kravvitz
    Do you not have Firebug?
    I don't meant I don't have firebug, I mean I have looked for it for ages in firebug but so far I can't find it. Maybe my eyes are tired...
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    In case it wasn't clear, I'm talking about the list that immediately follows the "link 1" link.

    Use Firebug to disable one declaration at a time that applies to it and see which ones make a difference. You'll learn more this way than if someone just tells you the answer.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    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
    Apr 2013
    Posts
    2
    Rep Power
    0

    Css


    Use height:YYpx at ul li and do not use width:20% use width:YYpx
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    I see you've added a border to the nested list. Now the question is what property applied to an element lies outside its border and pushes it away from its parent's edge, which in this case causes its parent's height to expand?

    Originally Posted by iftieaq
    Use height:YYpx at ul li and do not use width:20% use width:YYpx
    Welcome to DevShed Forums, iftieaq.

    Would you mind explaining why you caution against using a percentage width?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    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
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2
    Originally Posted by Kravvitz
    I see you've added a border to the nested list. Now the question is what property applied to an element lies outside its border and pushes it away from its parent's edge, which in this case causes its parent's height to expand?
    OK thanks - so it was the margin on the <ul> - I don't know how I missed it now.

    But link 1 is still sticking out just a bit at the bottom - I can get rid of this with
    Code:
    ul#submenu { display: none;}
    so it seems it is ul#submenu but then I don't know why part of ul#submenu is showing without hover??

    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
    4303
    I don't see "display:none" being given to "#submenu" anywhere in your code. The remaining extra height is caused by the top padding applied to "ul ul, ol ol".

    By the way, it's common to give "position:absolute" to dropdown sub-menus which avoids this problem.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

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

    Join Date
    Nov 2012
    Posts
    44
    Rep Power
    2
    Originally Posted by Kravvitz
    The remaining extra height is caused by the top padding applied to "ul ul, ol ol".

    By the way, it's common to give "position:absolute" to dropdown sub-menus which avoids this problem.
    OK success Thanks for your help...

IMN logo majestic logo threadwatch logo seochat tools logo