unresizable text in a scrolling div

Well, that's what I want..

[saZmer]

Hello..

I'm trying to make some text unresizable by the text-size change in firefox (ctrl+scroll or ctrl + or whatever it is..). This is because I'm using a scroller on the site within a box. I was thinking of making the box resize with the text but because of it being a javascript dealing with hidden layers and so on it didn't work out very well..
Anyway, the text inside the box should be static since it disappears outside the box when you enlarge the text too much..

I tried changing the size from em to px, which I thought would work but obviously that wasn't it..

Can this be done? How?

Thanks a heap for your help!

Samuel

[justgowithit]

Text can be locked in IE6 and below. IE7 and any Geko-based browser will resize text even when working with embedded css.

[Fotiman]

What you're trying to do is very poor design. For accessibility reasons, you should not be limiting the font size. Users with impared vision will not appreciated it. In general, a layout that is dependent on the text size is simply not a good layout.

To answer your question, no, it can't be done. Defining a font in px will cause the text not to resize in IE, but fortunately, the other browsers did it the correct way and let the user resize fonts even when defined in px.

[saZmer]

In general, true. Allways not true.

I disagree on this particular case beeing poor design. Funny that you should think otherwise without seeing the specific case..

From your statement one could think that any kind of image on a site is poor design since an image isn't resizable. Is your opinion that that is the case?

Well I guess I could solve the problem by using images..

[sifredi]

CSS is not a good option for static font sizes. Browsers interpret sizes differently and there are a lot of other user agents with their own preferences, like screen readers and such. HTML is a semantic language, and CSS is a media-specific rendering language. Users and user agents will always have the power to override any style sheet depending on the browsing environment, so just forget about using CSS to prevent font-resizing.

You should try some other technique, like flash or static images if you want to present a static "image" of text. Personally, I don't recommend it though.

I agree that static font sizes does not equal bad visual design, but that discussion lies in the definition of "design". Latest web development trends tend to move towards elastic sizes using em's, so the layout won't break when the user increase the font size.

[saZmer]

I do agree on resizable text being the preferabel in most cases though, except for the images that make out the eye-candy parts of the site, so to speak..

Actually, what I would want is a scroll inside a box (div) with images and text where the text is resizable together with the div.. Maybe I should ask for some help for that instead!

Anyone has a suggestion?

And spare me comments like 'that's a very poor idea' etc please, preferably constructive critisism like 'maybe you should consider this?'
Thanks!

[Xapti]

Unsizable text is a stupid thing you don't even want to think about, Period.
Using images for text where the images are too small is just as bad.
Images actually CAN be resized though, when you size them with ems they will scale just like the text scales.

If your content ever grows larger than it's container, make sure you include overflow:auto on your container. That will give your content a scrollbar when it is too large.

Like you mentioned, you can also size your containers with EMs, or you can not specify height and widths, and let your content flow naturally (best design).

[edited by: Xapti at 5:17 am (utc) on June 16, 2007]

[Marshall]

Set the font size in points (pt) if you don't want it to resize.

Marshall

[Robin_reala]

Marshall - that doesn't work, in non-IE browsers at least.

[saZmer]

Seems that I did not make myself clear enough..

Because of the scroller javascript setting the values to auto doesn't work because it changes the div for another and so on. This means that the div keeps resizing while the scroller passes. Otherwise this would ofcourse be the best alternative.

My question was wether someone has an idea on how to solve the problem, for example a better scroller that works with resizable text?

[Robin_reala]

What do you mean by a scroller? A bit of Javascript that automatically scrolls an element with overflow:auto?

[sifredi]

a better scroller that works with resizable text

<div style="height: 100px; width: 100px; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur tortor libero, condimentum in, tincidunt aliquam, porta ac, augue. Sed tempor bibendum massa. Aliquam id velit eget elit porta pellentesque. Sed libero. Fusce suscipit lectus ac massa. Proin aliquam lectus quis risus.</p>
</div>

[saZmer]

Sorry for not specifying..
By scroller I mean a bit of javascript that scrolls the content and preferably pauses the content on given places too..

Like:

Text Text Text Text Text Text Text Text Text Text <img>

pause

Text Text Text Text Text Text Text Text Text Text <img>

pause

Text Text Text Text Text Text Text Text Text Text <img>

pause

I don't have any preferences on how it's made, just that I would like it to be expandable..

[sifredi]

You mean a script that automatically scrolls the content in a certain speed without user interaction? I would try the javascript forum for one of those.

[Fotiman]

A more correct description might be a "stock ticker" (if I'm understanding you correctly).

[Setek]

Couldn’t

<marquee>

handle this?

Yeah, or check the javascript forum :)

[Fotiman]

marquee is not a valid HTML element.

[Setek]

Sorry, I don’t really have a problem if

<marquee>

is a valid element or not, if in the end the effect is an inaccessible and sometimes horribly unusable section of a website :)

I believe the poster said can you spare me the “it’s a bad idea” etc comments, so I left mine out.

[SuzyUK]

saZmer I think you need to search around for News or Stock Tickers, likely javascript solutions - when you find one you like play around with it and see if it can be sized, at least height wise in em's I know that this won't work with some of the scripts out there which rely on absolute co-ordinates for positioning the text while scrolling it.

However if there's something simple like the one atop the BBC News [news.bbc.co.uk] site then it could be given a height in ems this should make it grow better as text is expanded

perhaps you could also clarify whether you want it to have a horizontal scroll effect or a vertical (scroll up) effect as this too will have a bearing.

Probably with some effects it just won't be possible. The text will always be resizeable so you need to look at ways of making the containing element grow with the content.

[saZmer]

Thanks for your replies!

Well, everyone loves to tell me that it is a bad idea to have something that won't resize and so on and so forth so I figured I'd just reply to that.
Why do you guys think I'm making an effort, trying to find a script that DOES allow resize if I don't allready know that it otherwise would be a bad idea? Why would I even consider making this post if I were perfectly fine with a scroller that doesn't resize? I thought I made it clear that I allready have that? :)

That being said, thanks everyone for trying to help me out!

Sorry for not specifying the exact thing I'm looking for, I'll give it another try:

______________
¦ ¦
¦ ¦
¦ ¦
¦ ¦
¦____________¦

A box like that, but alot bigger is the basic thought. In this box, text is scrolling vertically. It gives a pause on every paragraph since every paragraph will be talking about a different child (the site is for an orphanage)and showing a picture of this child. So:

picture¦ text about the child text about the child
picture¦ text about the child text about the child
picture¦ text about the child text about the child
picture¦ text about the child text about the child
picture¦ text about the child text about the child
text about the child text about the child
link to read the continuation to the text above

shows for a few seconds, then the text moves upwards and out of the box and in comes another text about another child. It gives a pause for the visitors to read this and then goes on to the next child.

I hope I managed to explain a bit better this time, again sorry if I'm being unclear!

Thanks a heap!

[saZmer]

Ooops, that box didn't turn out the way I wanted it. Well try to imagine it being a normal box :D

[sifredi]

again, such script has little to do with CSS. I would try posting your request in the javascript forum instead.

[DrDoc]

Since there is already a discussion in the JavaScript forum, and since the topic more likely belongs there -- this thread is now locked. No sense in keeping two conversations going on the same topic. :)

Thread in JS forum [webmasterworld.com]