SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Enthusiast Samia1667's Avatar
    Join Date
    Apr 2002
    Location
    Uganda
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help me with my code

    Dear Experts,

    I am try to have a go at CSS, however, I am having problems with the following code displaying well in Netscape. I think it may be the same with other browsers too. Please help me identify my mistakes.
    --------------------------------------
    body {
    margin:0px;
    background-image: url(bg04.gif);
    background-repeat: repeat-y;
    font-family:verdana, arial, helvetica, sans-serif;
    color:#333;
    background-color:white;
    }
    h1 {
    margin:0px 0px 15px 0px;
    padding:0px;
    font-size:28px;
    line-height:28px;
    font-weight:900;
    color:#ccc;
    }
    p {
    font:11px/20px verdana, arial, helvetica, sans-serif;
    margin:0px 0px 16px 0px;
    padding:0px;
    }
    #Content>p {margin:0px;}
    #Content>p+p {text-indent:30px;}

    a {
    color:#09c;
    font-size:11px;
    text-decoration:none;
    font-weight:600;
    font-family:verdana, arial, helvetica, sans-serif;
    }
    a:link {color:#09c;}
    a:visited {color:#07a;}
    a:hover {background-color:#eee;}

    #Header {position: absolute; top:2px; left:154px;}

    #Content {
    margin:10px 30px 50px 135px;
    padding:50px;
    }

    #Menu {
    position:absolute;
    top:100px;
    left:3px;
    height: auto;
    width:125px;
    background-color:#ffe5bf;
    border:1px dashed #999;
    line-height:110%;
    /* Again, the ugly brilliant hack. */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:125px;
    }
    /* Again, "be nice to Opera 5". */
    body>#Menu {width:150px;}

    .menubox {/*button-like box for the left-side navigation*/
    font-size: 15px;/*readability for the links*/
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    background-color: #ffe5bf;
    border-color: #ffe5bf;/*or, in shorthand, the three*/
    border-style: groove; /*border-properties would read:*/
    border-width: 2px;/*border: 2px groove #ffe5bf;*/
    padding: 1px;
    margin: 2px;
    }

    #topnav {
    position:absolute;
    top:40px;
    height:auto;
    right:8px;
    width:340px;

    }

    a.topnav {font: 0.57em verdana,sans-serif;

    }

    .bottomnav {/*this is a box where the bottom-navigation*/
    /* and the copyright will be placed*/
    background: #ffcc7f;
    color: #09c;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 9px;
    text-align:center;
    padding: 2px;
    margin: 2px;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;/* the border property in longhand*/
    }
    --------------------------------

    Thank you in advance,

    Raymond

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How's about telling us exactly what the problems are?

    There could be some quirks that are actually down to your HTML, not your CSS/XSL.

    G

  3. #3
    SitePoint Enthusiast Samia1667's Avatar
    Join Date
    Apr 2002
    Location
    Uganda
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help me with my code

    The problem is: 1)the background running down the left edge of the site does not display,
    2) my navigation on the left also doen't display
    3) my bottom nav links are all pushed to the extreme left corner at the bottom. and,
    4) my fonts are not displaying.

    Raymond

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post a link to the page in question, it might help to solve the problem .

  5. #5
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Mark said, we really need an actual page to look at to understand your problem. Also, which version of Netscape is causing problems? Netscape 4 has terrible CSS support, while Netscape 6/7 is one of the best browsers around for CSS - there's a huge difference between the two browsers.

  6. #6
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hear ya! Netscape 4.7 is a nightmare!!!

  7. #7
    SitePoint Enthusiast Samia1667's Avatar
    Join Date
    Apr 2002
    Location
    Uganda
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here is the link

    Here is the link to the site
    http://choicerental.port5.com
    it won't display in netscape 4

  8. #8
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit:

    Ignore that .... hmmmmmmmmmm
    Last edited by greg.harvey; Aug 13, 2002 at 05:32.

  9. #9
    SitePoint Enthusiast Samia1667's Avatar
    Join Date
    Apr 2002
    Location
    Uganda
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, Greg, what did you say I edit?

  10. #10
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought I had it but it didn't work ......

  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Netscape 4 doesn't support the @import method of linking to an external CSS file.

    Therefore, it will not be able to access any styles linked to the page using that method.

    If you 'revert' to the more traditional method...
    Code:
    <link rel="stylesheet" type="text/css"  href="/choice2.css" media=all>
    ...NN4 will be able to 'see' the CSS file and use the styles contained within it.

    For more info see here and here.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  12. #12
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope. I confidently posted that, then tried it, went "oops!" and quickly retracted it further up this post!!

  13. #13
    SitePoint Addict jough's Avatar
    Join Date
    Sep 2001
    Location
    You have moved into a dark place. It is pitch blac
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Here is the link

    Originally posted by Samia1667
    Here is the link to the site
    http://choicerental.port5.com
    it won't display in netscape 4
    Hrm... Well, I don't have a copy of Netscape 4 anymore, as I've been rather hard-line webstandards and use a tiny bit of javascript to send users to a table-based layout.

    The main problems you're having with NS 4 is that NS 4 hardly supports ANY CSS whatsoever, and what IS implemented is implemented quite poorly.

    You can't position things in NS 4 *and* other browsers - they do it completely differently - so the only CSS that's really safe to use with NS 4 is really simple font and color choices - things that will degrade gracefully even if there was no CSS.

    I realise this isn't much help, and some folks *DO* make things work in both standards-compliant browsers *and* Netscrape 4, but it's a lot of messy messy work ahead for you in order to do so.

    The best thing may be to use the @import 'URL'; method to hide the stylesheet from Netscape, and then write a different stylesheet to display in NS4 (linking the NS4 and non-compliant sheet with the usual link rel and then overriding those styles with the compliant sheet from the @import, which is a method of linking to an external stylesheet that's unknown to NS4).

    As I said, it's a lot of work - how many of your visitors use NS4 still? Do you have access to your web logs or is this a totally new site for you?

    -- Jough
    My Dynamic Site in Action:
    Poetry X Poetry Archive

  14. #14
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, it's the two occurances of...

    voice-family: "\"}\"";

    ... in your CSS file that is tripping up NN4.

    This is a hack meant purely for use in IE5.x PC and will be problematic with other browsers (such as you are experiencing with NN4).

    You may need to consider assigning an alternative CSS file (without the hack) to your page using javascript or simply removing it from the CSS you currently use.

    Of course, you'll still need to use the 'traditional' external CSS linking method for NN4 to be able to see the CSS file once sorted.
    Last edited by Bill Posters; Aug 13, 2002 at 08:55.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  15. #15
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! Combination of two problems. Using a JavaScript to detect NN4 is a common technique anyway -- people used to detect NN4 for Mac all the time because it uses a different screen res to all other browsers (96 dpi) .... Anyway, sorry -- that was off topic.

  16. #16
    not tyrael anymore.. Manores's Avatar
    Join Date
    Jan 2002
    Location
    Izmir-Ankara-Istanbul / Turkey
    Posts
    431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Congrats greg!

    Not related to the topic

    Just wanted to congrat. the 400th post of greg
    Nanaman never dies!
    Once I was Tyrael!

    I wish Wayne also could change my whole life as he did with my nick and made me a rally driver!

  17. #17
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Was it?! Krikey!!

  18. #18
    SitePoint Enthusiast Samia1667's Avatar
    Join Date
    Apr 2002
    Location
    Uganda
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Re: Here is the link

    Originally posted by jough


    ...write a different stylesheet to display in NS4.... is this a totally new site for you?

    -- Jough
    Your right Jough, its alot of work (I've tried) and still it is not displyaing the way I want it. Yes, it is a new site. I just wanted to make sure I did something that's cros browser.

    Raymond

  19. #19
    SitePoint Enthusiast Samia1667's Avatar
    Join Date
    Apr 2002
    Location
    Uganda
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Bill Posters
    OK, it's the two occurances of...

    voice-family: "\"}\"";

    ... in your CSS file that is tripping up NN4.
    Bill, Are you suggesting I remove them.

  20. #20
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll definately need to remove them from whatever .css file is used by NN4, otherwise it will continue to break the page for visitors using that browser.

    Of course, this only matters if you wish to offer decent support for users with NN4.
    Fwiw, many web-designers/developers are no-longer continuing to bother, feeling that it's more aggro than the stats indicate it's worth.

    --

    Remove all instances of the IE5 PC hack (voice-family: "\"}\"";) from your main .css file and save it with a different name (e.g. main_nn4.css).
    Copy it to the same directory as the main .css file.

    Do not put a link to the main .css file in the head directly.
    Use this piece of javascript to 'write' which .css file is used depending on whether the visitor is using NN4 or not.

    Code:
    if (document.layers) {
    document.write("<link rel='stylesheet' type='text/css' href='main_nn4.css'>");
    } else {
    document.write("<link rel='stylesheet' type='text/css' href='main.css'>");
    }
    This code can be added directly to the head of your page (wrapped in the usual <script...></script> tags) or saved as (or added to) a .js file and linked in the head of each page in the usual way.

    If you leave it unwrapped (i.e. not wrapped in a function) it will execute automatically as the linked .js file is read through (while the head is being processed).
    It will execute automatically for each page that has the .js file linked to it.

    Hope this helps
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  21. #21
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a LOT more aggro than the stats indicate it's worth -- here are the browser stats for my last site in July:

    1 Microsoft Internet Explorer -- 94.49% -- 11,598 sessions
    2 Other Netscape Compatible -- 1.9% -- 396 sessions
    3 Netscape -- 2.79% -- 381 sessions
    4 MSProxy/2.0 -- 0.71% -- 199 sessions
    5 Others -- 0.02% -- 7 sessions
    And of those 381 Netscape sessions, 235 were NN4. Interestingly, NO Netscape 6 at all, IE4 has all but gone though IE5 is still beating IE6 (just!) and surprisingly few Opera sessions, in spite of the fact that this was for an IT campaign. Win2K was the most popular platform by a long way. WinME/98 was the closest rival. Macs accounted for just 83 sessions.

    G

    Ps -- the percentages are of the hits, not the sessions -- that's why they don't quite tally.

  22. #22
    SitePoint Enthusiast Samia1667's Avatar
    Join Date
    Apr 2002
    Location
    Uganda
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill, when using

    Code:
    <link rel="stylesheet" type="text/css"  href="/choice2.css" media=all>
    ...NN4 will be able to 'see' the CSS file and use the styles contained within it.
    do I have to get rid of @import or can I use both at the sametime.

    Thanks

  23. #23
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no real need to have both.

    In general , it's best to use one method or the other.


    However, there is a trick/technique that uses both methods together as a way of specifying NN4-specific css that you may find useful.

    You can read about it at evolt.org.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  24. #24
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by greg.harvey
    and surprisingly few Opera sessions, in spite of the fact that this was for an IT campaign
    Don't forget that many Opera users (stop it now guys!!) browse with Opera masquerading as IE so that they can view the sites of Eedyuts who've included "ie only" scripts.
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  25. #25
    SitePoint Enthusiast Samia1667's Avatar
    Join Date
    Apr 2002
    Location
    Uganda
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    I thank you all for taking your time to try to help me out,
    Thank you so much, and regards


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
  •