SitePoint Sponsor

User Tag List

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

    drop down hiding behind post

    hi,

    does anyone have any idea why the submenu of the drop down is hiding behind the blog post.
    i am using IE. I tested it in ff,safari, and chrome and it is working however it is not working on IE.

    any ideas how to fix this?

    thanks..

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    We'd need to see a link to have any real idea. It is possibly a z-index issue. Is there any Flash in the blog post. In that case, here's a solution: http://www.sitepoint.com/forums/show...low-dhtml-menu

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply ralph.
    there is no flash in the blog.
    i have tried adding z -index.

    this is the code..i got it from a tutorial.

    #jsddm
    { margin: 0;
    padding: 0}

    #jsddm li
    { float: left;
    list-style: none;
    font: 12px Tahoma, Arial}

    #jsddm li a
    { display: block;
    text-align:center;
    background: #66bbdd;
    padding: 5px 12px;
    text-decoration: none;
    border-right: 1px solid white;
    width: 70px;
    color: #EAFFED;
    white-space: nowrap}

    #jsddm li a:hover
    { background: #6adeb5}

    #jsddm li ul
    { margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
    visibility: hidden;
    border-top: 1px solid white}

    #jsddm li ul li
    { float: none;
    display: inline}

    #jsddm li ul li a
    { width: auto;
    text-align:center;
    background: transparent;
    color: #24313C}

    #jsddm li ul li a:hover
    { background: #6adeb5}

    body#home a#home,
    body#activities a#activities{
    background:#6adeb5;
    color:white;


    would sending the url be helpful?
    this is for our company's blog so i'm not really sure if i can put it here..

    hope you can still help me though..

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ghie View Post
    would sending the url be helpful?
    this is for our company's blog so i'm not really sure if i can put it here..
    It's fine to post the link, and that would make it much easier to diagnose. What version(s) of IE is it not working in?

  5. #5
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    url is azurelineagroup.blogspot.com
    it is still under construction.. on solutions tab, there should be 5 submenus but i think only 1 is showing same with forum tab.

    i am using ie9. i haven't tried it on other versions of ie.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You have caused yourself some trouble there by using position: absolute where you don't need it (there are better solutions). Anyhow, a possible fix would be something like adding this to your style sheet:

    Code:
    widget-content {position: relative; z-index: 100;}
    That's just a guess, though. I find IE virtually impossible to test CSS in unless I'm uploading it myself, so let us know if that doesn't work.

  7. #7
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks i'm going to try and tell what happens..

    uhmmm..it's still not working..

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You have a few errors in your logic. Update/add the following code
    Code:
    .tabs-outer{z-index:10;}
    #jsddm li{position:relative;}
    #jsddm li li{position:static;}
    #jsddm li ul{top:100%;left:0;width:100%;}
    #jsddm{overflow:visible;}
    I'll quickly go over each. The first line is the critical part. You give all the main containers position:relative and IE gets quirky with z-indexes. It's best to specify z-indexs. Anyway you just need to set that.

    The next line (and the 3rd) work because your dropdown is basing its position off of the browser. It's guessing. You'll need those two lines in very shortly. Otherwise you'll see the positioning jump far left.
    The 4th line is to set coordinates. Make the browser KNOW where to place the dropdown. Any GOOD tutorial would have that. You need to find more reliable sources for tutorials it seems.

    The last line (overflow) basically just makes it so the dropdown won't get chopped off. If you want to contain your floats some other way, perhaps look into using the clearfix .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it actually works! thanks a lot!!!

    i hope i'm not bothering you. i still have a question..the drop down menu follows the width of the main menu. i mean the submenus have longer titles but it was cut off and followed the size of the main menu. i hope i explained it clearly..

    could you pls help me..i'm sorry i'm really new at these things..

    thanks again..

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That was my bad. Update your code
    Code:
    #jsddm li ul{top:100%;left:0;overflow:visible}
    The width was tricking me up. Basically the only things differing in this code, apposed to my code in post #8, is that remove the width:100%. It's restricting it.

    And the overflow:visible is needed because it's inheriting overflow:hidden; from a global rule.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect! now it's really working!!!!
    thank u so much!!!

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad it's all working now . You're welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi RyanReese..
    is it ok to ask for your help again?

    i was wondering how to align the drop down to the left. i like it to be aligned with the header and the post.
    i have a float:left in the code but it is a bit indented. is there a way to align it?

    thanks again...

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Do you mean you want the links in the drop down to be left aligned? It's not clear what you mean.

  15. #15
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    uhmm..sorry about that.. i mean the menu itself.
    i kind of did someting. it's pretty much what i want but i have to remove the background color on the blog post area.
    i really want to have a background color

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ghie View Post
    i mean the menu itself.
    O, I see. I was looking at an old version of the page, and it was aligned. You could do that by removing these styles:

    Code:
    .tabs-inner {
      padding: 0 15px;
    }
    
    .section {
      margin: 0 15px;
    }
    If that messes up the rest of your page, then perhaps just remove those classes from the nav divs.


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
  •