So, as a page is loading in FireFox, and you see the text/name for the images before they load (I'm assuming this is the ALT text? Or maybe just the text for images that are links?) how can you set the font and/or style for that text? I never really thought about it until just testing some of my own sites and noticing that stuff shows up as big ugly default text while the images are loading.

What's interesting is that some of my stuff shows up as default text, and others seem to take on the same font/size as the style-sheet for the content text. Then after surfing around I see the same thing. Some sites show default type text while the images are loading, some show text that has a certain font/style/color. Some sites even showed a mixture.

So how do you set the style for text that is not even seen (except in some browsers while images loading) ??

On a personal note, let me say that finding yet another new thing to worry about makes me want to puke.

:puke:

You need to use <a href="" title="Display Text"></a> in firefox for it to display.

ALT and TITLE descriptions are very different things. TITLE attributes are used for popup tooltips and the like and explanations for screenreaders etc. Essentially a usability feature.

However ALT text is used to describe an image when no visual representation is present. Can't see why you'd need to style it, but you could just simply try setting the font styles etc in your CSS file and applying it to the image as a class.

(Internet Explorer does take ALT text to be a tooltip, although the W3C specs say differently. Only apply ALT tags to images with semantic value.)

I'm not sure, maybe it uses your default system settings, you may use different text sizes for them?

Also, you could try giving the image tag a style, for instance how you would with the float: right; element.

Originally posted by Floyd
Can't see why you'd need to style it, but you could just simply try setting the font styles etc in your CSS file and applying it to the image as a class. That's sounds like a reasonable explanation and is probably worth trying; it would explain why Gen-T's seeing some sites where the text shows in a "mixture" of styles -- probably in some cases a CSS style has been applied to images (even inadvertantly, which is pretty easy to do in a wysiwyg editor) and not to others, and different images may have different styles applied.

My connection is too fast to test that in FireFox without taking the time to set something up. :)

Can't see why you'd need to style it, but you could just simply try setting the font styles etc in your CSS file and applying it to the image as a class

I have to start reading other people's replies.

Originally posted by Floyd
ALT and TITLE descriptions are very different things. TITLE attributes are used for popup tooltips and the like and explanations for screenreaders etc. Essentially a usability feature.

However ALT text is used to describe an image when no visual representation is present. Can't see why you'd need to style it, but you could just simply try setting the font styles etc in your CSS file and applying it to the image as a class.

(Internet Explorer does take ALT text to be a tooltip, although the W3C specs say differently. Only apply ALT tags to images with semantic value.)
First of all, you should still apply the alt attribute to images that have no semantic value like so: alt="". If you're wondering why, try viewing your page in a text browser or with a screen reader without this and see if you like the results ;)

Second of all, it is very important that you style your alt text to some extent. One tenet of text styling that I learned right away (the hard way) was that you never, ever declare a background color in CSS without declaring a suitable text color (just 'color') as well. This is because your alt text is affected by these styles! Now, I haven't tried applying different font characteristics to alt text, but there's an easy way to test this.

First, create a page with a single line of CSS:

#test { background:#HEXNUM ; color:#HEXNUM ; font:family size weight style whatever }

Then create a div with a broken image:

<div id="test"><img src="#" alt="Here's some alt text"></div>

Now, get to testing :)
View it in a few browsers. Change a few CSS characteristics and see what affects the text and what does not. The colors will work - this I've tested. I'll be interested to hear what happens with the rest, though I believe it will work.

If you want styles that specifically apply to the alt text only, you might try something like this

#test img { CSS HERE }
<div>Some text <img src="#" alt="my broken image"></div>

and see if only the alt text is affected.

When it comes time to test your live site, Opera has an excellent testing feature built into its main interface that allows you to turn images off with one click - very handy if you're stuck somewhere on a dialup connection and you just want text (when I'm on the road, I use this for WHT :) ).

HTH!

Paul H

Thanks for the feedback everybody. Excuse me if there was a bit of confusion at first, regarding exactly what I was talking about, but that's to be expected since I probably didn't explain it quite right, because I myself was confused since this issue had never risen until I started using/testing other browsers.

Paul, thank you for your post. I just woke up. Once the ringing in my ears stops, and I am able to focus my eyes better, I will begin some further testing.

:eek2:

Originally posted by Gen-T
Thanks for the feedback everybody. Excuse me if there was a bit of confusion at first, regarding exactly what I was talking about, but that's to be expected since I probably didn't explain it quite right, because I myself was confused since this issue had never risen until I started using/testing other browsers.

Paul, thank you for your post. I just woke up. Once the ringing in my ears stops, and I am able to focus my eyes better, I will begin some further testing.

:eek2:
The best cure for a hangover is a cold shower followed by some more whiskey. Let us know how it goes ;)

Wouldn't this be like using the <a> tag.

For example when you make a link style, you use

a {font-size: 12px;}

etc. So in theory using

img {font-size: 12px;}

Would work the same?

Yep, that should be the case. That's how I constructed my second example: #test img { CSS HERE } - though I did it within a descendent selector to test differences between normal text and alt text :)

Originally posted by the_pm
The best cure for a hangover is a cold shower followed by some more whiskey. Let us know how it goes ;)
Paul, is it necessary for you to scream so loudly?

Do the lights seem unusually bright in here to anybody else?

:o