damiancds Posted August 15, 2009 Share Posted August 15, 2009 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 More sharing options...
dsonesuk Posted August 15, 2009 Share Posted August 15, 2009 don't use .5 of pixel for a border, whole int values only, as you have discovered some browser treat it as 1px while others as 0px.change all .5 borders to 1. Link to comment Share on other sites More sharing options...
damiancds Posted September 7, 2009 Author Share Posted September 7, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.