SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    nav sub-menu blocked by #main div

    See URL: http://testing.backstageweb.net/ Two issues here, related.

    On the main menu, mouse over "Donate" - the 4th sub-menu item is going behind div #main. The second issue is, that same sub-menu has a child menu (with the same issue) and is also being cut off by the constraints of the wrapper.

    Code:
    #main {
    	background: #FFF;
    	clear: both;
    	}
    
    #nav ul li {
    	background-color:#000000;
    	color:#fff;
    	outline:0;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
    	border-bottom:1px dotted #937c52;
    	-moz-box-shadow: 4px 4px 4px #444;
    	-webkit-box-shadow: 4px 4px 4px #444;
    	box-shadow: 4px 4px 4px #444;
    	font-size:.9em;
    	}
    Any help is appreciated - thanks!

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to the forums, johndove,

    I cannot get to your CSS style sheet :/ and the snippet you provided is not enough to let me see what you are actually doing. remember that code interacts with ALL other code so anything you do affects everything you do.

    At them moment tho , am guessing, that your sub menu is in fact NOT going behind your main, but getting cut off from the display.
    I am guessing section.row and/or section.wrapper probably have overflow:hidden; applied to them which is causing your sub menus to be cropped. I would use a different clearing method for these two specific elements to fix this problem.

  3. #3
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dresden,

    You are correct, both row and wrapper have an overflow:hidden on them... suggestions? Thanks!

    John

  4. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removing overflow:hidden from row gives me the child menu: (01.jpg), removing overflow:hidden from wrapper gives me the child menu: (02.jpg). How do I remedy this?
    Attached Images Attached Images

  5. #5
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "...removing overflow:hidden from wrapper gives me the grandchild menu: (02.jpg)

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    As this class is probably applied to other things in your cod you have painted yourself in a corner here, w/o seeing all your code...I would suggest adding an ID. this is kinda heavy handed , but it will make sure we override that code for those specific elements.

    1) so lets say #mainWrap, and #brandHed
    2)
    Code:
    #mainWrap,  #brandHed {overflow:visible; display:inline-block;padding:0; margin:0 }
        #mainWrap{width:100%; text-align:middle}
        #mainWrap div{ text-align:left}



    If you do have padding then use use this instead
    Code:
    #mainWrap,  #brandHed {overflow:visible;
    	zoom:expression(
    		runtimeStyle.zoom=1,
    		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
    	);
    }
    #mainWrap:after,  #brandHed:after,#mainWrap .after,  #brandHed .after {display:block; clear:both; content:""; height: 0;visibility: hidden;}

    if we have targeted the right elements that should fix it.
    hope that helps.

  7. #7
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dresden,

    I'm sorry, you lost me. Why can't you see my code? Firebug displays everything. (?) Also, what does #brandHed apply to?

    Thanks,

    John

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    I would say the best option is to remove overflow: hidden from the .wrapper and .row classes and do this instead (as ugly as it looks):

    Code:
    section section section section.row {
      overflow: hidden;
    }
    This is why I wouldn't put the same class on nested elements. It can lead to a lot of troubles.

  9. #9
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys very much!

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad that helped. I see you've removed the sub sub item. Was that just for testing purposes?

  11. #11
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes. : )


Bookmarks

Posting Permissions

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