SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Need help debugging my drop-down menu

    I'm making a website for my wife's new business, and she wants a horizontal drop-down menu. After looking over many tutorials, I put one together. It works well in some of the browsers I've tested (FF, Opera) but breaks in IE and Google Chrome.

    For some reason in Chrome/IE, the drop down expands, but vanishes when I try to mouse onto it. I suspect some sort of miniature gap between the main level items and the drop-down items. Has anyone else experienced this?

    Here's an example:
    Xpress Dance Classes
    <cfset myblog = "http://cydewaze.org/">

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The menu doesn't disappear for me in IE7/8 or chrome and looks much the same as Firefox. Was there a specific page that this happened on or have you fixed it now?

    It does look a bit odd in all browsers with the vertical dividing border being bigger than the menu and poking out at the bottom. Is that some sort of designers quirk or is it just badly coded? (i.e. Did you mean it to look like that or not )

  3. #3
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The menu doesn't disappear for me in IE7/8 or chrome and looks much the same as Firefox. Was there a specific page that this happened on or have you fixed it now?
    Actually that very page is doing it, and now when I test it on FF3.5 at work, it does the same thing. If you mouse over one of the menu items that has a drop-down, then move the mouse down to one of the submenu items, the drop-down vanishes as soon as you get to the border between the two.

    I suspected a 1px gap or something, but even if I move the position of the drop-down up, it still vanishes. Could it be a z-index thing?



    Quote Originally Posted by Paul O'B View Post
    It does look a bit odd in all browsers with the vertical dividing border being bigger than the menu and poking out at the bottom. Is that some sort of designers quirk or is it just badly coded? (i.e. Did you mean it to look like that or not )
    Hrm, I don't get what you're saying (although with me and CSS, bad coding is a definite possibility!). It looks like this to me:

    http://xpressdanceclasses.com/clip.png

    Is that not what you're seeing?
    <cfset myblog = "http://cydewaze.org/">

  4. #4
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think we're seeing the same page. I'm with Paul O'B - I'm not getting any disappearing drop-down menu in any browser; FF4, IE9, Chrome, IE8, IE7.

    And what I'm seeing (again, in all browsers), is a divider between menu items that's just a few pixels too long. Screenshot excerpt attached.
    Attached Images Attached Images

  5. #5
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I'll peek at that once it's approved.

    Off Topic:

    btw, cool avatar. I adore Wallace & Gromit!


    EDIT: Aha! I think I figured something out.

    If I increase my font size in my browser, the "bug" goes away. But if I reduce it (in FF, View, Zoom, Zoom text only, then make it smaller) the "bug" rears its ugly head.

    I think I need to do something that makes the drop down position a percent or something, so making the font smaller doesn't create the gap.
    <cfset myblog = "http://cydewaze.org/">

  6. #6
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, yes, this forum has to "approve" attachments. I wonder what that's actually in aid of?

    Here: http://earlyout.org/xpress.jpg

  7. #7
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    More proof that the page you're linking us to is NOT the page you're seeing. The text on the page you're giving us is not the same as the one in your screenshot, and it contains some character encoding problems:

    http://earlyout.org/xpress2.jpg

    Edit: I take that back - the text does appear to be the same. But you do have some encoding issues, nonetheless.

  8. #8
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ugh. My host uses Plesk, and whenever I edit a file in Plesk, weird things happen.

    But there is only one page on the server, so it must be the one we're all looking at.
    <cfset myblog = "http://cydewaze.org/">

  9. #9
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think my problem is how I've set up that main menu bar. I need to figure out a better way to do the CSS. I've been playing with a copy locally, and I took the background gradient off it and played with the padding and margins, but the text still acts funky when I zoom it.

    Maybe I'll look for CSS menu examples online. I sort of made this one up, which is probably a recipe for disaster, lol.
    <cfset myblog = "http://cydewaze.org/">

  10. #10
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably best. After all, this a wheel that's already been invented. Many times.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by EarlyOut View Post
    Ah, yes, this forum has to "approve" attachments. I wonder what that's actually in aid of?

    Here: http://earlyout.org/xpress.jpg
    It's an attempt to prevent [porn/virus/spam from being attached without being checked first.


    The problem looks like you have set your text size smaller in the browsers that you are using via the browsers controls which is why we didn't see the issue. The problem you mention arises in IE when small text is selected from the browser controls. It doesn't happen at normal text sizes.

    It is likely that the cause is that you have a fixed height nav (36px) and you have made the text just happen to fit by using padding at the smaller text size you were viewing with.

    Then you have positioned the ul at top:37px which means that even when working there is a 1px gap between the list and the nested nav and there must be no gaps at all or the focus on the element is lost.


    You should either remove the height altogether let content dictate the height (top:100%) or do something like this:

    Code:
    ul#nav ul {
       top:36px;
       padding-top:1px;/* makes it 37px away but still in contact with the parent.*/
    }
    ul#nav li a {
        border-right: 2px solid #CCCCCC;
        color: #B11A1B;
        float: left;
        font-size: 1.1em;
        font-weight: bold;
     height: 36px;
        line-height: 36px;
        margin: 0;
     padding: 0 10px;
        text-decoration: none;
    
    
    }
    The top and bottom padding is removed and the line-height is set to the height of the nav to center the text (assuming the text is never to wrap of course).

    You will have to address the nested items if you need different styling on the dropdown.

  12. #12
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Off Topic:

    It's an attempt to prevent [porn/virus/spam from being attached without being checked first.
    Off Topic:

    Sensible with a new poster, but once someone gets past, say, 20 posts, it seems like overkill. Not an option in the forum software, perhaps?

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    Off Topic:

    Sensible with a new poster, but once someone gets past, say, 20 posts, it seems like overkill. Not an option in the forum software, perhaps?
    Thanks for the idea - I'll stick it in the staff suggestion box

  14. #14
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Code:
    ul#nav ul {
       top:36px;
       padding-top:1px;/* makes it 37px away but still in contact with the parent.*/
    }
    ul#nav li a {
        border-right: 2px solid #CCCCCC;
        color: #B11A1B;
        float: left;
        font-size: 1.1em;
        font-weight: bold;
     height: 36px;
        line-height: 36px;
        margin: 0;
     padding: 0 10px;
        text-decoration: none;
    
    
    }
    That looks nice in IE, but in FF3.5 the text is pushed down toward the bottom of the list. It's very odd.

    Actually, it's when you increase the font size. It doesn't stay centered in the list, it enlarges downward.

    EDIT: Ah, removing the height and line height and just using padding seems to fix it.

    I have this:

    Code CSS:
    ul#nav li a {
    	text-decoration: none;
    	float: left;
    	padding: 10px 10px;
    	margin: 0;
    	font-size: 1.1em;
    	font-weight: bold;
    	color: #B11A1B;
    	border-right: 2px solid #ccc; 
    	}
    <cfset myblog = "http://cydewaze.org/">

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cydewaze View Post

    EDIT: Ah, removing the height and line height and just using padding seems to fix it.
    Remember to also remove the top:37px because that will have no bearing on the height now. Use top:100% plus the 1px padding-top I showed you to move the submenu outside the border on the ul but still remain in contact with the list item.

  16. #16
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Remember to also remove the top:37px because that will have no bearing on the height now. Use top:100% plus the 1px padding-top I showed you to move the submenu outside the border on the ul but still remain in contact with the list item.
    Oh! I totally missed that padding-top, thanks. I still have a bit of the vanishing menu problem in IE7, but it's not nearly as bad as it was.

    I've uploaded the changes, and I obviously have some debugging to do in IE. Namely to change the logo png to a gif to get rid of the color blending problem, not to mention that bizarre horizontal scrollbar.

    Xpress Dance Classes

    I also seem to have some positioning problems in IE. What I have is basically a div for the header with position: relative, then I've set the nav menu to be position absolute within that, at a position of bottom: 0, left: 0. Is there a better way to do this?
    <cfset myblog = "http://cydewaze.org/">

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You haven't taken into account the default padding/margin on the nested ul.
    Try this:

    Code:
    ul#nav ul {
        background:#fff;/* ie fix to maintain hover*/
        display: none;
        left: -2px;
        padding: 1px 0 0;
        margin:0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }
    ul#nav ul li {
        clear: left;
        /*left: -44px;*/
            left :0;
        margin: 0;
    }
    Rather than using display:none to hide elements and display:block to bring them back it is more accessible to use the off-left method. (e.g. to hide the element use margin-left:-999em and then to bring it back use margin-left:0)

  18. #18
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Rather than using display:none to hide elements and display:block to bring them back it is more accessible to use the off-left method. (e.g. to hide the element use margin-left:-999em and then to bring it back use margin-left:0)
    Yeah, that works nice!

    I also redid the CSS for the rest of the page to get rid of the absolute positioning for the header (changes are uploaded to the sample url). It seems to look more consistent, at least between IE and FF, but IE still has that stupid vanishing dropdown problem!

    It's really strange because sometimes it's there and sometimes it isn't. But even putting a negative top margin on the dropdown ul doesn't seem to have any effect.
    <cfset myblog = "http://cydewaze.org/">

  19. #19
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ok! It seems that applying a -1px top margin to the submenu ul li a on hover moves it up just a bit to overlap the main menu. It isn't perfect aesthetically, but it fixes the bug, and it's not so ugly that I can't live with it.

    If anyone has a more elegant solution, I'm all ears!
    <cfset myblog = "http://cydewaze.org/">

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cydewaze View Post
    Ok! It seems that applying a -1px top margin to the submenu ul li a on hover moves it up just a bit to overlap the main menu. It isn't perfect aesthetically, but it fixes the bug, and it's not so ugly that I can't live with it.

    If anyone has a more elegant solution, I'm all ears!
    Try using the negative top margin on the nested ul instead and then adding a 2px padding top instead of the 1px. That will make the nested list overlap at all times but should still look the same with any luck.

    However, as I mentioned a couple of times now my ie7 is working perfectly with the answers I have already given. I believe you are only getting these issues when you have resized the text via your browser controls.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You've also missed the default bottom margin on the h1 which is pushing your nav down the page by 1px in some browsers.

    Code:
    #header h1.intro{margin-bottom:0;}

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You also missed the background colour I mentioned that IE7 needed.

    here are the changes again plus a new tric k.

    Code:
    #header h1.intro {
        float: right;
        text-align: right;
        margin:120px 2% 0 0;
        font-style: italic;
        font-weight: bold;
        font-size: 1.2em;
    }
    
    
    ul#nav ul {
        left: -2px;
        padding:2px 0 0 0;
        margin:-1px 0 0 -999em;
        position: absolute;
        top: 100%;
        background:url(fake.gif) no-repeat -1px -1px;/* use a 1px x 1px fully transparent image*/
    }

    The image doesn't have to exist for this to work but its better if you use one to avoid missing images in your server logs etc.

    The above works flawlessly for me with no problem in IE7.

  23. #23
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You also missed the background colour I mentioned that IE7 needed.
    What the heck? I could've sworn I added that! I must have deleted it accidentally when I got rid of the absolute positioning arrangement for the menu.

    Anyway, it's now perfect! A 1x1 transparent gif? Where do you come up with these things?
    <cfset myblog = "http://cydewaze.org/">

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cydewaze View Post

    Anyway, it's now perfect! A 1x1 transparent gif? Where do you come up with these things?
    years of head banging

  25. #25
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like a British insult: "Paul? Oh, he's just a 1x1 transparent gif."


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
  •