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.
Support for possible display differences between browsers
-
- Rank 0 - Newcomer
- Posts: 3
- Joined: Tue Jun 10, 2008 7:15 pm
-
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
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:
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]
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 }
We recommend (and have always done so) that authors check their sites in the popular browsers to find issues like this.[/code]
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
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.
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.
-
- Rank VI - Professional
- Posts: 726
- Joined: Mon Dec 13, 2004 1:50 pm
- Location: Tannhauser Gate
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?
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?
-
- Rank VI - Professional
- Posts: 596
- Joined: Mon Jun 09, 2008 2:12 pm
- Location: Fargo, ND
-
- Rank VI - Professional
- Posts: 726
- Joined: Mon Dec 13, 2004 1:50 pm
- Location: Tannhauser Gate