homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
img alt text colour
migthegreek




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

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




msg:4215964
 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




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

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




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

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




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

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;}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved