CSS, Netscape and IE = £$!

[FatPiper]

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!

[Ace Nova]

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.

[FatPiper]

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!

[lynlimz]

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.

[Ace Nova]

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

[hmahonen]

Actually the latest version of Opera is fully compatible with CSS 1 and 2.

[lynlimz]

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...

[Ace Nova]

Certain attributes are supported, some attributes arent even supported, and some dont work properly.

[lynlimz]

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

[FatPiper]

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:

.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.

[lynlimz]

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?

[FatPiper]

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...)

[lynlimz]

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..=)

[Paul 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

[duckie]

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.

[mahmoud]

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

[tubedogg]

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...

[weirdbeardmt]

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!

[WiccaMan]

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.