Support for possible display differences between browsers

[amir]

This is a very disturbing issue for me, doing web development and an automated check would go a long way in helping.

For example, the <ul> attribute has different margin and padding settings for IE and Firefox.

When the CSS doesn't modify anything, it's going to look Ok on any browser, as it has its own coherent defaults.

However, if I just set the margin, but don't set the padding, I'm going to get very different look between IE and Firefox.

What would be useful is to check the elements that have different default values are either:
- Left with the default
- All changed

For this case, if I just change the font color or text size, it's going to be OK. Changing only one of the padding / margin is going to cause a problem.

The <ul> tag is just one example. Others popular tags are <ol> and <p>, but there's others too.

[Albert Wiersch]

That sounds like an interesting problem, but addressing that correctly in CSE HTML Validator sounds like it would be difficult. Browsers are changing the way they handle things all the time (especially IE which I've read will soon default to standards mode in the next major release) and there are so many intricacies. If there are any simple tests you would like done, then please let me know exactly what and I can consider adding it, but overall this does not seem like a simple issue to address.

For example, a simple test that I can think of that might be useful is when there is CSS like this:

Code: Select all

ul { margin: .5em }

Then perhaps it would be useful to generate a message saying that the margin property has been set but not the padding and recommending both to be set? Would something like this be helpful?

We recommend (and have always done so) that authors check their sites in the popular browsers to find issues like this.[/code]

[RSteinwand]

This is a css issue, not a validation issue.

Check out this page.

[Albert Wiersch]

This is a css issue, not a validation issue.

Check out this page.

Interesting article - A Killer Collection of Global CSS Reset Styles. I actually had not heard of "CSS reset" styles before.

So basically, if you use these (at least the ones that set all the margin and padding properties to 0), then you have to set them to what you want yourself instead of relying on the browser's default.

If I have time, I might try to use something like this on CSE HTML Validator's site, but unfortunately it's not something you can simply throw in at the top of an existing style sheet.

[RSteinwand]

This is what I use:

html{height:100.2%}/* sets right scroll bar to always on */
body{margin:0;padding:0;text-align:left;font-size:76%}
/* IE7 only */
*:first-child+html textarea,*:first-child+html button,*:first-child+html input,*:first-child+html select{font-size:110%}
/* IE6 and below */
* html textarea,* html select{font-size:110%}
* html input,* html button{font-size:100%}
body *{font-size:1em}
textarea{font-size:1.3em}
button,input,select{font-size:1.1em}
input{padding-left:3px}

Seems pretty good in IE5+, FF, etc.

[MikeGale]

Interesting discussion. It might be worth putting a reference to this material into the CSE documentation. In that case a note on the pitfalls of doing it would be valuable.

At it's simplest this might say, "if you bolt this onto an existing css, you're likely to have problems. Best to redesign your css from scratch with resets.".

Does anyone have "war stories" of issues they've encountered when adding resets?

[RSteinwand]

Well, if you already have font sizes specified in your style sheet and implement the font size tweaks I posted above, you'll probably have to adjust most of your sizes again.

[MikeGale]

The style of measurement for CSS is a philosophical choice.

% sizing is not compatible with pixels or points.

I see your choice of design uses a mix of % sizing and em sizing. Why do you mix the two approaches?