Search code examples
html4

styling via HTML 4 attributes is not the same across browsers

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?

Solution

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