Cascading Style Sheets

Baz_

I have a webpage, whose style is being absolutely controlled by a cascading stylesheet, the thing is that the only browser this works with properly is Internet Explorer.

Now Im using the w3c standards to the letter so its not a problem of propietary code. Im just wondering what support other browsers claim they have, I know opera claim to be the most standards compliant browser and yet it doesnt work in opera correctly (links work but cell styles dont seem to).

This is annoying but if its a factor that most browsers wont be supporting until the next generation, then I can wait with no problem, but if these browsers claim to have full support already then its fecking annoying to the max.

Does anyone know if either of them are the case??

Pablo

link ?

Meh

Originally posted by Baz_
I know opera claim to be the most standards compliant browser...

Opera 5 is pretty good on standards, but no browser is perfect. This page lists all the CSS1 standards and the browsers that support them. (CSS2 page). It takes a while to load, but it's worth it. Have you checked your pages in the w3c CSS validator?

b20uvkft6m5xwg

In my experience the main compatiblity issues across the browsers when using CSS has been...

**IE ScrollBars

**Hyperlinks effects

**Table Backgrounds & borders

**Margins (In netscape)

The first 2 downgrade well, the tables issue can be resolved by embedding tables, and the margins prob can be circumvented using "Div Layer"

What exactly are you trying to do, because outside of the above I cant see too many probs !?

mneylon

Style sheet support can be a real nightmare. However there are a couple of tools that can make it a little bit easier:
Have a look at TopStyle
It isn't free, but none of the good things in life are
Unlike a lot of WYSIWYG editors it does check compatability with ALL the major browsers, including some of the Linux ones, and offers alternatives and solutions.

b20uvkft6m5xwg

Yep i can vouch for TopStyle alright

It has a very good preview window and also there is an option to set your expected browser compatability-

I have the trial version- but it still works- perfectly except for a pop-up reminder to register.

mneylon

Definitely one of my favourite tools when I want to tinker with CSS. The new browser profiles they've added, along with the different levels of interface really set it apart from a lot of other tools. Nice price too.

b20uvkft6m5xwg

Yep it made it into my "exclusive" Design tools of choice on this thread...
http://www.boards.ie/vbulletin/showthread.php?s=&threadid=43556&pagenumber=1

Damian Sweet Paper wrote:
In no particular order...

**Notepad / Editpad
**Dreamweaver v.4
**Xara X v.2
**Flash v.5
**Paintshop Pro v.7
**Top Style CSS Editor v.2

sisob

AFAIK if you stick to CSS1 you will not have any compatibility problems - check out http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html for a great example.

mneylon

Sticking to CSS1 has some advantages, but is a bit limited. Maybe a browser sniffer could help work around this a bit.

By the way, where's the URL??????

Baz_

http://www.programmingtutorials.org/test/newpage.html -that is the page, in IE it works the way I want it, the top cell (black one) has a div and layer inside it for a test with the same class as the cell and it still doesnt work in the others.

http://www.programmingtutorials.org/test/sitestyle.css.txt -thats the stylesheet, now i know it doesnt pass the validation test but some of the errors are very clearly contradicted in the css2 recommendation (px as a measurement for font size for example), so ill have to check through the whole thing at some point, but at the moment I just want to get the style sheet being executed in other browsers.

Dont mind the design, which can be easily changed when I get the stylesheet to work (main reason to use it).

afdarcy

It's a nightmare trying to get CSS2 to work with NS4.x, but it should be possible to get pages that look reasonably similar on IE5+, Opera, and Gecko-based browsers (like NS6 and mozilla).

Looking at the HTML of your page, I see you've got a xhtml-strict doctype specified. That can cause problems with new browsers if your XHTML doesn't validate, which yours doesn't:

w3c HTML validation result

You can get the newer browsers to go into quirks mode (where they behave like you've become used to) by not specifying a DTD. See http://www.alistapart.com/stories/betterliving/ for more; you'll have to scroll down a bit, but the entire article is recommended if you're going to use XHTML.

I don't understand why your using tables, layers and divs for layout, but maybe I'm missing something.

If you're still worried about NS4, you have many options including browser sniffers, but a nifty one is to use 2 style sheets: one with NS4-(and even IE4-)compatible code linked in the head of your HTML, called say, simplestyle.css; the other with the bells and whistles, let's call it coolstyle.css. Just use @import(coolstyle.css) in simplestyle.css. Older browsers don't understand this, so they end up ignoring code that could make them choke.

HTH

Baz_

ta for all the help lads, was in a rush when I posted me reply and forgot to say thanks.

Right I havent really had a chance to look up all the links yet, Im a bit busy unfortunately, but it now conforms to xhtml strict thanks to the link by afdarcy, but the stylesheets still arent working. If anyone has anymore suggestion, please heap them on but I have yet to go through all of them so theres no rush. I will keep you posted.

thanks again

Baz_

great news - for me anyway,

I validated my css as well (god im tired), and that was one of the main problems, Im now allowed to use the little pictures to say that my code is valid woohoo.

It works nice in mozilla (and I assume netscape because of it), internet explorer (which is evil for being so forgiving) and not so great in opera for some reason, but the style is showing through somewhat.

Well Im chuffed, thanks for all the help, especially the validation links, which I can heartily recommend now.