styling via HTML 4 attributes is not the same across browsers

Question

Why is it that my CSS is not applied the same in all browsers? For example, for the below code:

<body align="center"  background="F:\photos\sravan\wi7.jpg">

I can see my text which is aligned center and with background in Chrome, but not the same in Mozilla! Why is this happening?

That is not CSS...but is it really necessary to downvote this into oblivion because the OP doesn't have his terminology right? — Pekka, Oct 23 '12 at 09:21
@Pekka It's not down-voted for some case of misused terminology, but rather for obviously not even trying to find an answer via a search engine. — feeela, Oct 23 '12 at 09:22
@feeela I usually come down really, really hard on lazy non-googlers, but this is a case where it's hard to come up with a good search query. Especially for a non-native speaker. — Pekka, Oct 23 '12 at 09:24
@feela: no. OP is aparently just starting out in HTML. Believe me beginners don't know what to search for because they don't know what it is. Would you know how to search for a *car* if you didn't know it existed? You wouldn't even know the word *car* — Robert Koritnik, Oct 23 '12 at 09:25
@Pekka I'm not a native English speaker too and searching for 'body background' on Google gives me a W3Schools page as second result item. That page in turn bears a message marked in red: "The background attribute is not supported in HTML5. Use CSS instead." — feeela, Oct 23 '12 at 09:27
@feeela true, but *that's not the core of the problem.* It has to do with accessing image resources through the `file://` protocol which is limited in modern browsers for security reasons. (Educating the OP about CSS is a good thing, too, of course.) — Pekka, Oct 23 '12 at 09:27

score 3 · Answer 1 · edited Mar 20 '17 at 10:18

3

Browsers restrict access to file:// resources for security reasons. AFAIK, you can specify image locations in the same directory only, i.e. your HTML file would also have to be in f:/photos and referenced using a relative path, ie. sravan/wi7.jpg.

Also, as pointed out in the comments, the notation you are using is not CSS. Specifying visual properties using HTML attributes is an outdated technique and it's better to switch to actual CSS. Learn about its basics e.g. here or on one of the sites recommended by Robert.

edited Mar 20 '17 at 10:18

Community

1
1

answered Oct 23 '12 at 09:20

Pekka

442,112
142
972
1,088

And then, the reference URL should be given without a path, at least not with an absolute one ... – MartinStettner Oct 23 '12 at 09:24

Robert Koritnik · Accepted Answer · 2012-10-23T09:42:32.873

Your code is not CSS

Instead you should have HTML and CSS as in:

<body>
    content
    ...
</body>

and body CSS

body {
   background-image: url(URL to your image and not local path);
   text-align: center;
}

Learn the languages

No offence but I warmly suggest you learn HTML and CSS before delving into writing any reasonable code.

HTML Specification

As per W3C specification body element doesn't support align attribute and background is deprecated in 4.01 and not supported in HTML5. So don't use it as an attribute. Define style using CSS:

in separate CSS file that you reference in HTML
add style element inside head HTML element

(not recommended) add style inline with your element:

<body style="text-align: center; background-image: url(wi7.jpg);">

Because of the way that CSS works having many inline styles makes your application hard to maintain and also intrduces new CSS hacks that you have to use in order for your page to render as expected. Separation of concerns rules. HTML file is your content definition, CSS file is its style. Keep them separate whenever possible.

General advice

Since browsers try to follow specification there may be differences between their rendering of HTML+CSS. Some may be very strict about it others a bit more loose. Try to stay within specification and you should get better cross-browser results.

@Pekka: Agree but OP aparently has bigger issues at the moment than security and cross-browser compatibility. Even though I did upvote your answer because it's more concise with the question. — Robert Koritnik, Oct 23 '12 at 09:36
absolutely, +1 for good learning advice. (I cringe at the sight of w3schools (see [this site](http://w3fools.com) why) but I think for HTML and CSS, they are still one of the most complete resources around.) — Pekka, Oct 23 '12 at 09:37

styling via HTML 4 attributes is not the same across browsers

2 Answers2

Your code is not CSS

Learn the languages

HTML Specification

General advice