Little help with css code

Discussion in 'CSS' started by Mong, Jul 2, 2006.

0
  1. #1
    First check this menu test page (in firefox)
    http://www.nichewatch.com/menus/code.php

    Now when i hover over "Stat" submenu is displayed.

    1) I want there should be only outer border for submenu and there should be complete white background of submenu without separating orange color between submenu items.

    2) When i hover over "Stat" and move mouse to submenu items; background color of "Stat" goes back to orange but i want to keep it white same as when mouse hovers it.

    Thanks for your time and help :)
     
    Mong, Jul 2, 2006 IP
  2. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #2
    AdamSee, Jul 2, 2006 IP
  3. Mong

    Mong ↓↘→ horsePower

    Messages:
    4,789
    Likes Received:
    734
    Best Answers:
    0
    Trophy Points:
    235
    #3
    okay i have added doctype statement :)
    could you post some constructive help for this problem? :)
     
    Mong, Jul 2, 2006 IP
  4. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #4
    You'll find that putting in a doctype is super important for it to display correctly, otherwise it will go into quirks mode (bad), rather than standards mode (good) - so no matter how correct your code is, it will cause some issues. Unfortunately you've only put in half a doctype, you need to put this full line in:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
    Code (markup):
     
    AdamSee, Jul 2, 2006 IP
  5. FeelLikeANut

    FeelLikeANut Peon

    Messages:
    330
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You must have a border surround each individual element. What you need to do is define a left and right border for each element, and top border for the top-most element, and a bottom border for the bottom-most element.

    I'll need to work a little on #2, but my first impression is to make an entire UL white instead of just an LI.
     
    FeelLikeANut, Jul 2, 2006 IP
    Mong likes this.
  6. Mong

    Mong ↓↘→ horsePower

    Messages:
    4,789
    Likes Received:
    734
    Best Answers:
    0
    Trophy Points:
    235
    #6
    I have changed LI code to 
    
 <li style="border-color: #FD7D41 #FD7D41 #fff"><a href="" title="">Current Display</a></li>
            <li style="border-color: #fff #FD7D41 #fff"><a href="" title="">Previous Display</a></li>
            <li style="border-color: #fff #FD7D41 #FD7D41"><a href="" title="">Next Display</a></li>
    Code (markup):
    But there is no change :eek:
     
    Mong, Jul 2, 2006 IP
  7. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #7
    For your first effect
    
#menu ul ul ul a {border:0;}
#menu ul ul ul {border:1px solid #fe7d41;border-left:none;}
    Code (markup):
    The problem you'll have Mong, is that it won't be very well supported for Internet explorer, without a bit of JavaScript. Also the way it's currently coded is quite combersome and it will be very hard to achieve the second effect from that code. I can recommend you to these two articles: http://www.alistapart.com/articles/hybrid/ and http://www.alistapart.com/articles/horizdropdowns/
     
    AdamSee, Jul 3, 2006 IP
    Mong likes this.