Welcome to WebmasterWorld Guest from 54.147.20.131

Forum Moderators: not2easy

Message Too Old, No Replies

img alt text colour

     

migthegreek

9:45 am on Oct 12, 2010 (gmt 0)

5+ Year Member



While an image is loading, the alt text shows, right? (Not sure which browsers, but it does in FF). Well the alt text is the same colour as links, which isn't really looking too good.

It's no biggie, but just wondering if there is a specific CSS property I don't know of that will make alt text invisible or a different colour or something like that.

Major_Payne

2:17 am on Oct 13, 2010 (gmt 0)



"Alt" is an accessibility attribute for text only browsers. If it shows before the image, then your image is too large or the server speed connection is too low for you.

The alt text will only be the same color as your links depending on the colors you have set for links and text. That is all part of the CSS styling you are using. If you have not told the browsers what colors you want, then they default back to what the developers have set for the browser when parsing your page.

migthegreek

8:48 am on Oct 13, 2010 (gmt 0)

5+ Year Member



Thanks, I am aware of all of that. I know how to optimise images and CSS. It was just something I noticed when the connection went really slow, that my alt text stands out as bright pink because that's my link colour.

I was just wondering if there is a CSS property that will do this, as there are other properties (such as outline) which seem to control similar aspects of page elements.

milosevic

10:17 am on Oct 13, 2010 (gmt 0)

5+ Year Member



You can either put the images with alt text inside an element with a class or id -

eg

<div class="img"> <img alt="blah"> </div>

then CSS like

.img { color:#ccc; font-weight:normal }

or (I think more elegantly) you can use an attribute selector:

img[alt] {
font-weight:bold;
font-size:2em;
}

Remember if you use styles that effect things other than just text, it will apply to the image too.

migthegreek

5:02 pm on Oct 13, 2010 (gmt 0)

5+ Year Member



Thanks milosevic, you opened up my thinking.

Looking at my page, I can now see that what happens is the image alt text takes the colour of whichever styles it has inherited. However, it was just a coincidence that I had a link around one of my images, so the alt text took the colour of links.

Therefore, the alt text colour can be changed as you say, like any other element. In that case, there is not necessarily the need for your div/class wrapper. The alt text colour can simply be changed like this:

img {color:#F00;}
 

Featured Threads

Hot Threads This Week

Hot Threads This Month