Occasionally I find my self banging my head on the desk trying to make sure what seems to be a simple presentational element, looks identical in all web browsers.

In most cases, the key piece of information that forget to run through my head is:

Different browsers have different default styles

Although you may have a simple list (<ul>) with list items, you can't expect all browsers to present it in the same fasion. Some browsers will default to having a small left margin, some to left padding. Others will give more line-height or padding/margin between the listing elements.

This is only one example.

So, although it may flood your CSS file with what seems like an overabundance of style rules, it can be necessary if you are looking for that look of consistency across the browsers.

Personally, I'd let the line-heights and margin differences slide, in the hopes that users who are loyal to a specific web browser are well aware of, and expect certain presentational differences.

But, if presentation is your game, stop banging your head, and try explicitly setting some of these styles to see if it helps:

  • line-height
  • margin
  • padding

Leave a Reply

Your email address will not be published. Required fields are marked *