My code works on IE 6 and 7, Fireforx, Safari, Opera, Netscape 8.1.3 as IE but does NOT work right on Netscape rendering as Firefox. Can anyone see what I'm doing wrong? There could be lots of stuff since I'm pretty new to CSS but I'm running out of ideas. Netscape, especially as Firefox, makes up a very small population of visitors to the site but I'd still like to make it work. Thank you in advance to anyone who can help. Code is attached below... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Highsmith Header</title> <script language="JavaScript" type="text/JavaScript" src="javascript/ImageRollover.js"></script> <style type="text/css"> /* Don't delete anything below here */ body { font-size: 0px; } * img { border:none; } * ul { position:relative; list-style-type:none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } * li { display:inline; float:left; } #container { width: 960px; margin-left:auto; margin-right:auto; } #navbar { position:relative; width:336px; height:75px; float:left; } #navbar ul { width:336px; height:75px; } #navbar2 { position:relative; width: 624px; float:right; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #navbar2 ul { width: 624px; } #navbar3 { position:relative; width: 960px; float: left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } #navbar3 ul { width: 960px; height: 55px; } .search_input { width: 155px; height: 25px; padding-top: 4px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; background-image:url(images/lse_header_37.jpg); } .cart_info { font-size: 12px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; width: 134px; height: 21px; background-image:url(images/lse_header_40.jpg); text-align: center; padding-top: 8px; } </style> </head> <body> <div id="container"> <div id="navbar"> <ul> <li><img src="images/lse_header_01.jpg" name="image1" id="image1" width="16" height="75" align="top" /></li> <li><a href="#"><img src="images/lse_header_02.jpg" alt="Highsmith Logo" name="image2" width="220" height="75" align="top" id="image2" title="Highsmith Logo" /></a></li> <li><img src="images/lse_header_03.jpg" name="image3" id="image3" width="100" height="75" align="top" /></li> </ul> </div> <div id="navbar2"> <ul> <li><img src="images/lse_header_04.jpg" name="image4" id="image4" width="624" height="10" align="top" /></li> <li><img src="images/lse_header_05.jpg" name="image5" id="image5" alt="Highsmith" title="Highsmith" width="83" height="26" align="top" /></li> <li><a href="#"><img src="images/lse_header_u_06.jpg" name="image6" id="image6" alt="Upstart" title="Upstart" width="74" height="26" align="top" onmouseover="swapImage('image6','images/lse_header_d_06.jpg')" onmouseout="swapImage('image6','images/lse_header_u_06.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_07.jpg" name="image7" id="image7" alt="Upstart Books" title="Upstart Books" width="110" height="26" align="top" onmouseover="swapImage('image7','images/lse_header_d_07.jpg')" onmouseout="swapImage('image7','images/lse_header_u_07.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_08.jpg" name="image8" id="image8" alt="Edupress" title="Edupress" width="85" height="26" align="top" onmouseover="swapImage('image8','images/lse_header_d_08.jpg')" onmouseout="swapImage('image8','images/lse_header_u_08.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_09.jpg" name="image9" id="image9" alt="Interact" title="Interact" width="74" height="26" align="top" onmouseover="swapImage('image9','images/lse_header_d_09.jpg')" onmouseout="swapImage('image9','images/lse_header_u_09.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_10.jpg" name="image10" id="image10" alt="Mind Sparks" title="Mind Sparks" width="103" height="26" align="top" onmouseover="swapImage('image10','images/lse_header_d_10.jpg')" onmouseout="swapImage('image10','images/lse_header_u_10.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_11.jpg" name="image11" id="image11" alt="Mall" title="Mall" width="57" height="26" align="top" onmouseover="swapImage('image11','images/lse_header_d_11.jpg')" onmouseout="swapImage('image11','images/lse_header_u_11.jpg')" /></a></li> <li><img src="images/lse_header_12.jpg" name="image12" id="image12" width="38" height="26" align="top" /></li> <li><img src="images/lse_header_13.jpg" name="image13" id="image13" width="624" height="8" align="top" /></li> <li><img src="images/lse_header_14.jpg" name="image14" id="image14" width="144" height="21" align="top" /></li> <li><a href="#"><img src="images/lse_header_u_15.jpg" name="image15" id="image15" alt="Sign In" title="Sign In" width="42" height="21" align="top" onmouseover="swapImage('image15','images/lse_header_d_15.jpg')" onmouseout="swapImage('image15','images/lse_header_u_15.jpg')" /></a></li> <li><img src="images/lse_header_16.jpg" name="image16" id="image16" width="12" height="21" align="top" /></li> <li><a href="#"><img src="images/lse_header_u_17.jpg" name="image17" id="image17" alt="My Account" title="My Account" width="69" height="21" align="top" onmouseover="swapImage('image17','images/lse_header_d_17.jpg')" onmouseout="swapImage('image17','images/lse_header_u_17.jpg')" /></a></li> <li><img src="images/lse_header_18.jpg" name="image18" id="image18" width="11" height="21" align="top" /></li> <li><a href="#"><img src="images/lse_header_u_19.jpg" name="image19" id="image19" alt="Help" title="Help" width="30" height="21" align="top" onmouseover="swapImage('image19','images/lse_header_d_19.jpg')" onmouseout="swapImage('image19','images/lse_header_u_19.jpg')" /></a></li> <li><img src="images/lse_header_20.jpg" name="image20" id="image20" width="12" height="21" align="top" /></li> <li><a href="#"><img src="images/lse_header_u_21.jpg" name="image21" id="image21" alt="Print for P.O." title="Print for P.O." width="74" height="21" align="top" onmouseover="swapImage('image21','images/lse_header_d_21.jpg')" onmouseout="swapImage('image21','images/lse_header_u_21.jpg')" /></a></li> <li><img src="images/lse_header_22.jpg" name="image22" id="image22" width="11" height="21" align="top" /></li> <li><a href="#"><img src="images/lse_header_u_23.jpg" name="image23" id="image23" alt="Your Lists" title="Your Lists" width="58" height="21" align="top" onmouseover="swapImage('image23','images/lse_header_d_23.jpg')" onmouseout="swapImage('image23','images/lse_header_u_23.jpg')" /></a></li> <li><img src="images/lse_header_24.jpg" name="image24" id="image24" width="161" height="21" align="top" /></li> <li><img src="images/lse_header_25.jpg" name="image25" id="image25" width="624" height="10" align="top" /></li> </ul> </div> <div id="navbar3"> <ul> <li><a href="#"><img src="images/lse_header_u_26.jpg" name="image26" id="image26" alt="Library Supplies" title="Library Supplies" width="121" height="26" align="top" onmouseover="swapImage('image26','images/lse_header_d_26.jpg')" onmouseout="swapImage('image26','images/lse_header_u_26.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_27.jpg" name="image27" id="image27" alt="Library Furniture" title="Library Furniture" width="125" height="26" align="top" onmouseover="swapImage('image27','images/lse_header_d_27.jpg')" onmouseout="swapImage('image27','images/lse_header_u_27.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_28.jpg" name="image28" id="image28" alt="School Furnishings" title="School Furnishings" width="135" height="26" align="top" onmouseover="swapImage('image28','images/lse_header_d_28.jpg')" onmouseout="swapImage('image28','images/lse_header_u_28.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_29.jpg" name="image29" id="image29" alt="Office Furnishings" title="Office Furnishings" width="133" height="26" align="top" onmouseover="swapImage('image29','images/lse_header_d_29.jpg')" onmouseout="swapImage('image29','images/lse_header_u_29.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_30.jpg" name="image30" id="image30" alt="Equipment Carts" title="Equipment Carts" width="124" height="26" align="top" onmouseover="swapImage('image30','images/lse_header_d_30.jpg')" onmouseout="swapImage('image30','images/lse_header_u_30.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_31.jpg" name="image31" id="image31" alt="Displays" title="Displays" width="74" height="26" align="top" onmouseover="swapImage('image31','images/lse_header_d_31.jpg')" onmouseout="swapImage('image31','images/lse_header_u_31.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_32.jpg" name="image32" id="image32" alt="Instructional Materials" title="Instructional Materials" width="152" height="26" align="top" onmouseover="swapImage('image32','images/lse_header_d_32.jpg')" onmouseout="swapImage('image32','images/lse_header_u_32.jpg')" /></a></li> <li><a href="#"><img src="images/lse_header_u_33.jpg" name="image33" id="image33" alt="Audiovisual" title="Audiovisual" width="96" height="26" align="top" onmouseover="swapImage('image33','images/lse_header_d_33.jpg')" onmouseout="swapImage('image33','images/lse_header_u_33.jpg')" /></a></li> <li><img src="images/lse_header_34.jpg" name="image34" id="image34" width="11" height="29" align="top" /></li> <li><img src="images/lse_header_35.jpg" name="image35" id="image35" alt="Search for" title="Search for" width="73" height="29" align="top" /></li> <li><img src="images/lse_header_36.jpg" name="image36" id="image36" width="13" height="29" align="top" /></li> <li class="search_input"><input id="search" name="search" type="text" /></li> <li><a href="#"><img src="images/lse_header_u_37.jpg" name="image37" id="image37" alt="Go" title="Go" width="33" height="29" align="top" onmouseover="swapImage('image37','images/lse_header_d_37.jpg')" onmouseout="swapImage('image37','images/lse_header_u_37.jpg')" /></a></li> <li><img src="images/lse_header_38.jpg" name="image38" id="image38" width="181" height="29" align="top" /></li> <li><a href="#"><img src="images/lse_header_u_39.jpg" name="image39" id="image39" alt="Shopping Cart" title="Shopping Cart" width="228" height="29" align="top" onmouseover="swapImage('image39','images/lse_header_d_39.jpg')" onmouseout="swapImage('image39','images/lse_header_u_39.jpg')" /></a></li> <li class="cart_info">0 item(s): $0.00</li> <li><a href="#"><img src="images/lse_header_u_41.jpg" name="image41" id="image41" alt="Quick Shop" title="Quick Shop" width="132" height="29" align="top" onmouseover="swapImage('image41','images/lse_header_d_41.jpg')" onmouseout="swapImage('image41','images/lse_header_u_41.jpg')" /></a></li> </ul> </div> </div> </body> </html>
define 'DOES NOT WORK' Does that mean the page completely breaks, and doesn't even load? Or what? Be more specific. Even though you gave the code, We won't have the images so a link would also be nice.
By doesn't work I mean that doesn't display properly. I don't have a link because I'm developing the code locally, but I can try to move it somewhere that it can be viewed. Until then, does anyone have suggestions from just looking at my code? I welcome any criticisms. I'd rather do it right and have it work over just having it work. Thanks again to anyone who can help.
Yes. 1. Use a universal reset 2. Use css rollovers 3. At least provide a screenshot of what doesnt "display properly" and a screenshot in a browser that does display it properly.
Here is a link... http://www.highsmith.com/webapp/wcs/stores/servlet/Production/TestHeader/LSE/Header.html again... It does not look right in Netscape rendering as Firefox, but works everywhere else I've tested. Thanks.
I did have a global reset for the margin and padding but since I don't want the header butted up against the top of the page I took it out. I probably could add it back in and then pad the top as needed. Is that what you were suggesting? Also, I don't think I can do css rollovers because of the images I'm using. I think that would work better if I was using text over background images which is a possible alternative which would give me much more flexibility down the road.
Well, not certain what your problem is, but I can make the following observations: Javascripted rollovers - how 1997. You get rid of that nonsense for CSS rollovers and you could halve (or more) the number of images needed - AND use about a third the HTML. 144k in 43 images - welcome to 10 seconds MINIMUM overhead JUST for handshaking on page load, for something that by my estimates should only need a dozen odd ID's, attributes and tags that shouldn't even be NEEDED for something so simple. Does not degrade images off, therin it also does not give search engines anything of use (since alt tags like most attributes mean jack shit to search engines)... for the most part you have a LOT of information stored in images that could be done just fine as actual text with the image behind it. COMPLETELY meaningless image, class and ID names... makes maintaining that a stone cold bitch. Presentational images in your markup - separate that **** out and put it in the CSS where it belongs. Basically, you've got 14k of html/css and 144k of images doing the job of 5k of HTML/CSS and 20k of images - TOPS. If I have time later today and/or tomorrow I'll do a rewrite to show you what I mean.
and here it is: http://battletech.hopto.org/for_others/web_dude/template.html It's about 95% identical - I had to quickly remake some of your images from scratch since you sliced things up too much and didn't composite in browser enough... and some elements do not perfectly match as I'm compositiing the text on the buttons on the page instead of blowing bandwidth on all those pointless images... the section I made #mainMenu does not completely reach the edges on purpose as it's done as text instead of 'pixel perfect' images. An extra div set to overflow:hidden could probably be used to 'fix' that issue if it's considered mission critical - but that runs the risk of breaking the menu when people resize the text. That's 33k in 10 files TOTAL, 3k of HTML and 5K of CSS (it took more CSS than I originally figured). Validates XHTML 1.0 Strict, works in IE 6 & 7, Opera, FF and Safari without any issues (that I could find) though IE 5.x has a box model problem (bfd, you could fix it if desired, but who cares about IE 5.x these days) I have time over the next couple days I'll toss together a deeper explanation of it.
You're awesome. Thank you for the help and the redesign. Like I said, I'm pretty new to CSS so thanks for the quick lesson. Can you post the CSS that you used?
Actually I have one more quick question... when I do a print preview of this page I get the raw html with no style. Is there a way around this so that the print preview looks the same way as the page renders?
Use the same stylesheet for your print stylesheet: In your head tags replace: <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" /> Code (markup): with: <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,print" /> Code (markup):
Uhm. I would advise against what blueparukia said. You shouldn't make the printed page all graphical or use the same media for screen and print. IMO it should always be unstyled and the font size should be changed to points, and get rid of anything unnecessary like nav links, utility links.. just mainly the content and any relating images, branding. You should take a look at this article http://www.alistapart.com/stories/goingtoprint/
Though to be honest, I'd NOT print 100% identical - as that's wasting the users ink and generally looks like crap unless they have a color laser. I would instead design a SEPARATE stylesheet just for print, adding it thus: <link type="text/css" rel="stylesheet" href="print.css" media="print" /> There's just too many differences between print and screen to feed the same CSS to both... Especially since things like navigation are just a waste of print.
Thanks again to everyone. Unfortunately CSS was touched on briefly in my web classes, and best practices were never covered, so I'm glad everyone was so helpful. If the best practice is to make a separate style sheet than that's what I want to do. btw, "Mall" is attached to the end of the nav strip on the copy that I have...
Couple of things I noticed when testing in IE 6 (haven't tried IE 7 yet)... 1) The shopping cart and quick shop rollovers don't go back to the "original" white text image until you hit another rollover.. 2) The go button rollover doesn't work. I'm trying to read through the code and find the fix for myself but if anyone can beat me to it I'd appreciate the help.
http:// battletech.hopto.org/for_others/web_dude/ Can anyone see why when you hover over the "go" button two images show and the background of school furnishing turns white when you mouse off? Problem happens in IE 7. I also still have the problems above that occur in IE 6. They are probably related. Thanks.