SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape 6.1 scrunching up my text

    In I.E 6.0 this page is O.K ( just as an example).

    http://www.adoptionexperiences.org.uk/asleep.html

    In Netscape 6.1 the text gets doubled up on itself, as if it was in two layers one on top of the other. Also, there's no hover effect on the side links.

    In Netscape 4.7 the 'search this site' text is missing, though the search box is there, and again there's no hover effect.

    I've validated it with the W3 CSS validator - the only thing that's wrong with it, according to this, is that there's no background color to my search box text. However, I've tried several different variations (background:white, background-color:white, background:#FFFFFF, background-color:#FFFFF) and the validator still says there's no background color, so I don't know what to make of that.

    Anyhow, that's a side-issue, it's the scrunched-up text that is baffling me. Anyone any ideas ?



    I've included the full external CSS file.


    .parastyle0 {text-align:left;margin-left:0px;text-indent:0px;font-family:Arial,sans-serif;font-weight:bold;font-style:italic;font-size:16px;text-decoration:underline;color:red;height:18px;background-color:transparent;}
    .H3 {text-align:center;margin-left:0px;text-indent:0px;font-family:Arial,sans-serif;font-weight:bold;font-style:italic;font-size:20px;text-decoration:none;color:#186321;height:22px;background-color:transparent;}
    .H4 {text-align:center;margin-left:0px;text-indent:0px;font-family:Arial,sans-serif;font-weight:bold;font-style:italic;font-size:18px;text-decoration:none;color:#186321;height:20px;background-color:transparent;}
    .parastyle11 {text-align:left;margin-left:0px;text-indent:0px;font-family:Arial,sans-serif;font-weight:normal;font-style:italic;font-size:18px;text-decoration:none;color:black;height:20px;background-color:transparent;}
    .parastyle12 {text-align:left;margin-left:0px;text-indent:24px;font-family:Arial,sans-serif;font-weight:bold;font-style:italic;font-size:17px;text-decoration:none;color:black;height:20px;background-color:transparent;}
    .parastyle25 {text-align:left;margin-left:0px;text-indent:0px;font-family:Arial,sans-serif;font-weight:bold;font-style:italic;font-size:12px;text-decoration:underline;color:black;height:18px;background-color:transparent;}
    .parastyle30 {text-align:left;margin-left:0px;text-indent:60px;font-family:Arial,sans-serif;font-weight:bold;font-style:italic;font-size:14px;text-decoration:none;color:#186321;height:18px;background-color:transparent;}




    A.sidebar:link {color:#29006b; background:transparent; text-decoration:underline}

    A.sidebar:visited { color:#7BC66B; background:transparent; text-decoration:none}

    A.sidebar:hover {color:#29006b; background:#E8FFE8; text-decoration:none}




    A:link {color:#29006b; background:transparent; text-decoration:underline}

    A:visited { color:#7BC66B; background:transparent; text-decoration:none}

    A:hover {color:#29006b; background:#E8FFE8; text-decoration:none}

    Many thanks.

  2. #2
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Some suggestions

    <DIV CLASS="parastyle30">Good Times >> Asleep<br><br><br>

    Don't use the >> as you have here. That may be confusing matters. use &gt;&gt;

    Be sure to validate the HTML, not just the CSS

    You also use a lot of inline styles, something that I would advise against generally - it only bulks up the page.

    Also, you are using a new <DIV> for every paragraph. It would be easier to have something like this:

    DIV.parastyle12 P {properties ...}

    Then have:

    <DIV>
    Text goes here sdfg sf gs fgs fg sfg
    <P>
    Text goes here sdfg sf gs fgs fg sfg
    <P>
    Text goes here sdfg sf gs fgs fg sfg
    <P>
    </DIV>

    These won't necesssarily solve this problem. I need to check for myself on 6.1 to see it happening, but these are just some observations.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  3. #3
    SitePoint Member
    Join Date
    Jan 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, lloydi, I'll check those out.

  4. #4
    SitePoint Member
    Join Date
    Jan 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've followed your advice and removed the >>; and also validated the HTML in 1st page 2000. Still no joy, so what I did was strip the code down, removing a bit at a time - until I was left with with just one layer, containing the table with the text in. Still no joy.

    I then discovered that removing all but one set of the Div tags solved the problem - SO, if this was my original code:


    <DIV CLASS="parastyle12"> 'No!'
    </DIV>

    <DIV CLASS="parastyle12"> 'Once -'
    </DIV>

    <DIV CLASS="parastyle12"> 'No!'
    </DIV>


    then getting it to look like THIS solved the problem of scrunching up, though now I've lost formatting:


    <DIV CLASS="parastyle12"> 'No!'

    'Once -'

    'No!'

    </DIV>


    At first sight it seems Netscape 6.1 doesn't like CSS at all. I thought maybe it doesn't like identical repetitions of the same <DIV CLASS="parastyle12"> one after the other, but when I tried a <DIV CLASS="H3"> instead of one of the <DIV Class="parastyle12"> it didn't resolve the problem.


    Therefore it's something that I'm doing. Is there a very strict interpretation of CSS that Netscape's applying that I don't know about ?

    Perhaps that only one <DIV CLASS="xyz"> whatever whatever </DIV> per layeer is allowed ?!!!
    Last edited by Paracelsus; Jan 25, 2002 at 08:23.


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
  •