tags:

views:

159

answers:

3

I'm working with Course Management System Moodle and in the admin the folder tree (which uses folder icons) displays for about a second the alt attribute given (In this case "Open Folder") then it hides and shows the image when the image is ready.

The system is kind of slow so I assume Firefox thinks at first that the images don't exist.

This is a problem because during that split second the layout stretches to fit the wider words making it look unprofessional in my opinion.

Is there a way I can hide this tag without having to remove the alt tags? (which would be labor intensive) maybe using JQUERY or CSS.

A: 

If the images are part of the layout, I'd recommend moving them to CSS. You should also optimize your images wherever possible whether they are CSS or otherwise. You could also move your JavaScript files to the bottom of the page where possible as they block parallel downloads. In general, applying a lot of the techniques here would probably help.

VirtuosiMedia
A: 

If the images have to be a certain width, give them an explicit width.

Chuck
+1  A: 

displays for about a second the alt attribute given (In this case "Open Folder") then it hides and shows the image when the image is ready.

Yes, that's what alt text is for: it provides a textual alternative for when the image isn't available — whether that's because there's an error, or images are turned off in the browser settings, or, in this case, the file just hasn't arrived yet.

Is alt text really what you want? Unless the image in question actually contains the words “Open Folder”, the above is inappropriate alt text. If we're talking about one of those little plus/minus icons that opens a tree, a better alt text would be ‘+’. “Open folder”, as a description of what the image does (as opposed to what it contains), would be better applied to the ‘title’ attribute used for tooltips.

Note that if you're using Quirks Mode and the image has a fixed size specified, Firefox will use a ‘broken image’ icon with the alt text overlaid and cropped inside, instead of the plain alt text on its own. This is to match IE's old behaviour. But you don't really want to use Quirks Mode, and in the common case where the fixed size is small, the cropping makes the alt text unreadable and useless.

This is a problem because during that split second the layout stretches to fit the wider words making it look unprofessional in my opinion.

I'd recommend: getting over it. That's how the web rolls, any page can move about a bit as it renders progressively. For images you should only ever see it happen once, then the image will be cached and will appear straight away. If it doesn't, there's something wrong with the cacheing setup.

Depending on what kind of layout you are talking about, you can perhaps fix that to not respond to the changing image size, too. For example if using a table, setting “table-layout: fixed” on the table and “width: (some number of)px” on the top row's image cell will make it stick to that width even if the text inside is smaller. Possibly causing the alt text to run over into the next cell though, mind.

bobince
good information bobince. My point was, i don't want to modify the core engine as it might be necessary to do a quick security update. The theme has a liquid layout so the fixed table width wont work. I was hoping there was a CSS or JS hack i could use to hide this alt text for that split second.
Sam3k
‘table-layout: fixed’ isn't incompatible with liquid layout; it's just that any unspecified-width columns share the remaining browser width equally (instead of it depending on their content length). So if all the images were in one column you could still use that.
bobince