SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    Nov 2000
    Location
    London, UK
    Posts
    223
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS + NS = BIG MESS

    Hi all,

    I just made a template for my hopefully soon to come webmaster/open source developer resource website, and I came upon a big problem.

    I did all of it using Dreamweaver, and all formatting was done through CSS (except for table sizes and stuff).

    Viewed in IE, it looks more or less the way I intended. But with Netscape (v6 preview 2 .. i'm lazy to upgrade), it comes out horrid. And Opera is the same thing.

    Check out the page here:

    http://www.dannycook.com/template/promote.html

    There's nothing else on that website yet, but hopefully there will be soon.

    Thanks a lot!

    ... what's the world coming to?

  2. #2
    SitePoint Zealot Ace Nova's Avatar
    Join Date
    Aug 2000
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the real problem is you used css for absolutely everything. CSS should be used a secondary means of formatting pages because it is not fully compatible with any browser. Use <font> tags, even if they can become a pain in the butt. They are viewable by all browsers. Use only a little CSS to jazz up your site.
    Ace Nova
    Football Man
    InternetSprite.Com - Coming Soon!

  3. #3
    SitePoint Addict
    Join Date
    Nov 2000
    Location
    London, UK
    Posts
    223
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tx a lot Ace. The reason I used CSS is because last time I visited w3c.org, I read that <font> tags and stuff were deprecated, and should be replaced by CSS. maybe i was wrong tho' ...

    Ok thanks!

    ... what's the world coming to?

  4. #4
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well Ace Nova, thats where i disagree.
    FatPiper has made the right decision to use style sheets. Only with style sheets can it be fully compatible with other browsers.

    Netscape 6 supports style sheets too...very well in fact.

    FatPiper, however, your stle sheet is in total mess.
    Thats why netscape has problems displaying it.

    Why are there <style> tags in there?
    also, its possible to trim the style sheet by half the filesize.

    i advise you not to use .tagname { }
    if its for a table tag, use something like table.tagname {}

    so if all your tables has this : font-family: Verdana,Arial,Tahoma;
    you can do this:

    add
    table { font-family: Verdana,Arial,Tahoma; }
    you can then not put these tags in the rest of your table tags.


    if i were to take an example from your style sheet, this would be something like this.

    Your Code:
    a:hover { font-family: Arial, Helvetica, Tahoma; font-size: small; font-style: normal; font-weight: bold; color: #0000CC; text-decoration: underline}
    a:link { font-family: Arial, Helvetica, Tahoma; font-size: small; font-style: normal; font-weight: bold; color: #000000; text-decoration: underline; cursor: hand}
    a:visited { font-family: Arial, Helvetica, Tahoma; font-size: small; font-style: normal; font-weight: bold; color: #000000; text-decoration: underline}
    a:active { font-family: Arial, Helvetica, Tahoma; font-size: small; font-style: normal; font-weight: bold; color: #0000FF; text-decoration: underline}

    My Code:
    a { font-family: Arial, Helvetica, Tahoma; text-decoration: underline; font-size: small; font-weight: bold; }
    a:hover { color: #0000CC; }
    a:link { color: #000000; }
    a:visited { color: #000000; }
    a:active { color: #0000FF; }



    Notice the difference? You dun need to add the cursor: hand as any link will have that cursor. i also recommend that you specify the font sizes in pt. like 10 pt or something.

    Optimise your style sheet. If you need any help, juz make a reply and I'll see what I can do.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  5. #5
    SitePoint Zealot Ace Nova's Avatar
    Join Date
    Aug 2000
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS is not fully compatible with every browser. Allthough some commands do work.

    IE 5.5 - Not Fully Compatible with every CSS1 command
    NS 6.0 - ""
    Opera - ""

    See a pattern?

    Browser manufacturers were slow to implement CSS
    Ace Nova
    Football Man
    InternetSprite.Com - Coming Soon!

  6. #6
    Gong!
    Join Date
    May 2000
    Location
    Helsinki, Finland
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually the latest version of Opera is fully compatible with CSS 1 and 2.

  7. #7
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Ace Nova
    Are you sure?
    If I'm correct, Netscape 6 and IE5/5.5 Supports CSS1
    They even have some support for CSS2

    Its surprising i could get them to work in those browsers?
    Hmm...
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  8. #8
    SitePoint Zealot Ace Nova's Avatar
    Join Date
    Aug 2000
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Certain attributes are supported, some attributes arent even supported, and some dont work properly.
    Ace Nova
    Football Man
    InternetSprite.Com - Coming Soon!

  9. #9
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Could you give us some examples?
    If its Netscape 4.0 you're talking about, then its alright.

    If you use complex style sheets, set one for netscape 4, and another for ie4/5.5 and netscpae 6
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  10. #10
    SitePoint Addict
    Join Date
    Nov 2000
    Location
    London, UK
    Posts
    223
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lynlimz tx so so so much for you help, i'm fixing it now don't check cause not uloaded yet. however, i'm wondering what to do about my other tags:
    Code:
    .menu_link {  font-family: Arial, Helvetica, Tahoma; font-size: small; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; color: #000000; text-decoration: none; text-align: center; cursor: hand; filter: DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1)}
    .subdomains {  font-family: Arial, Helvetica, Tahoma; font-size: xx-small; font-style: normal; line-height: normal; font-weight: normal; color: #FFFFFF; text-decoration: none; text-align: left}
    .sub_logo {  font-family: Arial, Helvetica, Tahoma; font-size: 5pt; font-style: normal; font-weight: nbrmal; font-variant: normal; color: #CCCCCC; text-decoration: none}
    .menu_desc {  font-family: Arial, Helvetica, Tahoma; font-size: xx-small; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none; text-align: center; background-color: #FFFFFF; background-repeat: repeat}
    .cookiecrumb {  font-family: Arial, Helvetica, Tahoma; font-size: small; font-style: italic; font-weight: bold; color: #000000; text-decoration: underline}
    .menu_title {  font-family: Arial, Helvetica, Tahoma; font-size: 10 pt; font-weight: bold; color: #FFFFFF; background-color: #000000}
    .le_gal {  font-family: Arial, Helvetica, Tahoma; font-size: xx-small; font-style: normal; font-weight: normal; color: #999999; text-decoration: none}
    .content {  font-family: Arial, Helvetica, Tahoma; font-size: 9pt; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none; text-align: left; text-indent: 20pt; margin-left: 5px}
    .menulink {  font-family: Arial, Helvetica, Tahoma; font-size: 8pt; font-style: normal; color: #660000; text-decoration: underline; background-color: #CCCCCC; background-repeat: repeat-x; text-align: center; font-weight: bolder}
    .navtable {  font-family: Arial, Helvetica, Tahoma; text-align: center; border-color: #660000 black black #660000; border-style: solid; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin}
    i got the table thing for the menu items, but what about the .cookiecrumb and stuff.

    Thanks a lot for all you help.

    ... what's the world coming to?

  11. #11
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the .XXX stuffs?
    Well...if for example you use .subdomains
    and its within a <div> tag or something, you could change it to div.subdomains

    its the same. but then you can have a general div tag.


    see..why don't you re-upload the filkes and let me take a look?

    when i tried finding class="subdomains", it yeilded no results...
    are those even in use?
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  12. #12
    SitePoint Addict
    Join Date
    Nov 2000
    Location
    London, UK
    Posts
    223
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I'll upload in school now but I'll do it in a few hours (in about 8), when I get home. In the mean time though, I did what you said, but when I don't make all the fonts like 6pts for the left nav bar descriptions, they look enormous. Should I just get rid of a bunch of the text or leave it big or make it small?

    Tx A lot to all who responded

    BTW: Sorry for all the questions but its my first site (although I've been reading tutorials for the last two years...)

    ... what's the world coming to?

  13. #13
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup....
    I'll check again...
    HMM...if you want your fonts to be 6pt, then specify:
    font-size: 6pt;

    yup..got it? i don't know if i got your question..right..=)
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  14. #14
    Happy Holidays !! Paul S's Avatar
    Join Date
    Mar 2001
    Location
    Mexico
    Posts
    1,287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fat piper,

    A small advice, instead .menu_link write .menulink
    Some browsers ignore class names with underscores.
    (Rigth now I don't remember but I believe Opera does this)

    Paul
    Last edited by Paul S; Aug 8, 2001 at 03:31.

  15. #15
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE5/5.5 did not implement the CSS box model correctly. I know Mozilla does, and I'm sure Opera does too.

    So yeah, there you have it, IE5/5.5 does not fully implement CSS1, or at least does not do it correctly.

  16. #16
    SitePoint Enthusiast mahmoud's Avatar
    Join Date
    May 2001
    Location
    Egypt
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, CSS was made to be used for everything and not as a second way.
    CSS is the right choice, sooner and later you will be forced to use it

    Using it as a secondary way will only increase the size of pages..

    font, center, ...etc tags are no longer valid with W3C.. (xHTML Strict)
    align=, width= ..etc are also no longer valid with W3C.. (xHTML Strict)

    and alot more will be removed ..

    IE 5.5 supports CSS, however only few things missing but IE 6.0 Fully support it.

    NS and Opera now supports CSS correctly

    I think writing something like this will save some font problems :
    th, td, div, p, blockquote, form, ol {
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    I also do not advice usings sizes-names : xx-small,..etc because some browsers are not viewing it correctly. Using the pt sizes or the percentage is much better.

    I do not see any difference between the view of IE 6 and Opera 5 except the Input color .. in your homepage
    Mahmoud

  17. #17
    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 hmahonen
    Actually the latest version of Opera is fully compatible with CSS 1 and 2.
    Unfortunately that means nothing...unless you meant "fully supports". In which case you'd be wrong.

    Opera 5 supports all of CSS2 with the exception of:

    Opera 5 is a visual browser and does not support Aural CSS
    these properties: clip, cursor, direction, font-size-adjust, font-stretch, marker-offset, marks, text-shadow, unicode-bidi, and all outline properties
    the system values on the font property as well as system colors (before 5.10/Windows and all non-Windows platforms)
    the values added to list-style-type in CSS2
    these property/value combination: 'display: marker', 'text-align: <string>', 'visibility: collapse', 'content: <url>', 'overflow: scroll', 'overflow:auto'
    named pages (as described in section 13.3.2)
    the '@font-face' construct
    All CSS2 selectors are supported with the exception of:

    :first-child, :focus, :lang
    combinations with pseudo-classes before other selectors
    It also lacks basic HTML4.01 support, such as for HTML4.01 tables (currently only supports HTML3.2 tables), support for basic <object> tag attributes, <a> attributes coords and shape, and a few other key elements.

    I know this turned into a "bash Opera" post but everyone says it's so great...I'd prefer less than perfect CSS2 support if it meant HTML4.01 was fully supported...
    Kevin

  18. #18
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Code:
    a { font-family: Arial, Helvetica, Tahoma; text-decoration: underline; font-size: small; font-weight: bold; }
    a:hover { color: #0000CC; }
    a:link { color: #000000; }
    a:visited { color: #000000; }
    a:active { color: #0000FF; }
    Well i just learnt something!
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  19. #19
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lynlimz
    i also recommend that you specify the font sizes in pt. like 10 pt or something.
    Fatpiper, can I suggest that rather than specify your font-size in an absolute point size, use percentages. This still allows the end user to alter the size of the text as they see fit from their browser control. Absolute sizes will remain fixed regardless.
    signature


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
  •