Hey guys, I was wondering if I could get a little help. I'm working on a CSS layout for AccessiForum (a forum I am creating that is currently only level A WCAG and not completed yet, but hopefully AA and completed in the near future). It's pretty simple, and everything works, except for when you use a text-zoom of 120% or more in Mozilla. In IE, you can use any text-size and it's fine, but in Moz, if you set the text-size any larger, the text links in the navigation menu "come out," so only a few of the links are easily seen (the others stretch off of the page, and the navigation DIV has a blue-ish background, but the background of the page itself is white). If you need me to put an online example for you, just tell me...
Thanks, guys.
[J]onaA link would be great. cSome code and/or CSS would be ok.
MNSI'll put it online tomorrow. Just keep in mind that it's really under construction, and don't steal any ideas.
Actually, I promote the use of dynamically generated stylesheets... Go ahead and steal my idea.
(When it's uploaded it, will be located at <!-- m --><a class="postlink" href="http://cmm.sonoracabinets.com/accessiforum/">http://cmm.sonoracabinets.com/accessiforum/</a><!-- m --> until I can afford to get <!-- w --><a class="postlink" href="http://www.accessiforum.org">www.accessiforum.org</a><!-- w -->.)
[J]onaLet me guess. You used pixel for your font size. It doesn't adjust in IE but it does in Mozilla like it is supposed to. IE bug getttin g you. Something I just thught of but I will take a look tomorrow.
These forums just started a few months back. Really good too.
<!-- m --><a class="postlink" href="http://www.accessifyforum.com">http://www.accessifyforum.com</a><!-- m -->
MNSIt's online now, and I didn't know about the pixel thing... I don't like using points for my text-sizes, though, and for accessibility, I should always use the same units. Have any recommendations?
[J]onaOriginally posted by Jona
It's online now, and I didn't know about the pixel thing... I don't like using points for my text-sizes, though, and for accessibility, I should always use the same units. Have any recommendations?
[J]ona
Yes. Use % or the word sizesi.e.; small medium large etc. that you can find at the W3C.
Mozilla is "doing it right". Most layouts will "break" when text is resized. The only thing you can do is to make sure the text is fairly large to begin with, like "medium or 100%, and then make sure the underlying layer is wide enough to accommodate a larger text size.
<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_reference.asp#font">http://www.w3schools.com/css/css_reference.asp#font</a><!-- m -->
Try using an unordered list for a menu and styling the list.
I have some other suggestion for your layut if you are intersted.
MNSThanks... I used percentages and got everything working fine now.
[J]onaHmmm, are you sure you are clued up on web accessibility since points are not reliable for display on VDU's and should really be used for printed media only.One way I discovered to get around text-resizing problems is to specify the widths of elements on your page in ems, or the average width of a character in a character set.
I've done a little experimenting already at <!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/">http://www.cm-life.com/pages/newdesign/</a><!-- m -->. If you resize the text in any browser (assuming it's new enough to recognize the @import method of fetching style sheets),the entire layout gets larger.
Advantages
1. Text can be as large as you want and the layout won't break. Visit the page above in Mozilla and crank the text size up to 1000%.
2. It preserves, with relative accuracy, the number of words per line when the text is resized. I've found that on-screen text is easiest to read at about 10 words per line.
3. You can design a page with a width relative to the text size chosen in the browser preferences. If you want the page to take up more of the window width, make the text larger.
Disadvantages
1. Increasing the text size too much can cause side scrolling. However, the people who increase the text size a large amount probably have extremely poor eye sight and are used to scrolling sideways anyhow because they have the text size increased for everything. And maybe even have a screen zoom program to see things.
2. Browser bugs in IE 5/Mac that makes the columns overlap each other or seem too far apart after the text is resized, until the page is refreshed at least.
3. IE5 and 5.5/PC gets the text resize wrong no matter what.
4. Images don't get resized so they look disporportionate to the rest of the page and to the text size when you resize to larger text sizes.Originally posted by Robert Wellock
Hmmm, are you sure you are clued up on web accessibility since points are not reliable for display on VDU's and should really be used for printed media only.
I'm not using points, I'm using percentages.
Originally posted by toicontien
One way I discovered to get around text-resizing problems is to specify the widths of elements on your page in ems, or the average width of a character in a character set.
Well, usually I try to veer away from using ems. Sometimes they are a bit unpredictable and don't seem to fit what I want properly.
[J]onaem's will be the thing to use about 10 years from now when IE 5, 5.5, and 6 are finally no longer used. Until then, as designers/developers we have to deal with the substandard rendering. The web dragged down to the lowest common denominator......
MNSI'm not sure if you are aware of this or not, but in Moz, when the text-zoom is increased, the "AccessiForum" text at the top of the page jumps down below the light-blue box that it is originally in.
Take a look at the screenshot.Originally posted by Paul Jr
I'm not sure if you are aware of this or not, but in Moz, when the text-zoom is increased, the "AccessiForum" text at the top of the page jumps down below the light-blue box that it is originally in.
Yeah, I'm aware of that too... Working on it.
By the way, next time I prefer that you upload the image as a .jpg, .png or .gif file to this forum, rather than a .zip file.
[J]onaAight, sorry 'bout that.No problem.
[J]ona
Thanks, guys.
[J]onaA link would be great. cSome code and/or CSS would be ok.
MNSI'll put it online tomorrow. Just keep in mind that it's really under construction, and don't steal any ideas.
Actually, I promote the use of dynamically generated stylesheets... Go ahead and steal my idea.
(When it's uploaded it, will be located at <!-- m --><a class="postlink" href="http://cmm.sonoracabinets.com/accessiforum/">http://cmm.sonoracabinets.com/accessiforum/</a><!-- m --> until I can afford to get <!-- w --><a class="postlink" href="http://www.accessiforum.org">www.accessiforum.org</a><!-- w -->.)
[J]onaLet me guess. You used pixel for your font size. It doesn't adjust in IE but it does in Mozilla like it is supposed to. IE bug getttin g you. Something I just thught of but I will take a look tomorrow.
These forums just started a few months back. Really good too.
<!-- m --><a class="postlink" href="http://www.accessifyforum.com">http://www.accessifyforum.com</a><!-- m -->
MNSIt's online now, and I didn't know about the pixel thing... I don't like using points for my text-sizes, though, and for accessibility, I should always use the same units. Have any recommendations?
[J]onaOriginally posted by Jona
It's online now, and I didn't know about the pixel thing... I don't like using points for my text-sizes, though, and for accessibility, I should always use the same units. Have any recommendations?
[J]ona
Yes. Use % or the word sizesi.e.; small medium large etc. that you can find at the W3C.
Mozilla is "doing it right". Most layouts will "break" when text is resized. The only thing you can do is to make sure the text is fairly large to begin with, like "medium or 100%, and then make sure the underlying layer is wide enough to accommodate a larger text size.
<!-- m --><a class="postlink" href="http://www.w3schools.com/css/css_reference.asp#font">http://www.w3schools.com/css/css_reference.asp#font</a><!-- m -->
Try using an unordered list for a menu and styling the list.
I have some other suggestion for your layut if you are intersted.
MNSThanks... I used percentages and got everything working fine now.
[J]onaHmmm, are you sure you are clued up on web accessibility since points are not reliable for display on VDU's and should really be used for printed media only.One way I discovered to get around text-resizing problems is to specify the widths of elements on your page in ems, or the average width of a character in a character set.
I've done a little experimenting already at <!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/">http://www.cm-life.com/pages/newdesign/</a><!-- m -->. If you resize the text in any browser (assuming it's new enough to recognize the @import method of fetching style sheets),the entire layout gets larger.
Advantages
1. Text can be as large as you want and the layout won't break. Visit the page above in Mozilla and crank the text size up to 1000%.
2. It preserves, with relative accuracy, the number of words per line when the text is resized. I've found that on-screen text is easiest to read at about 10 words per line.
3. You can design a page with a width relative to the text size chosen in the browser preferences. If you want the page to take up more of the window width, make the text larger.
Disadvantages
1. Increasing the text size too much can cause side scrolling. However, the people who increase the text size a large amount probably have extremely poor eye sight and are used to scrolling sideways anyhow because they have the text size increased for everything. And maybe even have a screen zoom program to see things.
2. Browser bugs in IE 5/Mac that makes the columns overlap each other or seem too far apart after the text is resized, until the page is refreshed at least.
3. IE5 and 5.5/PC gets the text resize wrong no matter what.
4. Images don't get resized so they look disporportionate to the rest of the page and to the text size when you resize to larger text sizes.Originally posted by Robert Wellock
Hmmm, are you sure you are clued up on web accessibility since points are not reliable for display on VDU's and should really be used for printed media only.
I'm not using points, I'm using percentages.
Originally posted by toicontien
One way I discovered to get around text-resizing problems is to specify the widths of elements on your page in ems, or the average width of a character in a character set.
Well, usually I try to veer away from using ems. Sometimes they are a bit unpredictable and don't seem to fit what I want properly.
[J]onaem's will be the thing to use about 10 years from now when IE 5, 5.5, and 6 are finally no longer used. Until then, as designers/developers we have to deal with the substandard rendering. The web dragged down to the lowest common denominator......
MNSI'm not sure if you are aware of this or not, but in Moz, when the text-zoom is increased, the "AccessiForum" text at the top of the page jumps down below the light-blue box that it is originally in.
Take a look at the screenshot.Originally posted by Paul Jr
I'm not sure if you are aware of this or not, but in Moz, when the text-zoom is increased, the "AccessiForum" text at the top of the page jumps down below the light-blue box that it is originally in.
Yeah, I'm aware of that too... Working on it.
By the way, next time I prefer that you upload the image as a .jpg, .png or .gif file to this forum, rather than a .zip file.
[J]onaAight, sorry 'bout that.No problem.
[J]ona