SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: CSS & Netscape

  1. #1
    SitePoint Member
    Join Date
    Sep 2001
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS & Netscape

    G'Day,

    Currently I'm working on using complete CSS with a project instead of those annoying tables. I have ran into problems with netscape. What looks flawless in IE is a jumbled, unidentifiable mess in Netscape. I've checked through every tag to make sure it is compliant and everything has worked fine.

    My question is can anyone point out some things that I may have done wrong that you may have possibly done in the past. Or what the heck is causing these problems.

    I'm hoping I don't have to convert to tables just for damn Netscape.


    Thanks

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which version of NS? (4.x I guess...)

  3. #3
    SitePoint Member
    Join Date
    Sep 2001
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm testing in Netscape 6, but am hoping to get it to work in version 4+.

  4. #4
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well if it doesn't work with NS 6 then its can't be standards-complient. IE allows some things that aren't correct and you might have used some of them. Also if the design is pixel-specific and you are testing with IE 5 then that could be your problem because IE 5 screws up the box model. Post some screenshots or some code and I'll be able to tell more about the problem.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  5. #5
    SitePoint Member
    Join Date
    Sep 2001
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trav,

    Thanks for taking the time to help me, I really appreciate it. I think the problem is the result of the following css:

    #container {
    position: relative;
    width: 600px;
    }

    #leftmenu {
    position: relative;
    width: 125px;
    float: left;
    font: 10px verdana;
    padding: 5px;
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    }

    #mainbody {
    position: relative;
    float: left;
    font: 10px verdana;
    text-align: left;
    }


    Using this code was the only way I could get a "content" area in two sections and then get a footer that follows to stay at the bottom.

    Here is the link.

  6. #6
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey craigifer - I might be able to help a little on this - to avoid problems later on, I think you want to give the width settings for div.row span.left/right a unit of measure, e.g., 125px - also, in div.row span.left, you're missing a colon, font: 12px verdana;

    you can get the footer to the bottom by removing float from leftmenu - dunno if that's a good idea

    I'm gonna guess that the problem with positioning home.gif is related to the way you've nested these divs

  7. #7
    SitePoint Member
    Join Date
    Sep 2001
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmi,

    Thank for posting those errors. However if I remove float from leftmenu all of my "content" is sent careening toward the bottom of the page .

    I was wondering what you meant the by the problem with home.gif. I got it to sit in the upper-left hand corner perfectly, even in Netscape. Is it shown somewhere else for you???

    Thanks

  8. #8
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no careening here - it just dropped into place - home.gif is where you want it in IE only - I thought that was part of what you were saying about the display in N and Op - I'd look into the html with those divs - I'm guessing IE gives you what you want but it may be "irregular" somehow - I'm an amateur carpenter but in no way a divisive character, so ...
    ----------------
    I just looked in Mozilla and home.gif is where you want it - maybe I remember wrong - it was a long time ago
    Last edited by mmi; Sep 22, 2002 at 07:48.

  9. #9
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Netscape 4's support for CSS1 is unreliable at best, let alone CSS2.

    I've been trying to update my site to be completely standards complaint using XHTML and CSS2, using CSS for layout. As soon as it works in Mozilla, NS7 and IE6, it starts to look like a jumbled mess in NS4.

    Have you read the article "HTML Utopia" on SitePoint?
    http://www.webmasterbase.com/article/379

    It suggests, as I recall, to abandon stylesheets altogether with Netscape 4.x, instead presenting it in style-free mode.

    As soon as I tried fixing my site for Netscape 4, I just came up against workarounds and compromises, until I had gone back to tables and malformed html code tricks.

    Now I think I'll give up on NN4, as my stats show aout 2.1% of my visitors use it.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  10. #10
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  11. #11
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation O, withered is the garland of the war!

    I can't believe how much time I have wasted worrying about NN over the last couple of years.
    stop worrying and spend a day or two learning how to get a good display
    some ppl r going to get mad with ya
    who's mad? - who describes their post as a "rant"?
    if you read the w3c standards for html, it has a pretty good indicator of what works on both browsers. As a general rule, if its a w3c standard, then it will probably work on [Netscape].
    I design with very strinct parameters, no layers, not iframe, Just tables, tables, tables. And NN figures out how to %#*@#% those up too.
    again, learn how t' code - and don't be so "strinct"

  12. #12
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    craigifer, are you testing in IE5 or IE6?

    IE5 has some important flaws in its CSS implementation. The way it reads width and height, is wrong.

    You can force IE6 to behave like IE5 by leaving the DOCTYPE statement off the start of the document. Make sure you put it back on when you finish testing.

    Also test on Opera, that has a couple of idiosyncracies - but otherwise it is very good at rendering CSS layouts.
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog Twitter Contact me
    Neon Javascript Framework Jokes Android stuff

  13. #13
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank for posting those errors. However if I remove float from leftmenu all of my "content" is sent careening toward the bottom of the page.
    I got it looking fine in mozilla (netscape 6/7's sibling, which shares the Gecko rendering engine) by starting with what's on the site now (19:30 BST, 30/9/02), and doing the following:
    • added "clear: both;" to the footer style.
    • removed the lines "onload = redo;" and "onresize = redo;"
    "clear: both;" tells the browser to push this div below any floats. IE does this (erroneously) by default, but gecko needs telling. Go read this for details of how the W3C say this stuff should work.

    Your javascript is putting a style on the menu div to set its height to some ridiculously small value (22px, I think). I suspect that IE is being nice to you, and ignoring the height because it thinks you don't want the div smaller than its contents. Gecko is rendering the div at the height you asked for. My "fix" is a hack that only works in this simple case where the body is empty. A better bet would be to work out a sensible minimum height, and include it in the JS, like this:
    Code:
    function redo() {
    var newHeight=document.getElementById('mainbody').offsetHeight;
    if (newHeight < 200) newHeight=200;
    document.getElementById('leftmenu').style.height=newHeight+'px';
    }
    I'm hoping I don't have to convert to tables just for damn Netscape.
    Gecko-based browsers, such as Netscape 6/7 and Mozilla, generally do a better job of CSS rendering than IE.

  14. #14
    SitePoint Member
    Join Date
    Sep 2001
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to everyone for the replies. I have got everything working except getting the leftmenu to be the same height as the mainbody. If I could do this then the footer would be placed right.

    Anyone know how to do this???

    Thanks

  15. #15
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A couple more small thwacks:
    • add "clear: both;" to the .hr section of your CSS
    • add "height: 2px;" to the .hr section - you are using 2-px high text to force the height of these divs in IE - but mozilla-based browsers have an option to enforce a minimum font size, for accesibility. If this option is in use, then your HRs get blown up to 12px (or more) high, wrecking the layout again. How to fix this? Well, you remember I said that mozilla will draw a div with whatever height you give it, regardless of the div's content....?
    • While you're at it, you may want replace the copyright symbol in the footer with the HTML entity version ( &amp;copy; ) which is more correct and will render properly in mozilla.

    There's something funny going on between the two browsers - Mozilla is including a bit of extra padding at the bottom of the menu and content, but I can't figure out what's causing it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •