Garland Acessibility: Text not resizable in IE7 [#101629]

The problem is the Garland theme stylesheet (style.css) uses fixed size for the body (as well as input, textarea and select) text. Which prevents ALL text based on that/these CSS definition(s) (using percentage or whatnot) to be resized in Internet Explorer. It's always been like that. Some say it's not a bug with Internet Explorer. (The reason why Firefox is able to resize text that is fixed is a feature of Firefox.) It can either be fixed at the source by the Drupal developers or fixed by the Drupal user if he knows CSS a bit.

The following in Garland style.css :

body {
margin: 0;
padding: 0;
background: #f5fafa;
font: 12px/170% Verdana;
color: #292929;
}

input {
font: 12px/100% "Verdana";
color: #292929;
}

textarea, select {
font: 12px/160% "Verdana";
color: #292929;
}

shall be changed to that :

body {
margin: 0;
padding: 0;
background: #f5fafa;
font: small/170% Verdana;
color: #292929;
}

input {
font: small/100% "Verdana";
color: #292929;
}

textarea, select {
font: small/160% "Verdana";
color: #292929;
}

The only difference here is that the small keyword is used instead of 12px will allow for user resizing in Internet Explorer 6 and 7.

12px is equivalent to small, so the change won't affect the layout for "medium size text" (default size) in the browser.

I tested it with above change and resizing works very well now in Internet Explorer.

Should I file a feature request instead of submitting a bug as I am doing now ?

Comment	File	Size	Author
#13	resizable_text_3.patch	1.77 KB	alpritt
#12	resizable_text.patch	1.27 KB	alpritt
#11	garland-resizeable.patch	1.62 KB	henrrrik
#9	ie7_resize_text.patch	538 bytes	dvessel
#7	garland_resizable.patch	743 bytes	ChrisKennedy

Comments

Comment #1

Chill35 commented 6 December 2006 at 06:45

What I mean by this is that if you are in the browser's menu and try to make text larger or smaller it won't have any effect in Internet Explorer 6 or 7.

Comment #2

ChrisKennedy commented 6 December 2006 at 08:35

Since it is a legitimate accessibility issue I think classifying it as a bug makes sense.

If possible a true patch file would be helpful (see http://drupal.org/diffandpatch).

Comment #3

chx commented 6 December 2006 at 11:55

"12px is equivalent to small" give me proof. Links to standards. Or at least articles.

Comment #4

Chill35 commented 6 December 2006 at 22:01

chx, why is it so important that it shall be exactly 12px ?

Text is resizable in browsers, and in certain browsers users can decide what is "medium" size for them, and play around that normal default value (such as in Firefox, in which the default 16px "medium" can be changed in Options | Content)... so it does not mean much to say that "small" should be picked. It is a question of look, and small looks exactly the same as 12 px, in Firefox and IE, in Windows, should I give screenshots ?

Bottom line, it is up to the designers of the Garland theme to decide that, by looking at their theme in different browsers. They should decide how to fix that problem, not me.

If "you" (editorial you) believe that it does not matter if the shipping Drupal 5 theme is resizable or not in Internet Explorer, that's fine with me. I am lucky because I know CSS well so I can make the appropriate changes in style.css to make the text resizable by the user. Some people have high resolution screens so the size of even 16px ! (let alone 12px) is tiny, and IE will not let them resize the text for them, as it is now.

It is not a bug with IE, since if the designer wanted the text to be fixed, as it is unfortunately in Garland now, it should be fixed, with all inconveniences! It is a feature of Firefox to resize what is fixed.

Accessibility means designers use "em" or percentage or keywords for text size. Not pixels or points.

One does not need to use a keyword...

I have CSS, The Missing Manual here (O'Reilly) and it says : Every browser has a pre-programmed base text size, which in most browsers is 16 pixels. You can adjust this base size in your browser through the browser's Options (or Preferences) or via the View menu (see Section 6.2.2).

Keywords do not offer pixel-precision, as em and % do.

If we want exactly 12pixels, and given that the browser will use 16px as medium (which is not really a given), we can use 75% instead of small.

If 16px -> 100%
then 12px -> 75%

I tried that and it gives me the same visual result as if I had used small.

What do you think ?

body {
  margin: 0;
  padding: 0;
  background: #f5fafa;
  font: 75%/170% Verdana;
  color: #292929;
}

input {
  font: 1em/100% "Verdana";
  color: #292929;
}

textarea, select {
  font: 1em/160% "Verdana";
  color: #292929;
}

Caroline

Comment #5

Roi Danton commented 3 January 2007 at 16:01

This version with percent and em is better. But well, changes aren't still in Garland theme css.

Comment #6

Chill35 commented 3 January 2007 at 16:06

Actually my proposition using em and % does not work. It reflected on my lack of understanding of inheritance. I'll fix that later, if I feel like it. (I am using the keyword small in my own .css).

Comment #7

ChrisKennedy commented 2 September 2007 at 01:30

Title:	Acessibility issue : With Garland theme, text is not resizable in Internet Explorer 6 or 7	» Acessibility: Garland text not resizable in IE6 or IE7
Version:	5.x-dev	» 6.x-dev
Priority:	Minor	» Normal
Status:	Active	» Needs review

Status	File	Size
new	garland_resizable.patch	743 bytes

I happened to notice this again yesterday - Garland text is not resizable in IE7. Attached patch fixes the issue by changing the font size from 12px to 9pt, which seems to be equivalent.

Comment #8

dvessel commented 3 September 2007 at 19:35

Title:

Acessibility: Garland text not resizable in IE6 or IE7

» Acessibility: Garland text not resizable in IE7

This is what Garland uses for IE6 using conditional includes.

body {
  /* Center layout */
  text-align: center;
  /* Allow text resizing */
  font-size: 80%;
}

Maybe try the same approach for 7? I haven't head complaints from IE6 users. ;-)

Either a CSS selector workaround can be used or Garland or we can start adding with IE7 styles.

Here would be the work around for IE 7.

*:first-child+html body {
  /* Allow text resizing */
  font-size: 80%;
}

http://www.webdevout.net/css-hacks#in_css-selectors

Comment #9

dvessel commented 3 September 2007 at 19:39

Status	File	Size
new	ie7_resize_text.patch	538 bytes

And a patch. Untested, I'm assuming text sizes are handled the same way in IE6 & 7.

Comment #10

catch

he/him

English

commented 31 October 2007 at 10:48

This is still valid and the patch fixes it. I'm not convinced about the targeting method but not familiar with how strict core is about css hacks (and prefer the underscore one to the * hacks for readability) so leaving at review.

Comment #11

henrrrik commented 18 November 2007 at 13:14

Status	File	Size
new	garland-resizeable.patch	1.62 KB

It's normally best to avoid using CSS hacks since they they usually depend on bugs that might get fixed or cause problems with future browsers.
For targetting different versions of Internet Explorer, conditional comments is the preferred way.
Example:

<!--[if IE 7]>
    <style type="text/css" media="screen">@import "/some/path/fix-ie7.css";</style>
<![endif]-->

However, I believe all that needs to be done to fix this is by making these changes to "style.css":

body {
  font: 75%/170% Verdana;
}

input {
  font: 1.0em/100% "Verdana";
}

textarea, select {
  font: 1.0em/160% "Verdana";
}

And adding this to "fix-ie.css":

input {
  font: .9em/100% "Verdana";
}

textarea, select {
  font: .9em/160% "Verdana";
}

This addition wouldn't be needed if "font-size:80%" was removed from the body, but then all text would be slightly smaller than before in IE6.

It would be VERY nice to have this resolved. I'm going through a CMS test suite for public sector procurement in Sweden and this is actually one of the bullet points. Many sites will be using a custom template, but "out-of-the-box" accessibility is VERY important and this is such a trivial thing to fix.

Comment #12

alpritt commented 18 November 2007 at 18:01

Status	File	Size
new	resizable_text.patch	1.27 KB

Using 76% will get you slightly more consistent text sizes across browsers than 75%. I've also removed the "font-size:80%" from fix-ie.css. Yes, the text is slightly smaller than before, but it is actually now consistent with the other browsers so this is a good thing.

Comment #13

alpritt commented 18 November 2007 at 18:08

Status	File	Size
new	resizable_text_3.patch	1.77 KB

Forgot fix-ie-rtl.css

Comment #14

henrrrik commented 19 November 2007 at 00:49

@alpritt

Sounds good to me.

Comment #15

jrabeemer commented 19 November 2007 at 01:27

If we're not using IE7 conditionals, I hope we're checking in all the latest browsers....

Comment #16

Stefan Nagtegaal commented 7 March 2008 at 09:59

Title:	Acessibility: Garland text not resizable in IE7	» Garland Acessibility: Text not resizable in IE7
Version:	6.x-dev	» 7.x-dev
Assigned:	Unassigned	» Stefan Nagtegaal

Makes sense...
Bumping up the version, and updated the title to keep track of it..

I'll look into it..

Comment #17

Stefan Nagtegaal commented 7 March 2008 at 11:15

There is a fix (and some other small things) for this issue here: http://drupal.org/node/231115

Please test, and report back in that issue.. (I'll close this one, once http://drupal.org/node/231115 has been committed)

Comment #18

Stefan Nagtegaal commented 10 March 2008 at 23:21

Status:

Needs review

» Fixed

fixed by http://drupal.org/node/231115

Comment #19

Anonymous (not verified) commented 24 March 2008 at 23:21