Support for possible display differences between browsers

For topics about current BETA or future releases, including feature requests.
Post Reply
amir
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 3
Joined: Tue Jun 10, 2008 7:15 pm

Support for possible display differences between browsers

Post by amir » Wed Jun 11, 2008 9:02 am

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.

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3397
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Post by Albert Wiersch » Wed Jun 11, 2008 9:52 am

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]
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 597
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Post by RSteinwand » Wed Jun 11, 2008 9:53 am

This is a css issue, not a validation issue.

Check out this page.

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3397
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Post by Albert Wiersch » Wed Jun 11, 2008 1:34 pm

RSteinwand wrote: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.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 597
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Post by RSteinwand » Wed Jun 11, 2008 1:40 pm

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.

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 704
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Post by MikeGale » Wed Jun 11, 2008 7:39 pm

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?

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 597
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Post by RSteinwand » Thu Jun 12, 2008 7:10 am

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. :?

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 704
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Post by MikeGale » Thu Jun 12, 2008 5:24 pm

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?

Post Reply