17 replies [Last post]
fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Hi all,

Is there a better way of doing this using css:

<a href="xxx" style="float:right"><img src="yyy"/></a>

The image is a small rss icon and can be found 25 times on one single page and, unfortunately, there is a significant delay before they show up.

Tags:
Anonymous
Anonymous's picture
Guru

Re: A better (CSS) way of doing this...

Are they hotlinked from a separate server?

fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

A better (CSS) way of doing this...

Nope! They're local.

Anonymous
Anonymous's picture
Guru

A better (CSS) way of doing this...

I don't see any reason for there to be a delay. Moved to Off Topic.

fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

A better (CSS) way of doing this...

Ok! But coming back to the original question, is there any better way of doing it in CSS or is this how it should be done?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 9 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

A better (CSS) way of doing this...

It depends; you could always use a background-image.

Verschwindende wrote:
  • CSS doesn't make pies

fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

A better (CSS) way of doing this...

Aha! Now we're talking!

Two questions:

1. Would that remove the delay?
2. Can a background image be clicked?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

A better (CSS) way of doing this...

1. If you do not specify an image's dimensions then the whole page will have to load before the browser can work out where everything goes and draw the page. If you do specify the images' dimensions then the browser will begin showing the page as it gets to each element.

2. You can use CSS to position a background image in a div, then hard-code a transparent image that you turn into a link.

Life's a b*tch and then you die!

fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

A better (CSS) way of doing this...

Thanks Roy!

It must be the dimensions then. I'll try it out and let you know how it goes.

Anonymous
Anonymous's picture
Guru

A better (CSS) way of doing this...

fambi wrote:
Ok! But coming back to the original question, is there any better way of doing it in CSS or is this how it should be done?
You have it right. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

A better (CSS) way of doing this...

There is a fad for omitting the height and width attributes of the image element, for what reason I know not. It always used to cause problems with table layouts where the table could not be accurately drawn until the images had been loaded and their inherent size read.

I suspect that people have taken the deprecated nature of image attributes too literally and I know one well known voice who claims this is the case and that height and width should not be used , I think she is wrong....I mean he is wrong.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

A better (CSS) way of doing this...

Hugo wrote:
I suspect that people have taken the deprecated nature of image attributes too literally and I know one well known voice who claims this is the case and that height and width should not be used , I think she is wrong....I mean he is wrong.
Neither height nor width are deprecated in XHTML.

align, hspace, vspace and border are the deprecated attributes of img.

I've gotten out of the habit of adding height and width but I can not tell you the reason. I have no idea why I stopped using them.

fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

A better (CSS) way of doing this...

roytheboy wrote:
If you do not specify an image's dimensions then the whole page will have to load before the browser can work out where everything goes and draw the page.

That seems to have been the problem - although now it shows a box in its place whilst it waits for the image to show up.

roytheboy wrote:
You can use CSS to position a background image in a div, then hard-code a transparent image that you turn into a link.

Do you think that would make it faster/better?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

A better (CSS) way of doing this...

fambi wrote:
That seems to have been the problem - although now it shows a box in its place whilst it waits for the image to show up.

Well that's better than a blank screen that causes visitors to click away because they think there's nothing there! Now the browser will calculate the object sizes, allocate space, draw the text, then download the images. If you want thinks to happen any quicker then optimise your images to smaller sizes. You can't have your cake AND eat it Wink

fambi wrote:
Do you think that would make it faster/better?

Faster, no; better, possibly. By using a background image you can change it on a mouse-over without employing JavaScript. Turn the anchor into a block and use the image for the background, then change it on the hover. That also means that you can place text over the image. That also means that you can place text over the image and hide it, such that it shows up if styles are disabled. For example, if you want a logo to be replaced by a 'Home' link when styles are disabled.

Life's a b*tch and then you die!

fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

A better (CSS) way of doing this...

Thanks!

fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

A better (CSS) way of doing this...

Just to re-open the topic!

Would preloading the image help in making it show up immediately (as opposed to after everything else has loaded)?

If so, what is the correct way of preloading an image? (I've never done it before.)

Anonymous
Anonymous's picture
Guru

A better (CSS) way of doing this...

How much of a delay is occuring? Can you show a link? Smile

fambi
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

A better (CSS) way of doing this...

The delay is until the page loads completeley.

The site is not yet in public form, but as soon as it is (by Monday should be), i will post a link.