1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Cross browser question... Netscape rendering as Firefox

Discussion in 'CSS' started by web_dude, Nov 30, 2007.

0
  1. #1
    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>
     
    web_dude, Nov 30, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    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.
     
    soulscratch, Nov 30, 2007 IP
  3. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    web_dude, Nov 30, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #4
    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.
     
    soulscratch, Nov 30, 2007 IP
  5. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    web_dude, Nov 30, 2007 IP
  6. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    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.
     
    web_dude, Nov 30, 2007 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    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.
     
    deathshadow, Nov 30, 2007 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    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.
     
    deathshadow, Nov 30, 2007 IP
  9. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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?
     
    web_dude, Dec 1, 2007 IP
  10. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #10
    blueparukia, Dec 1, 2007 IP
  11. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks! This has to be the best forum I have ever been on.
     
    web_dude, Dec 1, 2007 IP
  12. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    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?
     
    web_dude, Dec 1, 2007 IP
  13. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #13
    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):
     
    blueparukia, Dec 1, 2007 IP
  14. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #14
    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/
     
    soulscratch, Dec 1, 2007 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    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.
     
    deathshadow, Dec 1, 2007 IP
  16. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #16
    Well, yeah, its bad practice,but he wants what he wants....
     
    blueparukia, Dec 1, 2007 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Isn't "Mall" supposed to be attatched to the end of the nav strip?
     
    Stomme poes, Dec 2, 2007 IP
  18. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    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...
     
    web_dude, Dec 2, 2007 IP
  19. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    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.
     
    web_dude, Dec 2, 2007 IP
  20. web_dude

    web_dude Guest

    Messages:
    40
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    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.
     
    web_dude, Dec 4, 2007 IP