I am in the process of creating an online portfolio for myself. I haven't coded since I was in middle school and just got a new laptop so I figured I'd give it a shot again. My navigation bar is made of sprite images and is currently coded and working "great". The Navigation buttons have 3 states.. 1. Normal (grey background and white text) 2. Hover (grey background but yellow text) and then once on the page itself 3. Active (yellow background and grey text) My problem is when I render my site in Firefox and Explorer everything looks fine except when a button is Active you can see a line between the image and the browser places it slightly out of place. I really don't think anything is wrong with my code or sprite images because when I render it with Google Chrome it comes out looking perfect. Hoping I am wrong and there is a solution so I can continue with my site. But that little line and being set out of place will drive me crazy especially since it's with the two most used browsers out there. I am trying to design the entire site using CSS and would like to know if sprite images are my best option. Here is what my site looks like: Here you can see the problem I'm talking about in Explorer and Firefox: (hard to see but look at the left slanted corner)(a lot more noticeable when looking at the complete website) And here you can see it looking perfect when viewed with Google Chrome: Here is my code for the menu in the <STYLE> tag: /* NAVIGATION */ ul#menu{margin:0; padding:0; list-style:none; clear:both;} #menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:0px;} #menu li a{background:url('images/navigation.jpg') no-repeat; width:1000px; height:25px; display:block;} /* HOME */ #menu li.home{width:148px; height:25px;} #menu li.home a{background-position:0px 0px;} #menu li.home a:hover{background-position:0px -25px;} #menu li.home a.active{background-position:0px -50px;} /* PHOTOGRAPHY */ #menu li.photography{width:248px; height:25px;} #menu li.photography a{background-position:-147px 0px;} #menu li.photography a:hover{background-position:-147px -25px;} #menu li.photography a.active{background-position:-147px -75px;} /* GRAPHIC ART */ #menu li.graphicart{width:228px; height:25px;} #menu li.graphicart a{background-position:-396px 0px;} #menu li.graphicart a:hover{background-position:-396px -25px;} #menu li.graphicart a.active{background-position:-396px -50px;} /* WEB DESIGN */ #menu li.webdesign{width:214px; height:25px;} #menu li.webdesign a{background-position:-624px 0px;} #menu li.webdesign a:hover{background-position:-624px -25px;} #menu li.webdesign a.active{background-position:-624px -75px;} /* CONTACT */ #menu li.contact{width:162px; height:25px;} #menu li.contact a{background-position:-838px 0px;} #menu li.contact a:hover{background-position:-838px -25px;} #menu li.contact a.active{background-position:-838px -50px;} Code (markup): And here is the code for the menu in the <BODY> tag: <DIV ID="NAVIGATION"> <UL ID="menu"> <LI CLASS="home"><A CLASS="active" HREF="00-MAIN.html">HOME</A></LI> <LI CLASS="photography"><A HREF="01-PHOTOGRAPHY.html">PHOTOGRAPHY</A></LI> <LI CLASS="graphicart"><A HREF="02-GRAPHICART.html">GRAPHIC ART</A></LI> <LI CLASS="webdesign"><A HREF="03-WEBDESIGN.html">WEB DESIGN</A></LI> <LI CLASS="contact"><A HREF="04-CONTACT.html">CONTACT</A></LI> </UL> </DIV> HTML: All help is very appreciated. I would really like to get this resolved so I can continue further with my site. Thanks for taking the time to read this!
Here is a look at the sprite image for the PHOTOGRAPHY page when it is in it's active state like above:
I think you got a bit too complex for your own good on this; gimme a few and I'll toss together a workalike that's a wee bit simpler. ... though all these fixed size images with fixed text inside them is the type of thing that should be left in the previous decade. Not exactly accessible design; though the HTML 3.2 style caps markup says that too. Also, try not to say "active" as a class, it's too easily confused with the :active pseudoclass, which along with :focus you should have targeting same as your :hover Likewise, that inaccessible text-indent crap so as to avoid using a span or :before defeats one of the entire reasons to use image-replacement in the first place; gracefully degrading images off with CSS on.
I added SPAN to the markup, and swung an axe at that "DIV for nothing" around the UL. (since UL is a perfectly good block level container). <ul id="mainMenu"> <li class="home"> <a href="00-main.html" class="current">HOME<span></span></a> </li> <li class="photography"> <a href="01-photography.html">PHOTOGRAPHY<span></span></a> </li> <li class="graphicArt"> <a href="02-graphicart.html">GRAPHIC ART<span></span></a> </li> <li class="webDesign"> <a href="03-webdesign.html">WEB DESIGN<span></span></a> </li> <li class="contact"> <a href="04-contact.html">CONTACT<span></span></a> </li> </ul> Code (markup): Redoing the image helped a lot -- it needs the transparency on BOTH sides. I used palette transparency in a 64 color PNG, to get the filesize under control. http://www.cutcodedown.com/for_others/meelayz/images/mainMenu.png Extra padding on each side being the key -- you overlap the transparencies, then use z-index on .current and :hover to depth-sort who should be on top. I put a live demo on my server here: http://www.cutcodedown.com/for_others/meelayz/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/meelayz/ being wide open for easy access to the gooey bits and pieces. Works perfect in IE6/newer, and is functional even in IE 5.5 (it's off by 1px on the right hiding the border, oh noes, not that!) I use overflow:hidden on the anchors with the image-replacement SPAN absolute positioned over the text. Notice I made those span the full image height, this means to do the hover states all we need to do is slide the image around and let the overflow handle it -- this way we only need to say the background positions once instead of a second and third time for the hover states and .current. It also means that since this is gilder-levin replacement, CSS on Images off the page is still usable. (the flaw in using that idiotic text-indent:-999 garbage). Hope this helps. *** side note *** -- again I'd probably NOT use a menu like that on a page since it reeks of fixed width layout garbage; making responsive layout harder to implement, much less being the antithesis of semi-fluid elastic design. By definition it's px metric content, something we were never supposed to do on websites in the first place. Though I've been guilty of doing so myself in the past.