SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot toma's Avatar
    Join Date
    Jul 2001
    Location
    Tempe, AZ
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP, CSS & Netscape

    I'm switching to using CSS for as many page elements as possible and am having a problem with Netscape 6. It's not recognizing font directives in the stylesheet where IE6 is recognizing them. Here's the code that references the style sheet selector:

    <?php

    include ("template1.php");

    // Connect to the database server
    $dbcnx = @mysql_connect("localhost", "root", "");

    if (!$dbcnx)
    { echo( "<P>Unable to connect to the " . "database server at this time.</P>" );
    exit(); }

    // Select the kyle database

    if (! @mysql_select_db("kyle") )
    { echo( "<P>Unable to locate the kyle " . "database at this time.</P>" );
    exit(); }

    // Request the bio of the performer

    $result = mysql_query( "select id, biopic, bio, title from details WHERE id=$id");

    if (!$result) { echo("<P>No titles match " . mysql_error() . "</P>");
    exit(); }

    while ( $row = mysql_fetch_array($result) )
    {$title = $row["title"];
    $biopic = $row["biopic"];
    $bio = $row["bio"];

    echo("<div id=\"searchBio\"> <table width=\"510\" border=\"0\" cellspacing=\"2\"
    cellpadding=\"0\" align=\"center\">
    <tr>
    <td width=\"100%\" height=\"49\">
    Bio | <a href=\"details.php?id=$id\">Recordings</a>
    | <a href=\"reviews.php?id=$id\">Reviews</a>
    <hr width=\"510\" align=\"center\">
    </td>
    </tr>
    </table>");


    echo("<table width=\"510\" border=\"0\" cellspacing=\"3\"
    cellpadding=\"0\" align=\"center\">
    <tr>
    <td height=\"216\" width=\"33%\" valign=\"TOP\" align=\"left\">
    <p><img src=\"$biopic\" border=\"0\" align=\"left\">$bio
    </td>
    </tr>
    <tr>
    <td>
    </td>
    </tr>
    <tr>
    <td><a href=\"javascript:history.go(-1);\">Previous Page</a> |
    <a href=\"http://t8i6b0/my_templates/php_mysql1/search.php\">New Search</a>
    </td>
    </tr></div>"); }

    ?>
    And here's the css selector:

    DIV#searchBio {
    position : absolute;
    left: 17px;
    top: 165px;
    font: 70% Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    I could probably remove all of the table tags as well and use css positioning but I wonder if that's good general practice. Netscape also doesn't display the $biopic but that is probaly a separate issue.
    Thanks for any help!

  2. #2
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DIV#searchBio {
    position : absolute;
    left: 17px;
    top: 165px;
    font: 70% Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    I've never seen anyone define CSS like that...Try this instead:

    Code:
    #searchBio { 
    position : absolute; 
    left: 17px; 
    top: 165px; 
    font: 70% Verdana, Geneva, Arial, Helvetica, sans-serif; 
    }
    Kevin

  3. #3
    SitePoint Addict mh8759's Avatar
    Join Date
    Jun 2000
    Location
    Slovenia, Europe
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not the right way to define CSS. You should use the code that Tubedogg provided and for embeding CSS in your page you should use class or span keyword.

    Mare

  4. #4
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now that you mention it, mh, that reminds me...ID is only to be used once per page. So you need to use class, like so:
    Code:
    .searchBio { 
    position : absolute; 
    left: 17px; 
    top: 165px; 
    font: 70% Verdana, Geneva, Arial, Helvetica, sans-serif; 
    }
    and
    Code:
    echo("<div class=\"searchBio\"> <table width=\"510\" border=\"0\" cellspacing=\"2\"
    According to the standard an ID is only to be used once per page. So you need to define it as a class instead. (Don't ask me who thought this up or why, cause it makes very little sense to me...)
    Kevin

  5. #5
    SitePoint Zealot toma's Avatar
    Join Date
    Jul 2001
    Location
    Tempe, AZ
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've never seen anyone define CSS like that...
    That's not the right way to define CSS.
    ...just getting started with css. Thanks for your replies! I've made the changes you've suggested and the css is now:

    .searchBio {
    position : absolute;
    left: 17px;
    top: 165px;
    font: 70% fantasy;
    }

    and the code in my php file is now:

    PHP Code:
    echo("<div class=\"searchBio\"> <table width=\"510\" border=\"0\" cellspacing=\"2\" 
    This works in IE6, not in Netscape6. Actually it is just the font directive in the css that isn't respected. If I change the background color for example, it works fine in both browsers. It's interesting that this is the same situation as before with my faulty code.
    I looked at the Master Compatibility Chart at http://www.webreview.com/style/css1/...stergrid.shtml and as would be expected font properties
    or values are fully supported in these browsers. I'll investigate some more. Any other thoughts are appreciated though.

  6. #6
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I'd do...

    font-family: fantasy;
    font-size: 70%;

    instead of the

    font: 70% fantasy;

    although if you must do it that way try

    font: fantasy 70%;
    Kevin

  7. #7
    SitePoint Zealot toma's Avatar
    Join Date
    Jul 2001
    Location
    Tempe, AZ
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I'd do... font-family: fantasy;
    font-size: 70%;
    I've tried that as well as a number of other permutations with the same non-result. Just to clarify, I'm not interested in using a particular font or style, just in verifying that I can manipulate them at will. And as stated earlier, it seems only to be the font property in Netscape6 that's not responding.
    Also, I'm using TopStyle lite now which defined the selector this way which you don't seem to like:

    font: 70% fantasy;
    Blame BradSoft!
    So, does your method work for you? If it does then clearly I'm doing something else to mutz things up.
    I'd like to incorporate CSS into my PHP content management system using regular expressions in the manner Kevin Yank demonstrated in his article once things are straight and I'm a bit more savy with CSS. Thanks for your reply.

  8. #8
    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)
    Netscape doesn't really recognize the "font" entity - the proper CSS definition for fonts is "font-family" and you should use that, as ALL CSS-enabled browsers support this, and do so fairly consistently.

    Oh, and for Netscape, for some reason, you have to use font-family as the *last* style definition. I don't know why that is, but the order is important.

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

  9. #9
    SitePoint Zealot toma's Avatar
    Join Date
    Jul 2001
    Location
    Tempe, AZ
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip jough. As a test, here's what I have now:

    .divSearch {
    position : absolute;
    left: 17px;
    top: 15px;
    font-size : 85%;
    text-decoration : line-through;
    color:#ffffcc;
    background-color: Fuchsia;
    border: groove;
    cursor: spinning;
    font-family : cursive;
    }

    All of the properties are recognized.....except font-family : cursive; It doesn't matter which font is chosen either. I don't have any other versions of Netscape installed at the moment, only NN6 and IE 6 on my PC, so I don't know about other versions or what happens on a Mac. I'm begining to think it's a NN6 issue, but whadda I know.

    Maybe I've overlooked....or it's....NAAHHH! It's that screwy Navigator.

  10. #10
    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)
    Well, font-family is only used to define fonts. If you don't have a font called "cursive" - it won't display it.

    Netscape only allows (as far as I know) for two different "generic" font definitions: "serif" and "sans-serif".

    There's a great tutorial on CSS at WebMonkey:

    http://hotwired.lycos.com/webmonkey/...tutorial1.html

    There may be one on Site Point, too. I don't know.

    But that one is particularly good for people new to CSS.

    Another great resource is Jeff Zeldman's site:

    http://www.zeldman.com

    I don't have the exact url in front of me, but suft to his "Ask Dr. Web" section, and then CSS/Styles.

    He has a great article called "Fear of Style Sheets" which isn't so much a tutorial on how to use CSS, but rather a practical guide that discusses the limitations of various browsers and how to code to allow for various browser compromises. It's essential reading.

    There are a lot of things in the CSS standard that versions of Netscape before 6.1 don't render properly, or at all. Unfortunately, web developers still have to (or should, if they don't) contend with the estimated 20% of users who use versions of Netscape 4.xx or lower.

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

  11. #11
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually font-family will take generic font definitions, according to the standard.
    http://www.w3.org/TR/REC-CSS1#font-family
    Example:
    BODY { font-family: gill, helvetica, sans-serif }
    There are two types of list values:

    • <family-name>
      The name of a font family of choice. In the last example, "gill" and "helvetica" are font families.
    • <generic-family>
      In the example above, the last value is a generic family name. The following generic families are defined:
      'serif' (e.g. Times)
      'sans-serif' (e.g. Helvetica)
      'cursive' (e.g. Zapf-Chancery)
      'fantasy' (e.g. Western)
      'monospace' (e.g. Courier)
    Kevin

  12. #12
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see any reason why it shouldn't work (the compatibility chart claims that Netscape > 4 supports all of the generic font-family definitions), however there's one more thing to try. Define the div like this:
    Code:
    DIV.searchbio {
    	position : absolute; 
    	left: 17px; 
    	top: 15px; 
    	font-size : 85%; 
    	text-decoration : line-through; 
    	color:#ffffcc; 
    	background-color: Fuchsia; 
    	border: groove; 
    	cursor: spinning; 
    	font-family : cursive;
    }
    Then I'd try taking font-size out.
    Kevin

  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)
    Originally posted by tubedogg
    [B]Actually font-family will take generic font
    definitions,
    I said that. But Netscape versions less than 6.x will not use (or use properly) any generic definitions other than "serif" and "sans-serif."

    You can pretty much ignore Netscape's documentation on their CSS support - they claim a lot more support than their browsers actually handle (and the W3C's charts are based on the browser maker's claims, not on actual field testing, it seems).

    Oh, and some versions of Netscape ignore the percentage in font sizes. For example, font-size: 200%; should be twice the size of the parent element, right? Well, Netscape often renders percentages as 200 *pixels* instead of 200 *percent*. There goes your design...

    It's commonly suggested that you should specify font sizes only in pixels, or not at all.

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

  14. #14
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually you said
    Well, font-family is only used to define fonts. If you don't have a font called "cursive" - it won't display it.
    which is wrong.
    Kevin

  15. #15
    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)
    Well, tubedogg, my next paragraph said:
    Netscape only allows (as far as I know) for two different "generic" font definitions: "serif" and "sans-serif".
    See, you have to read the *whole* post to derive someone's meaning.

    But I'm not going to bicker with you in forum. One good experiment is worth a thousand faulty hypotheses.

    (Jough tries the "cursive" generic font definition in Netscape 4.78).

    Well, what do you know. It doesn't work. I hate it when people waste my time...

    Here's a page to test the cursive definition:

    http://www.plagiarist.com/test/csstest.html

    You can check the page source to see what it's doing. It's very very simple. Just this code:

    <p style="font-family: cursive;">
    This is a test of the cursive font CSS property in Netscape.
    </p>

    Try it in IE and then in Netscape 4.xx or lower. You'll see a big difference.

    Now, after that interruption, as I was saying, the only two generic font definitions that pre 6.x versions of Netscape will display are "serif" and "sans-serif." Anything else is a crap-shoot. Usually it won't matter, but if it does, you may want to specify some common cursive fonts (I'll try to find a site that lists common cursive fonts for different operating systems).

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

  16. #16
    SitePoint Zealot toma's Avatar
    Join Date
    Jul 2001
    Location
    Tempe, AZ
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links jough. I'll have a look at 'Dr.Web' but I can say I've already looked at Webmonkey and while pretty good, I prefer Kevin Yank's article at www.webmasterbase.com/article/309/17 which isn't so giddy.

    Thanks tubedogg for your suggestion:
    however there's one more thing to try. Define the div like ...
    No luck.

    It's interesting (or something like that) all of the suggested code so far appears properly in the preview window of Homesite. One would think the latest version of Netscape could do as well, but I digress.

    If I aquire any wisdom I'll be sure to pass it along.

  17. #17
    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)
    Hadn't seen the Yank article before, and while it's a good start, isn't as complete, or practical, in my opinion, than the WebMonkey pages (which are a bit jokey, but useful).

    And in case I wasn't clear, the newest version of Netscape (version 6.1 so far) *does* fully support CSS 1 and 2. As a matter of fact, NS6.1 supports CSS better than IE5.5 does (I haven't tried IE6 yet), and even better than Opera, even though Opera was first developed by the guy who wrote the first CSS spec.

    The reason tubedogg's suggestion doesn't work in Netscape is that he's using several definitions that aren't supported in NS 4.x.

    font-size : 85%;
    text-decoration : line-through;
    cursor: spinning;
    font-family : cursive;
    As we've seen, the last definition in this quote from tubedogg isn't supported in NS4. Specifying font-size by percentage will display that font in 85 pixels, or not make any changes at all, depending on the context (it's a little bit of voodoo, the way that NS4 displays CSS).

    The cursor entity isn't supported at all, and you can't use line-through, overline, or a few others in NS either. You're probably only safe to use "underline".

    Try this:

    Code:
    P.searchbio {
    	font-size: 12px;
    	color: blue;
    	text-align: center;
    		
    	padding-top: 1%;
    	padding-bottom: 1%;
    	padding-left: 0%; 
    	padding-right: 0%;
    		
    	margin-top: 0%;
    	margin-bottom: 0%; 
    	margin-left: 30%;
    	margin-right: 15%;
    		
    	border-style: solid;
    	border-width: 1px;
    	border-color: black;
    	background-color: #DADADA;
    		
    	font-family: arial, verdana, helvetica, sans-serif;
             }
    That will give you a pretty good idea of what does and doesn't work in Netscape 4.

    Netscape 6 uses a cursive generic font - I'm using 6.1 for Windows and it uses Comic Sans while IE uses a script font (I can't tell which one just by looking).

    One nice thing about CSS is that it tends to degrade well - so even if something isn't supported you can usually code so that it degrades to a somewhat usable style.

    -- Jough
    Last edited by jough; Sep 8, 2001 at 22:33.
    My Dynamic Site in Action:
    Poetry X Poetry Archive

  18. #18
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by jough
    The reason tubedogg's suggestion doesn't work in Netscape is that he's using several definitions that aren't supported in NS 4.x.
    That was all code from toma's post.

    See, you have to read the *whole* post to derive someone's meaning.
    I read your whole post. And it said
    Well, font-family is only used to define fonts. If you don't have a font called "cursive" - it won't display it.
    Netscape only allows (as far as I know) for two different "generic" font definitions: "serif" and "sans-serif".
    Which would indicate to me, if I was uninitiated in CSS, that font-family will not accept generic font assignments in general, that only Netscape does, and then only two. None of which is true. Netscape may only accept two but there are 5, and font-family is not just for specific font names, contrary to your post.
    One good experiment is worth a thousand faulty hypotheses.
    (Jough tries the "cursive" generic font definition in Netscape 4.78).
    Well, what do you know. It doesn't work. I hate it when people waste my time...
    I never said it worked, I said it was in the standard. I was pointing out that regardless what you think you said, it did not come across as a correct statement. Not to mention we were talking about NS6, not NS4.x.

    [font isn't supported by Netscape and] the proper CSS definition for fonts is "font-family"
    Actually if you want to get technical, despite Netscape's shortcomings, font is a shorthand (just like border) for encompassing 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' and 'font-family' in one place ( http://www.w3.org/TR/REC-CSS1#font ). This would kind of throw a wrench in the gears of your "Netscape supports all of CSS1 and 2", wouldn't it?
    Last edited by tubedogg; Sep 10, 2001 at 00:08.
    Kevin

  19. #19
    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)
    Well, it looks like somebody needs a nap.

    I'm pretty sure that everything that toma had tried *should* have worked because he was using "the standard". However, to say that something *should* work when you know that it doesn't work in certain browsers is, well... unhelpful, at best.

    And you're still not reading the whole post, tubedogg. You say that:

    Actually if you want to get technical, despite Netscape's shortcomings, font is a shorthand... for encompassing [font definitions] in one place...
    This would kind of throw a wrench in the gears of your "Netscape supports all of CSS1 and 2", wouldn't it?
    Not at all. I never wrote "Netscape supports..." What I wrote was that Netscape 6.1 and later supports all of the CSS1 and 2 standards. The "font" entity will work in NS6. It will not work in previous versions. Most of the CSS limitations of NS are in versions that are older than 6 (although there seem to be some new problems that aren't fully documented yet, like strange behaviour with any <blockquote> classes translating pixels into percentages, and such).

    Anyway, I was just trying to throw some practical advice into the thread after some rather misleading (either intentional or otherwise) previous posts.

    <soapbox>
    Here's some advice if you want your pages to render correctly - don't use the "font" short-hand as many browsers won't support it, and be sure to always use the full php tag "<?php" rather than the "short tag" ("<?") especially if you're using XML and PHP in the same page.
    </soapbox>

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


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
  •