Advertisement Jump to content
Sign in to follow this  
shadowstryker

[web] CSS List troubles (2 different problems)

This topic is 4896 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Problem 1: ============================================== I've got a list being used as a horizontal menu. In IE this looks perfect and fills all 720px of the width. In Firefox it has 2 rendering errors, first is that 1/2 way thru the menu it suddenly drops down by about 5px, and also the DIV it is in has a width of 720px, yet it doesn't span 720px (yet as I said, it does in IE). (see source box below for CSS code used) Problem 2: ============================================== This one is slightly more complicated, I have dropdown menu's from my horizontal menu; this works perfectly in FF, but not at all in IE.
#linkbar {
	margin: 0px;
	padding: 0px;
	width: 720px;
	background-color: #006699;
}
#linkbar ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	list-style: none;
}
#linkbar ul li {
	position: relative;
	float: left;
	height:18px; 
	background-color: #006699;
	color: #FFFFFF;
	border-bottom: 1px solid black;
	padding: 0px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
	background-repeat: no-repeat;
	background-image: url(art/interface/divider.gif);
}
#linkbar ul li:hover {
	background-color: #C0D6E2;
	color: #000000; cursor: pointer;
}
#linkbar ul li ul {
	display: none;
	position: absolute;
	top: 19px;
	width: 149px;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
	khtml-opacity: 0.9;
}
#linkbar ul li ul li {
	width: 100px;
}
#linkbar li a {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
}
#linkbar ul li a:hover {
	background-color: #C0D6E2;
	color: #000000;
}
#linkbar ul li:hover ul, #linkbar ul li.over ul {
	display: block;
}


e.g. of use:
<div id='linkbar'><ul><li><a href='#'>item 1</a><ul><li><a href='#'>sub item 1</a></li></ul></li></ul>

Share this post


Link to post
Share on other sites
Advertisement
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!