SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background color conflict in dropdown menu

    I've been using the free Dropdown Menu CSS Generator at http://pixopoint.com/products/suckerfish_css/ with generally good results. In addition to using the generator as designed, I've created a template by tweaking and commenting the generator output. But in both cases, any background-color that I specify for "a:hover" in my regular CSS conflicts with and overpowers the desired hover background-colors in the menu CSS. I've posted a question at the PixoPoint site but have not yet received a response. I'm hoping some of the knowledgeable people here will start with this example (all of the code is visible through "view source") and see if a solution comes to mind:

    http://wvpress.com/test/test11.html

    Thanks,

    Ned

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I just went through your test link and the sub test pages.
    There is no need to define classes for all the other a:hovers on your page.

    Just add a new ruleset for the hover states of the anchors in the #nav.
    It's an ID so it will carry more weight and override your global "a:hover"

    Code:
    #nav li a {
    display: block;
    color: Sienna; /* mainitem normal font color */
    text-decoration: none;
    padding: 0px 10px;
    text-align: center; /* for centered text */
    }
    #nav li a:hover {background:none;}

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazing! While I don't fully understand why it works, it does. But I am curious to know why...

    Code:
    #nav li a:hover {
    background: none;
    }
    ...works but...

    Code:
    #nav li a:hover {
    background-color: none;
    }
    ...doesn't!! I did a Google for "background vs. background-color" and found a link that says "the shorthand background property is more widely supported than background-color." Does that make sense?

    Regardless, thanks a million.

    Ned

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by recce101
    Amazing! While I don't fully understand why it works, it does. But I am curious to know why...
    Hi Ned,
    That is because the value "none" is not a valid colour for the "background-color" property.

    Using the value "none" with the shorthand "background" property works because; though the none value means no background-image, any background property that is not set in the shorthand rule will be reset to default value, which for bg-color is the value "transparent".
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what you mean, Erik. And lending support to what you say, I find that

    Code:
    #nav li a:hover {
    background-color: transparent;
    }
    does work! Though I'll probably stick with

    Code:
    #nav li a:hover {
    background: none;
    }
    Anyone see any other tweaks that might be useful?

    Ned

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    1) You can learn shorthand-this can be margin:0 auto;
    Code:
    #wrapper {
    width: 90%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-top: 0;
    border-left: 5px solid DarkKhaki;
    border-right: 5px solid DarkKhaki;
    background-color: CornSilk;
    }
    2) You have this
    Code:
    div {
    margin: 0;
    padding: 0;
    }
    Divs have no margins/paddings set by default so remove that
    3) For moving the dropdown outa view and then into view, don't use left:-999em/left:auto because IE isn't too stable with that and the auto value can be influenced by a parent text-align
    Code:
    #nav li ul {
    position: absolute;
    left: 0;
    margin-left:-999em;
    width: 150px; /* subitem width plus 2px */
    /*font-weight: xxxx;*/ /* if mainitem and subitem font weights differ */
    margin: 0;
    line-height: 1;
    border-top: 1px solid SlateGray; /* subitem border */
    }
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
    margin-left: -999em;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    margin-left:0;
    background: LightGoldenRodYellow; /*subitem normal bg color */
    }
    Use taht above .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan:

    I changed the #wrapper margin property to shorthand, though not quite like you had it because of the -1000px margin-bottom, so it's now

    Code:
    ...
    margin: 0 auto -1000px auto;
    ...
    and also took out the unnecessary div entry and simplified another div. But I couldn't get the dropdowns to work properly using margin instead of positioning (even after taking out the conflicting "margin: 0" just before "line-height: 1"). The dropdowns moved out of the way, but wouldn't come back into view at the right place when the main items were hovered. Is it just the earlier IE browsers that have trouble with the code as currently written? It works okay in IE7 and FF3.6, and I'm not too concerned with earlier IEs since I always try to make a site navigable even if it's just the main items that are displayed.

    Here's an updated version with some other changes: http://wvpress.com/test/test14.html

    Ned

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    though not quite like you had it because of the -1000px margin-bottom
    Hi Ned,
    Rather than using that 1000px bottom padding & negative bottom margin on your wrapper you might want to consider using min-height:100%;

    I am guessing you were doing that to give your page a full height appearance with minimal content. If so it would be worthwhile to consider a Sticky Footer layout.

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'll look into that.

    Ned

  10. #10
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by recce101 View Post
    I've posted a question at the PixoPoint site but have not yet received a response.
    Sorry, I've been swamped with work and haven't been able to answer questions there for the past week and a bit (I run PixoPoint). If you haven't done so already, it would be handy if you could link back to this SitePoint topic on PixoPoint.com so that I know not to go answering the same questions twice ... once I get to it (probably in a couple of days time).

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Ryan. Actually, the test files I have uploaded here at SitePoint are different from the ones at PixoPoint, though they both asked about the same problem (which seems to have been solved by one of the guys here). The dropdown CSS in the files here has been modified some, and it will be great to have your comments. I'll post the link to these files in my PixoPoint thread tonight or tomorrow.

    Just remember, being swamped with work beats the alternative!

    Ned

  12. #12
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    It looks like the guys above have dealt to your question pretty well though. There isn't much more I can add.

    I started work on a new version of the CSS generator which makes easier to work with code. I've cleaned a few bits and pieces up with it now and the next version should be a lot easier to figure out what goes where (hopefully). I've also added a little commenting to the CSS and split up the dropdown code from the top-level code to make it clear what applies to what rather than relying on some features passing down the cascade which seems to confuse many people.

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looking forward to seeing the new version. Aloha,

    Ned


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
  •