I am trying to replace a java script navigation bar on my site with one that is CSS based. However, I end up with the last button getting kick to the next row. Take a look at: http://www.toolsandtemplates.com/pagetemplate.asp and you'll see what I mean. I've toyed with the width and the padding, but can't seem to get it. I know what I a missing is simple, but I am going cross eyed after working on this all afternoon.
Ugh!!!! Now it lines up and looks good in IE, but the button repeats in FF. Here is the CSS I have for the NAV style. What am I missing? .nav3 { height:30px; font-weight: bold; margin: 0px; padding: 0px; } .nav3 ul { margin:0; padding:0; list-style:none; text-align: center; } .nav3 li { display:inline; } .nav3 li a { background:url(images/home1.gif); text-decoration:none; color: #000; display:block; float:left; height:30px; width: 107px; padding: 8px 0px 0px 0px; } .nav3 li a:hover { background:url(images/home2.gif); text-decoration:none; color: #000; display:block; float:left; height:30px; width: 107px; padding: 8px 0px 0px 0px; }
I have had this problem before, for me it was always a padding, or height issue. I'll try to look over the source a little and let you know if I find anything.
Ok, FIRST, you've got a DIV around it for no good reason, second you've got about double the CSS that's needed as you are redeclaring things on the hover that shouldn't need to be redeclared, declaring stuff that is set by other properties (floats are automatically display:block), etc, etc. The 'table for nothing' above that, inllined presentation, and repeated tables for a layout that if using tables should only use ONE (the content column and sidebar) - and then being a crappy fixed width stripe shouldn't even need THAT. When I get back to my laptop I'll take a stab at a quick rewrite for you.
So, deathshadow, what you're saying is my site ia crap and I should scap the page and start fresh? ;~) The swap of the navigaiton bar from java script to CSS is my first step in cleaning this mess up. Can anyone assist with the difference in the nav bar at the top between IE and FF?
I think this: <META NAME="TITLE" CONTENT="FrontPage templates Code (markup): Says that FOR ME. Of course, the subject of the site alone makes me wonder if you are in the right place - see, we do WEB DESIGN and CODING in here... (I say, I say that's a joke son...) Yes, scrap it, switch to a normal text editor instead of some goofy WYSIWYG (since notepad is a step UP from Frontpage/Dreamweaver/HotMetal/what have you), write semantic minimalist HTML, and then bend the HTML to your will. Alright, got a few minutes now, I'll do a quick rewrite sample on how I'd code that template.
in css template replace it with this .nav3 li a {background: transparent url(images/home1.gif) no-repeat scroll 0% and replace .nav3 li a:hover with the same codes too...
Ok, this is most likely the HTML my rewrite would use - I always do the HTML first before I start hanging CSS and images on it. There is very little reason for this layout to need more than this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> <title>template</title> </head><body> <div id="container"> <h1> <span><strong>Tools</strong>and</span> <b>Templates</b>.com <i><!-- image sandbag, do not remove --></i> </h1> <div id="headerAdverts"> <script type="text/javascript"><!-- google_ad_client = "pub-4736739829403533"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "text"; google_ad_channel =""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "006598"; google_color_url = "006598"; google_color_text = "333333"; //--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> </div> <ul id="mainMenu"> <li><a href="/">HOME</a></li> <li><a href="/">PRODUCTS</a></li> <li><a href="/">ADVICE</a></li> <li><a href="/">RESOURCES</a></li> <li><a href="/">FORUM</a></li> <li><a href="/">FAQ</a></li> <li><a href="/">CONTACT</a></li> </ul> <div id="contentWrapper"><div id="content"> <h2>About Tools and Templates.com</h2> <p> Tools and Templates was started by <a href="http://www.bacwebdesign.com">BAC Web Design</a> in July of 2002. The thought was there were a number of good "help sites" for developers using FrontPage and a number of sites selling templates. However, if you were looking for a site that gave you a variety of templates AND some good tips on getting the most from your website, you were out of luck. </p><p> Since in the three years the site has been up and running we have added a several new products, more than two hundred new FrontPage templates and a support forum where you can ask a question about anything having to do with your website. </p> <div class="standout"> <a href="mailto:info@toolsandtemplates.com"> Interested in becoming a designer for Tools and Templates? </a> </div> <!-- #content, #contentWrapper --></div></div> <!-- empty SPAN below are image sandbags, do not remove --> <div id="sideBar"> <h2 class="boxTop">Products<span></span></h2> <div class="boxContent"> <ul class="sideList"> <li><a href="/products-fp-templates.asp">FrontPage Templates</a></li> <li><a href="/products-fp-2003dwt.asp">FrontPage 2003 DWT</a></li> <li><a href="/products-expression-web.asp">Expression Web Designer</a></li> <li><a href="/products-web-tools-swishintro.asp">SWiSH Intro Pages</a></li> <li><a href="/products-html.asp">HTML Templates</a></li> <li><a href="/products-web-tools.asp">Add Ons & Scripts</a></li> <li><a href="/categories.asp">Browse Categories</a></li> <li><a href="/products.asp">All Products</a></li> </ul> <!-- .boxContent --></div> <div class="boxBottom"><span></span></div> <h2 class="boxTop">Site Search<span></span></h2> <form method="post" action="search.asp"> <div class="boxContent"> <input type="hidden" id="posted" value="1" /> <input type="hidden" id="sprice" value="" /> <input class="search" type="text" id="stext" size="18" /> <input type="image" src="images/button_1.jpg" /> <!-- .boxContent --></div> </form> <div class="boxBottom"><span></span></div> <h2 class="boxTop">Newsletter Signup<span></span></h2> <div class="boxContent"> <p> Stay up to date with the latest news on template releases and special discount offers! </p> <a href="http://www.bacwebdesign.com/newslettersignup.asp"> Sign Up Here! </a> <!-- .boxContent --></div> <div class="boxBottom"><span></span></div> <div class="designBy"> <a href="http://www.bacwebdesign.com"> design by <span>BAC</span> <b>WebDesign</b> </a> </div> </div> <!-- #container --></div> <div id="footer"> <script type="text/javascript" src="http://4.adbrite.com/mb/text_group.php?sid=131263&col=4&br=1&dk=6170706c7920666f7220612063726564697420636172645f345f315f776562" ></script> <ul> <li class="first"><a href="http://www.toolsandtemplates.com">Home</a></li> <li><a href="http://www.toolsandtemplates.com/categories.asp">Products</a></li> <li><a href="about.htm">About Us</a></li> <li><a href="affiliate_info.htm">Affiliates</a></li> <li><a href="newsletter.htm">Newsletter</a></li> <li><a href="privacy-policy.htm">Privacy Policy</a></li> <li><a href="sitemap.asp">Site Map</a></li> <li class="last"><a href="search.asp">Search</a></li> </ul> © 2002-2008 Tools and Templates.com - All Rights Reserved This site is owned and operated by <a href="http://www.bacwebdesign.com">BAC Web Design</a> <img src="images/creditcards.gif" width="233" height="26" alt="Visa, MasterCard, Discover, AmEx and PayPal accepted" /> <!-- #footer --></div> <script type="text/javascript" src="http://www.google-analytics.com/urchin.js" ></script> <script type="text/javascript"> _uacct = "UA-2241184-1"; urchinTracker(); </script> </body></html> Code (markup): Which comes in at 5.4k vs. the 18.2k you had. Get rid of the rubbish like the target attribute, axe all the tables, mark up the lists as... LISTS, use some actual HEADER tags, etc, etc. Oh, and I axed the sidebar adbrite advert - if people aren't clicking on one ad, they sure as shine aren't going to click on three of them. Since you seem to be using two different ad sources, I left in one of each... but there's NEVER a good reason to call the same advertiser more than once. On to the CSS and image remastering...