...

View Full Version : problems with CSS dropdown menu



urbuddy_143
03-04-2005, 02:20 PM
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}

chilipie
03-04-2005, 05:22 PM
Firstly, make everything in your CSS file lower-case, and validate (http://validator.w3.org/) 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).

whizard
03-04-2005, 09:09 PM
A big Hi to all the wizards.

Hi! :D

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

Dan

rmedek
03-04-2005, 10:24 PM
Might have something to do with this:


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 (http://brothercake.com/) excellent Ultimate Dropdown Menu (http://brothercake.com/site/products/menu/).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum