Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problems with CSS dropdown menu

    A big Hi to all the wizards.I have developed dropdown
    menu with medium level of my knowledge but it's
    looking ok in all the latest browser like
    IE6,Netscape7.2,mozilla firefox 1.0 it looks
    ...Ok..but looks completely different in all old
    browsers for eg in IE 5.0 it looks horrible and more
    over it ain't working in latest opera 7.5,safari it
    is just showing the list like HTML <li> typical list
    and top of that it's hiding behind the images and
    flash when hover it and behaving starngly in layout
    1024x768,800x600 is there any fix for this as
    our website trial version is already on line ..we are
    on the edge of launching the site..please HELP me..i
    am placing the link and CSS code for dropdown menus

    http://www.connect-world.com/newwebsite/feedback.htm


    /* CSS Document */
    body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background-color: #FFFFFF;
    }
    #content {
    margin: 0px 15px 0px 15px;
    PADDING-LEFT: 25px;
    PADDING-BOTTOM: 10px;
    PADDING-RIGHT: 10px;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: #2B75BD 10px double;
    BACKGROUND-COLOR:#2B75BD;
    position:relative;z-index:3;
    }
    UL {PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px;
    MARGIN: 0px;
    margin-top : 0px;
    margin-bottom : 0px;
    margin-left : 0px;
    margin-right: 0px;
    LIST-STYLE-TYPE: none
    }

    #nav A {FONT: 11px verdana;
    COLOR: #FFFFFF ;TEXT-DECORATION:
    none;font-weight:bold
    }

    #nav LI LI A {PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0.2em;
    COLOR: #FFFFFF ;FONT-WEIGHT: normal}
    LI {BORDER-RIGHT: #FFFFFF 1px solid;
    BORDER-TOP: #2B75BD 1px solid;
    BORDER-LEFT: #2B75BD 1px solid;
    BORDER-BOTTOM: #2B75BD 1px solid;
    FLOAT: left; WIDTH: 12em; POSITION: relative;
    BACKGROUND-COLOR: #2B75BD; TEXT-ALIGN: left}
    LI UL
    { BORDER-RIGHT: #2B75BD 0px solid;
    BORDER-TOP: #2B75BD 0px solid;
    BORDER-LEFT: #2B75BD 0px solid;
    BORDER-BOTTOM: #2B75BD 0px solid;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 8px;
    LEFT: 0px; TOP: 13px;
    DISPLAY: none; FONT-WEIGHT: normal;
    BACKGROUND:#2B75BD; POSITION: absolute }
    LI:hover UL {DISPLAY: block}
    LI.over UL {DISPLAY: block}

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Firstly, make everything in your CSS file lower-case, and validate it. This may solve some of your problems. Then, post back, tell us how you got on, and we'll see what else we can do to help .

    Please post your code in between [ code ] and [/ code ] brackets next time (remove the spaces).

  • #3
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Quote Originally Posted by urbuddy_143
    A big Hi to all the wizards.
    Hi!

    wow, that combination of lower-case i and exclamation mark (point for all you brits) is wierd, isn't it!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Might have something to do with this:
    Code:
    LI UL 
    {	BORDER-RIGHT:   #2B75BD 0px solid;
    	BORDER-TOP:  #2B75BD  0px solid; 
    	BORDER-LEFT:  #2B75BD  0px solid;
    	BORDER-BOTTOM:  #2B75BD 0px solid;
     PADDING-RIGHT: 0px; 
     PADDING-LEFT: 0px;
     PADDING-BOTTOM: 0px;
     PADDING-TOP: 8px; 
     LEFT: 0px; TOP: 13px;
      DISPLAY: none;  FONT-WEIGHT: normal; BACKGROUND:#2B75BD;  POSITION: absolute }
    LI:hover UL {DISPLAY: block}
    LI.over UL {DISPLAY: block}
    Some browsers freak out at the display: none, which makes sense. You could try using another method of hiding the menu, like height or position.

    If you're serious about this website, and you're under the gun, you might want to consider a tried-and-true alternative, such as Brothercake's excellent Ultimate Dropdown Menu.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •