1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

why does css display differently in different browsers?

Discussion in 'Software Development' started by vidyaishaya, Feb 2, 2005.

Thread Status:
Not open for further replies.
Advertisement
  1. vidyaishaya

    vidyaishaya Thread Starter

    Joined:
    Oct 26, 2001
    Messages:
    84
    How is it that I can setup a CSS file that works great for Internet Explorer, but when displayed in Mozilla, the fonts are the wrong size, and the padding is ignored? Among other things!

    What's going on there? And I assume this is well-known??

    And therefore, there's a work-around, yes?

    Thanks

    ...Vidya Ishaya
     
  2. tdi_veedub

    tdi_veedub

    Joined:
    Jan 29, 2004
    Messages:
    460
    Because just like with everything else Microsoft does, Internet Explorer does not follow standards and alot of their HTML extensions only work with IE.

    Your best bet is to build your site according to the w3 html 4.01 standard, or the xhtml 1.0 standard. That way the site will look identical with any browser.

    Check here for more info:

    http://w3.org/

    and validate your site here:

    http://validator.w3.org/
     
  3. CouchMaster

    CouchMaster

    Joined:
    May 26, 2003
    Messages:
    3,303
    Correct - if you build your site to standard coding it will look the same in any browser (more or less). It's possible that font size and color may be vary slightly but it will basically be the same.
     
  4. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    If while making a page, you only check it in IE and then when it's complete, you check it in other browsers, you are causing yourself a big hassle.

    You should check in as many browsers as you can *while* you are developing the page.

    Just for comparison, only check a page in Firefox and Opera while you are developing it. Then when you are done, check it in IE and see how messed up it is.

    IE's rendering engine is old. It lacks support for a lot of things you find in STANDARD code. IE's css support is horrible and as already said, IE can make use of a lot of non-standard code. As expected, other browsers do not handle IE-specific code well and they shouldn't have to. You should use standard code and check it at http://validator.w3.org . When you validate your page, you can also validate the css (link on page). There's IE-only css too so keep that in mind and use standard css.

    Now even if you are using standard code etc., things might not always look the same across standard-compliant browsers (IE is not one of them). The reason for this is simple. The html and css specifications are not exact on everything. In the specifications, you'll see things LIKE "The user agent is free to *guess* the position that the element should be at." or "There is no exact behavior defined. The user agent is free to handle the situation in any way that does not violate the spec.".

    Because different developers have different methods and opinions of handling those non-exact situations, you can see differences with the same code.

    Also, it is sometimes the case where developers will ignore a w3 spec if it doesn't really make sense. Mozilla and Opera both do that sometimes. So even if you create standard code, you still have to check the page in multiple browsers.

    As a suggestion, in addition to checking with Mozilla and IE, check your pages in Opera. (Both Opera 7.54 and Opera beta 1)

    If you have the luxury, check your pages in a khtml browser like Safari (on mac).

    Also, if you are not using the proper doctype, you can put the browser in quirks mode, which can make things display differently.

    Each browser while in quirks mode is going to handle code a lot differently than each of them in standards mode.

    What doctype are you using?
    Is your code and css valid?

    On a side note, IE and Firefox by default, put a 8px margin on the body and 0px padding. Opera does the opposite.

    To be consistent use,

    body {
    margin: 0px;
    padding: 8px;
    }

    or

    body {
    margin: 0px;
    margin: 0px;
    }

    There are lots of hacks to get things working in IE, but you have to get them working and looking right in other browsers first.

    Altough IE is the most used, at its current state, it should be last on your list. Unfortunately that's not always easy as people still insist on using old software like IE. If people complain that the page doesn't work in IE, tell them nicely that you don't support non-standards-compliant browsers. ;)

    On the other hand, business-wise you're going to have to satisfy those IE customers or theoretically lose $$$.

    Anyways, show us a test case that illustrates your problem. Then we'll see if it can be made to work across browsers. Although a link to an existing page will do, a simple test case would yield faster results.
     
  5. coderwannabe

    coderwannabe

    Joined:
    Feb 21, 2005
    Messages:
    1
    I find that it helps to use dreamweaver mx to do my style sheets in. I used to use dw4 and would get more compatibility problems.
     
  6. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - does display differently
  1. muckmail
    Replies:
    16
    Views:
    489
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/326090

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice