Text Enlarging

[Modica82]

Hi All,

I am trying to ensure that all my pages main body text has the ability to be enlarged for accessiblity. I have a problem which is the text is contained within a div (the whole site is CSS based) and when i enlarge the text to the largest setting it looks awful, not the site the actual text seems to just squash together and overlap itself. Does anyone know why this could be the case?

Thanks,

Rob

---------------------------------------

http://www.thatssolastseason.co.uk

 

[TheCandyman]

Check out this sites option (it's on the right top)

http://www.digg.com

Is that what your thinking of? Letting the user do it? or just making sure it looks good if they do it?

#style-switcher {
	float: right;
	position: relative;
	bottom: 4px;
	right: 7px;
}

#style-switcher a#normal {
	display: none;
}

#style-switcher a#compact {
	display: block;
}

<div id="style-switcher">
<a href="#" onclick="setActiveStyleSheet('compact'); return false;" title="Switch to Compact Mode" id="compact"><img src="/img/switch-compact.gif" width="29" height="22" alt="compact" /></a>
<a href="#" onclick="setActiveStyleSheet('normal'); return false;" title="Switch to Normal Mode" id="normal"><img src="/img/switch-normal.gif" width="29" height="22" alt="normal" /></a></div>

 

[Vragabond]

Without any code it is hard for us to say why that happens. I would say you must be setting line-height to a fixed unit value (points, pixels, inches or such). If you define line-height in ems, you should be fine with text growing.

 

[cLFlaVA]

not sure if this is what you're after, but I found the article quite helpful. it outlines how to make the text size changes less drastic (smaller steps).

http://www.alistapart.com/articles/elastic

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[Modica82]

High all, thanks for the responses. I will look up the links and code. the site is:

http://www.cerulean.co.uk

The text will not enlarge as the font sizes have been taken back to pixels just for now so the site is usable even though not 100% accessible. the css is in a seperate file so you can view the source and download it, if you prefer me to paste it just let me know.

thanks,

Rob

---------------------------------------

http://www.thatssolastseason.co.uk

 

[Vragabond]

Which text seems to overlap? Since you changed it, we cannot see the difference. One thing that looks terrible on Mozilla is the blue box. Try adding overflow: auto to that box to see if it improves. That box has a fixed width and height and when text grows bigger it has nowhere to go.

 

[Modica82]

Hi Vragabond,

I have tested in Mozilla and it looked fine?? Can you tell me what explorer you are using and i can test. If you go into the pages such as About for instance. Where the body text is on the page is where i have the problem. The Title overlaps itself and the text does not format nicely. I will upload a stylesheet in EMs so when you increase the text in that section you will see what i mean.

Thanks,

Rob

---------------------------------------

http://www.thatssolastseason.co.uk