ansaurus

Question

Cross-Browser display

Answer 1

+2 A:

I suggest using a reset stylesheet.

A reset stylesheet will reduce browser inconsistencies like default line heights, margins and font sizes of headings.

You may also want to check the following articles for further reading:

Daniel Vassallo 2010-02-14 10:39:00

Could you be more specific.

Jean 2010-02-14 10:45:49

@Jean: Check the new links in the answer for further info.

Daniel Vassallo 2010-02-14 10:54:41

I can tell it's quite common to use a reset stylesheet, from those links (nice job on the links btw.)I still think w3c validation shouldn't be ignored though :-)

Steffen 2010-02-14 11:24:36

@Steffen: You'll find as many articles against as well :) (One case in point: http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/)... I agree about validation as well.

Daniel Vassallo 2010-02-14 11:27:17

@Daniel: Thanks for the link, interesting reading as well :-)

Steffen 2010-02-14 11:30:48

Answer 2

A:

Start by ensuring you're running a proper doctype, and check whether the site validates at http://validator.w3.org/

A proper doctype would be xhtml transitional or html 4 strict (html 4 transitional usually makes IE do things differently)

As for reset stylesheets - yes they can be useful, however I try to avoid them, since you're pushing more kbs to your users (longer load times, especially if your webhotel isn't zipping css), and furthermore you're slowing down the browsers rendering, because there are more css rules it has to process.

Finally it just seems hackish to me - I mean you can make it look right without resorting to resetting all sorts of stuff, so why do it ?

Steffen 2010-02-14 10:41:35

I didn't get you

Jean 2010-02-14 10:45:18

@Steffen: I tend to disagree with your arguments against the reset stylesheets. RE: Pushing more kbs: These tend to be very small. Add gzip compression and the fact that these are cached in the browser, and this becomes negligible... RE: slowing down browser rendering: I believe this is also negligible, unless maybe for mobile devices... RE: hackish: I agree with that feeling, however any present technique to fix cross-browser incompatibilities could easily fall under the hackish category.

Daniel Vassallo 2010-02-14 10:50:23

@Daniel: I agree all my points are somewhat minor, however I still feel the "sum" of them is worth thinking about. As for gzip compression, it's rarely enabled if you're not hosting the site yourself, which many people aren't.I really haven't had any large problems fixing cross-browser incompatibilities just with "normal" CSS.Therefore I think you should try getting it right before resorting to reset stylesheets, since the reason it fails may as well be your CSS is just plain wrong.Eventually you may need the reset stylesheet, yes, but it'll always be my last resort.

Steffen 2010-02-14 10:56:11

@Jean: Try going to the link I wrote, and enter the url of your site - it'll tell your whether the site validates.If it's not valid, it'll tell you what's wrong, and once these issues are fixed, it's very likely your cross-browser problems are gone as well.W3C Validating a site is always my first step towards cross-browser compatibility.as for the doctype, check this link: http://en.wikipedia.org/wiki/Doctype

Steffen 2010-02-14 10:57:43

Answer 3

+1 A:

ensure you have this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

this will change the ie behaiviour boxing model in ie<=7
ensure that the first rule of all its:

body *{
    padding:0;
    margin:0;
}

(maybe not a good idea to append this after you already write all the css, instead that you could use a more specific rute that aims the place)

useless 2010-02-14 11:43:34

Answer 4

A:

You did not say how the placement varies. I made a quick test with IE8 and Opera and there were some difference in vertical placement. I fixed that by adding the top property (and removed the 2nd margin-top). For example:

   margin-top: 1em;
   top: 55px;

But generally, it is not good idea to try and force a specific look. Web page is not printed media. The users have different preferences, different display devices and they do not all have the same fonts etc. installed.

PauliL 2010-02-14 13:00:46

Answer 5

A:

Although what other people have suggested are all good advice, as a direct answer to your question, use "padding-top" instead of "margin-top" and ensure your divs have a height set. That should get you quite close, or all the way there.

Tom 2010-02-15 02:57:52

ansaurus

tags:

views:

answers:

Cross-Browser display

related questions