Jump to content

Css Borders


damiancds
 Share

Recommended Posts

For starters,Browsers that don't show the border:-Opera 9.63-Safari 4.0.2-Google Chrome 2.0.172.39Browsers that show the border:-Netscape Navigator 9.0.0.3-Internet Explorer 8-Mozilla Firefox 3.0.13-Flock 2.5.1This is concerning a css driven (css only for now) nav menu that has dropdown and fly out.menu can be seen here - Menuthe code html:

<html> <head> <title> </title> <link rel="stylesheet" type="text/css" href="menu.css" > </head>  <body>   <ul class="drop"> 	<li class="nav_Down"> <a class="nav" href=""> Home </a> </li> 	<li class="nav_Down"> <a class="nav" href=""> About Us </a> 		<ul class="nav"> 			<li class="nav_End"> <a class="nav" href=""> History </a> </li> 			<li class="nav_End"> <a class="nav" href=""> Who We Are </a> </li> 		</ul> 	</li>  	<li class="nav_Down"> <a class="nav" href=""> Products </a> 		<ul class="nav"> 			<li class="nav_Out"> <a class="nav" href=""> Grass Fed Beef </a> 				<ul class="nav"> 				<li class="nav_Out"> <a class="nav" href=""> Steaks </a> 					<ul class="nav"> 					<li class="nav_End"> <a class="nav" href=""> Chuck Steak </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Hanger Steak</a> </li> 					<li class="nav_End"> <a class="nav" href=""> Strip Steak </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Skirt Steak </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Flank Steak </a> </li> 					<li class="nav_End"> <a class="nav" href=""> T-Bone Steak </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Ribeye Steak </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Sirloin Tip Steak </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Boneless Top Sirloin Steak </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Porterhouse Steak </a> </li> 					</ul> 				</li> 				<li class="nav_Out"> <a class="nav" href=""> Roasts	</a> 					<ul class="nav"> 					<li class="nav_End"> <a class="nav" href=""> Chuck Roast </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Eye Round Roast</a> </li> 					<li class="nav_End"> <a class="nav" href=""> Top Round Roast</a> </li> 					<li class="nav_End"> <a class="nav" href=""> Bottom Round Roast </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Sirloin Tip Roast </a> </li> 					</ul> 				</li> 				<li class="nav_Out"> <a class="nav" href=""> Ground Meat </a> 					<ul class="nav"> 					<li class="nav_End"> <a class="nav" href=""> Hamburger </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Hamburger Patties</a> </li> 					</ul> 				</li> 				<li class="nav_Out"> <a class="nav" href=""> Other Cuts	</a> 					<ul class="nav"> 					<li class="nav_End"> <a class="nav" href=""> Filet Mignon </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Sandwich Steaks </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Stew Beef </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Soup Shanks </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Brisket </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Kabobs </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Short Ribs </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Tongue </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Heart </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Liver </a> </li> 					<li class="nav_End"> <a class="nav" href=""> Ox Tails </a> </li> 					</ul> 				</li> 				</ul> 			</li> 		</ul> 	</li> 	<li class="nav_Down"> <a class="nav" href=""> Information </a> 		<ul class="nav"> 			<li class="nav_End"> <a class="nav" href=""> Why Grass Fed Beef? </a> </li> 			<li class="nav_End"> <a class="nav" href=""> Did You Know </a> </li> 			<li class="nav_End"> <a class="nav" href=""> FAQ </a> </li> 		</ul> 	</li> 	<li class="nav_Down"> <a class="nav" href=""> Locations </a> </li> 	<li class="nav_Down"> <a class="nav" href=""> Contact Us </a> 		<ul class="nav"> 			<li class="nav_End"> <a class="nav" href=""> Contact Customer Service </a> </li> 			<li class="nav_End"> <a class="nav" href=""> Contact Webmaster </a> </li> 		</ul> 	</li> 	<li class="nav_DownLast"></li> </ul>  </body>   </html>

css code:

/* Menu Style Sheet */ul.nav{	color: white;	margin: 2em;	padding: 5px;	background-color: green;	background-image: url(gradient_6.gif);	text-align: left;	border: .5px solid #000;	list-style-type: none;}ul.drop{	color: white;	margin: 0em;	padding: 0px;	background-color: green;	background-image: url(gradient_6.gif);	text-align: left;	border: .5px solid #000;	list-style-type: none;}li.nav_End{	float:left;	width: 150px;	position: relative;	padding: 3px;	color:#194812;	font-family:Arial;	font-size:11px;	font-weight:bold;	text-decoration: none;	list-style-type: none;	margin-top: 2px;	margin-bottom: 2px;	margin-left: 4px;	margin-right: 4px;}li.nav_Down{	float: left;	padding: 5px;	width: 8em;	position: relative;	color:#194812;	font-family:Bookman Old Style;	font-size:14px;	font-weight:bold;	text-decoration: none;	list-style-type: none;	background-image:url(arrow_7.gif);	background-repeat:no-repeat;	background-position:92% 50%;		}li.nav_Out{	display: block;	width: 150px;	padding: 3px;	position: relative;	color: black;	font-family:Arial;	font-size:11px;	font-weight:bold;	list-style-type: none;	background-image:url(arrow_0.gif);	background-repeat:no-repeat;	background-position:92% 50%;		}li.nav_DownLast{	clear: both;}li.nav a.nav{	color: white;	text-decoration: none;}	li.nav_Down a.nav{	color: white;}	li.nav_Down:hover ul.nav a.nav{	color: black;	text-decoration: none;}	li.nav_Down:hover li.nav_Out:hover ul.nav a.nav{	text-decoration: none;}	li.nav_Down:hover li.nav_Out:hover li.nav_Out:hover ul.nav a.nav{	text-decoration: none;}	li.nav_Down:hover a.nav{	color: black;	text-decoration: underline;}li.nav_Down:hover li.nav_Out:hover a.nav{	color: black;	text-decoration: underline;}li.nav_Down:hover li.nav_Out:hover li.nav_Out:hover a.nav{	color: black;	text-decoration: underline;}li.nav_Down:hover li.nav_Out:hover li.nav_Out:hover li.nav_Out:hover a.nav{	color: black;	text-decoration: underline;}li.nav:hover{	background-image: url(None.png);	background-color: #B0E9A8;}li.nav_End:hover{	background-image: url(None.png);	background-color: #B0E9A8;}li.nav_Out:hover{		background-color: #B0E9A8;			background-image:url(arrow_0.gif);	background-repeat:no-repeat;	background-position:92% 50%;}li.nav_Down:hover{	background-color: #B0E9A8;		background-image:url(arrow_2.gif);	background-repeat:no-repeat;	background-position:92% 50%;}li.nav_Down ul.nav{	color: black;	display: none;	background-image: url(None.png);	}/* One Level Deep */li.nav_Down:hover ul.nav{	display: block;	position: absolute;	top: -3px;	left: -33px;	background-image: url(None.png);	background-color: #DDF6DA;}li.nav_Down:hover ul.nav li.nav{	display: block;}li.nav_Down:hover li.nav_Out ul.nav{	display: none;}/* Second Level Deep */li.nav_Down:hover li.nav_Out:hover ul.nav{	display: block;	position: absolute;	top: -24px;	left: 125px;}li.nav_Down:hover li.nav_Out:hover li.nav_Out ul.nav{display: none;}li.nav_Down:hover li.nav_Out:hover li.nav_Out:hover ul.nav{display: block;}

the css is a little messy but the part that needs to be fixed are the ul.nav borders (i believe)thanks for any tips you can give me

Link to comment
Share on other sites

  • 4 weeks later...

Sorry for taking so long to reply, but I get annoyed when the original poster doesn't come back with feedback on how it worked out so,It worked,probably wouldn't have caught that so fast,thanks, problem solved

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...