A css concern read about elsewhere.

@RiannaApr 29.2006

Hello, I read elsewhere where some css might not be compatable with all browsers. Is this really true anymore? If so, which css style is preferred and do you recommend internal or external stylesheets? Thank you very much! Rianna.

to post a comment

CSS

14 Comments(s) _↴

@KeveyApr 29.2006 — #I don't know about the first question...but external is my answer for #2. External is better IMHO because it is cached one time, and all other pages will use it from your cache without having to download all the code every time you load a new page.

@Little_GoatApr 29.2006 — #question one, yes, because people aren't all switching over to new versions of thier browsers and I don't think any browser supports every css property.

LG

@David_HarrisonApr 29.2006 — #Very old browsers don't support styles at all, because they were created before CSS had even been thought up.

Slightly less old browsers, that were created after the first CSS recommendation came out have very buggy CSS support.

So what I do is simply not give them any styles at all. As long as the content gets across, that's all that matters, the layout is secondary.

Check this list of [url=http://centricle.com/ref/css/filters/]CSS filters[/url] (aka hacks) out. Have a look down the left hand column for @import 'styles.css'. Using that to import styles will prevent older browsers that only have patchy CSS support from trying to interpret the styles. In my opinion it's better for those browsers to have no styles than to try and fail to understand the stylesheet.

View the source of [url=http://www.spacedonate.com/]this page[/url] in IE, it's important that you use IE, not Firefox or Opera. You'll see that I first link to a style sheet (which CSS1 browsers understand), then in that stylesheet I import (using single quotes) 4 other style sheets, which CSS1 browsers don't support.

However, IE5.0, 5.5 and 6.0 don't support CSS very well either, IE7 is a bit better, but not exactly perfect. So when you write CSS, test in Firefox and Opera while you write it, then apply any fixes for IE afterwards. IE 5.0, 5.5 and 6.0 all interpret styles differently, so it's important to test in all three.

@Little_GoatApr 29.2006 — #or you can just make your css degrade gracefully.

LG

@David_HarrisonApr 29.2006 — #You can make sure that your CSS degrades well, that is another option, but it means checking what your page looks like in all those old browsers that are used by less than 0.1% of people on the web.

@Little_GoatApr 29.2006 — #or you can just take out css properties one by one... :p

LG

@David_HarrisonApr 29.2006 — #or you can just take out css properties one by one... :p

LG[/QUOTE]And then how would it look in newer browsers? Surely all the rules used would be required and removing them would leave you with a broken layout.

@RiannaauthorApr 29.2006 — #Hmmm, then are you saying that even though you style your page with css, it doesn't mean it changes your html code? Therefore most browsers can read our pages? Because I am having a problem with css page centering commands ....and if I need to center it using css, what good will that do if some browsers don't recognize the commands? Please explain, and thanks for the help as always. Rianna

@Little_GoatApr 29.2006 — #And then how would it look in newer browsers? Surely all the rules used would be required and removing them would leave you with a broken layout.[/QUOTE]
no, I meant take out one rule to see how it looks without, then put it back in.

then you know how browsers that don't support that feature will look.

LG

@David_HarrisonApr 29.2006 — #HTML and CSS are two separate things. Just block all browsers that don't properly understand CSS from getting any CSS, they'll still have the HTML, but nothing will be centred, the content is the main thing that matters.

For newer browsers though, there are a few ways to centre something. If you're trying to centre something that is block level and you have defined a width for it, do this.

#cantreme{
 margin:0 auto;
 }

However, that doesn't work in IE 5, so on the parent element apply text-align:center and on the the thing you want to centre apply text-align:left; to prevent the other rule from being inherited (unless you want it to be). IE5 wrongly centres block level elements that way, but it can be used to our advantage at times.

If you just want to centre some inline content, then applying text-align:center; on the parent element will work on all browsers.

I'm afraid I can't help any more though with any specifics, a link to the example would help.

@RiannaauthorApr 29.2006 — #OK David how does one block browsers that can't read css?

On your last request, if you could take a quick peek at my thread right below this one about centering my web page you'll see the codes I am trying to use on my web pages to center it. Some of my examples look like yours but I am doing something wrong. There, if you could specifically type in the code I should be using that would be a big help. Thanks a bunch. R.

@David_HarrisonApr 29.2006 — #Well like I said, you can prevent pre-CSS2 browsers from seeing the styles by importing, and then block buggy CSS2 browsers by using single quotes around the style sheet location.Check this list of [url=http://centricle.com/ref/css/filters/]CSS filters[/url] (aka hacks) out. Have a look down the left hand column for @import 'styles.css'. Using that to import styles will prevent older browsers that only have patchy CSS support from trying to interpret the styles. In my opinion it's better for those browsers to have no styles than to try and fail to understand the stylesheet.

View the source of [url=http://www.spacedonate.com/]this page[/url] in IE, it's important that you use IE, not Firefox or Opera. You'll see that I first link to a style sheet (which CSS1 browsers understand), then in that stylesheet I import (using single quotes) 4 other style sheets, which CSS1 browsers don't support.[/QUOTE]

@RiannaauthorApr 29.2006 — #OK David thanks a lot, you just have to remember your talking to someone who isn't good at this yet so I have no clue what you mean by importing. Regarding the single quotes that is what is around the css anyway, so guess I don't have to worry about that one. You wanted to see an example of my page parameters and it looks like your not going to make it to my other thread so I'll bring it here. Sorry guys, to have this in two spots. This is an example of what someone suggests I do for my page parameters on the other thread, but it didn't work for centering in the browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<meta name="robots" content="index,follow">

<meta name="description"

content="">

<title></title>

<style type="text/css">

* {

margin:0;

padding:0;

}

body {

background-color:white;

}

</style>

</head>

<body>

Should I be putting the last style tag at the bottom of my web page so it applies your css parameters to my whole page?

Thanks.

@David_HarrisonApr 29.2006 — #Well I did see your other thread, but Bon Rouge seemed to be walking you through it so I left it. From what I've seen he's good so he should help you out with the centering problem.

By importing, I meant this:@import 'styles.css';It's the @import command, so it's just called importing.

As far as whether CSS should be internal or external. It depends on the situation.

While you're making the site, then you may find it easier to work with internal styles, because it's just all one file to work with, it really depends on personal preference. When posting code on the forums 99% of the time people will show the CSS being used internally, because it's just easier that way.

Once you put the site on the web though, always use external styles. There are a few reasons for that, the main one is that the styles can be cached once they've been downloaded, so they don't have to be downloaded on every page. It also means that one alteration to the CSS file and changes can be made over the whole site instantly, rather than going through and editing every file individually. Finally, it means you can import the styles, which hides the styles from older browsers that don't properly understand CSS.

Also in #CSS _↴

How to control text alignment within input?[SOLVED] fixed-width layers XHTML strict gives 1 problem.

Success!

Help @Rianna spread the word by sharing this article on Twitter...

Tweet This

A css concern read about elsewhere.

14 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

A css concern read about elsewhere.

14 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #CSS _↴