SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image behind drop downs fix - what the heck was that again

    I know I did this a while back but for the life of me I can't find the post here or the site I did it on. I was something about a background image set behind CSS drop down menus allowed you to put a margin between the drop down list items and IE wouldn't close the list if the cursor hit that margin.

    Anyone point me in the right direction?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dc dalton View Post
    I know I did this a while back but for the life of me I can't find the post here or the site I did it on. I was something about a background image set behind CSS drop down menus allowed you to put a margin between the drop down list items and IE wouldn't close the list if the cursor hit that margin.

    Anyone point me in the right direction?
    Yes you can apply a background colour to the parent ul that holds the dropdown and that usually stops the menu from flicking off between the list item gaps.

    If you can't use a background color then use a fake gif trick.

    Code:
    ul {background:url(fake.gif) no-repeat -1px -1px}
    The image doesn't actually have to exist but to avoid missing images in your server log just make a 1px x 1px fully transparent gif instead.

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes you can apply a background colour to the parent ul that holds the dropdown and that usually stops the menu from flicking off between the list item gaps.

    If you can't use a background color then use a fake gif trick.

    Code:
    ul {background:url(fake.gif) no-repeat -1px -1px}
    The image doesn't actually have to exist but to avoid missing images in your server log just make a 1px x 1px fully transparent gif instead.
    Hey Paul!

    I tried this (yeah I remembered what it was 10 seconds before you replied):

    ul#navigation {
    width: 1004px;
    height: 57px;
    background: transparent url(/images/green-menu-bg.jpg) no-repeat right top;
    list-style-type: none;
    }

    ul#navigation li {
    float: left;
    background-image: url(images/fake.gif);
    }

    Now I can't set the background image on navigation to negatives because it actually is the menu background

    BUT IE 8 is ignoring it, if your cursor hits one of the margins the menu closes

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Something else is probably at play then . Got a link?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Something else is probably at play then . Got a link?
    http://clicktoinvite.com

    password protected (my test domain for client builds)

    user: test
    password: test

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, untested, but it probably just needs a top coordinate set . You should also make the hover set left:0 instead of auto (it can screw up the alignment in browsers (IE) since they have to guess where to place it and placement can be influenced via stuff like text-align
    Code:
    ul#navigation li	 {
    	float: left;
    	position:relative;/*Set stacking context for Ap submenu*/
    	background-image: url(images/fake.gif);
    	}
    ul.inner	{
    	position: absolute;
    	left: -2999em;
    	top:100%;/*set it 100% of the way down the li*/
    	list-style: none;
    	z-index: 100;
    	}
    
    ul#navigation li:hover ul.inner, ul#navigation li.sfhover ul.inner	{
    	left: 0;/*safer*/
    	}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, untested, but it probably just needs a top coordinate set . You should also make the hover set left:0 instead of auto (it can screw up the alignment in browsers (IE) since they have to guess where to place it and placement can be influenced via stuff like text-align
    Code:
    ul#navigation li	 {
    	float: left;
    	position:relative;/*Set stacking context for Ap submenu*/
    	background-image: url(images/fake.gif);
    	}
    ul.inner	{
    	position: absolute;
    	left: -2999em;
    	top:100%;/*set it 100% of the way down the li*/
    	list-style: none;
    	z-index: 100;
    	}
    
    ul#navigation li:hover ul.inner, ul#navigation li.sfhover ul.inner	{
    	left: 0;/*safer*/
    	}
    Nope, still does it (IE 8 at least, haven't checked the others)

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, I believe hte problem is you set a 1px bottom margin on the <li>'s and upon hovering of that you are hovering upon the actual content of hte page and as a result the hover is lost
    Code:
    ul#navigation ul.inner li
    If you need that 1px bottom margin (what I mean is, if you need that color that gets shown through) then add it as part of an image and place it upon the <li>'s

    It's not that a big deal though and I like the look better without that whitish there

    It's not that
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, I believe hte problem is you set a 1px bottom margin on the <li>'s and upon hovering of that you are hovering upon the actual content of hte page and as a result the hover is lost
    Code:
    ul#navigation ul.inner li
    If you need that 1px bottom margin (what I mean is, if you need that color that gets shown through) then add it as part of an image and place it upon the <li>'s

    It's not that a big deal though and I like the look better without that whitish there

    It's not that
    Odd, because I just checked a few other sites I did that have drop downs ... some do it some don't.

    Here's one that it doesn't happen on:

    http://paopencarry.org

    Strange indeed!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dc dalton View Post
    Hey Paul!

    I tried this (yeah I remembered what it was 10 seconds before you replied):

    ul#navigation {
    width: 1004px;
    height: 57px;
    background: transparent url(/images/green-menu-bg.jpg) no-repeat right top;
    list-style-type: none;
    }

    ul#navigation li {
    float: left;
    background-image: url(images/fake.gif);
    }

    Now I can't set the background image on navigation to negatives because it actually is the menu background

    BUT IE 8 is ignoring it, if your cursor hits one of the margins the menu closes

    No you need the image on the dropdown ul which you haven't got an image on.

    Code:
    ul.inner    {
        position: absolute;
        left: -2999em;
        top: 100%;
        list-style: none;
        z-index: 100;
        background:url(fake.gif) no-repeat -1px -1px;
        }
    That works for me in IE8.

  11. #11
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    No you need the image on the dropdown ul which you haven't got an image on.

    Code:
    ul.inner    {
        position: absolute;
        left: -2999em;
        top: 100%;
        list-style: none;
        z-index: 100;
        background:url(fake.gif) no-repeat -1px -1px;
        }
    That works for me in IE8.
    DUH, yeah that was it! Told you I had forgotten it (sucks getting old)

    Thanks bud, always a pleasure


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
  •