[stealthcow]

i just stumped myself...

if you go to http://www.kdwebserver.co.uk/~peartr...tree-sales.htm you'll see the images of the cameras at the bottom have a little green arrow (its part of the image).

What I want to do is create two graphics containing that arrow graphic (over and normal state) and then overlay the small arrow graphics using css on the actual graphic (which will save on download times)

i cant use background image for the a tag as obviously that will be hidden behind the graphic, im stuck, so please help

[stealthcow]

actually, figured it out myself:

<div class="inline_images">
   <a href="sales-aptus-75.htm"><img src="images/sales/aptus-75.jpg" alt="Aptus 75 Camera" width="147" height="148" border="0" title="Aptus 75 Camera" />
   <span>fdsadf</span></a>
</div>

.inline_images {
position: relative;
width: 147px;
height: 148px;
}

.inline_images span {
position: absolute;
top: 0px;
left: 0px;
width: 147px;
height: 148px;
background-image:url(../images/img_up.gif);
background-repeat:no-repeat;
}
.inline_images span:hover {
background-image:url(../images/img_over.gif);
}

[pgo]

The images are 5K...why not just do a rollover? As in...

<a href="#">Some Camera</a>

Use image replacement to get rid of the text, set the <a> as a block the size of the image, use a double sized image (both states in one image), on hover change the background-position. Problem solved with less markup and better accessibility.

[stealthcow]

that method means that for each image it has to be made twice.. they may only be 5kb, but if you have 15 on a page:

5k x 15 = 75kb
75k * 2 = 150kb

this method ive just made now only comes to

5k * 15kb = 75kb
2kb total for mouseover graphics

77kb total....

and as the number of products continues to increase the size differences will start to become more noticeable - plus it will save time on the graphic creation side

[stealthcow]

hrm, it works in FF but not IE.. any suggestions?

http://www.kdwebserver.co.uk/~peartr...tree-sales.htm

[iamtoby]

IE doesn't support the use of :hover on any other element apart from the a tag.

[emil]

Try using this script
changing bg img on hover in a div...

[stickmus]

You shouldn't need to script it, just change

.inline_images span:hover {

to

.inline_images a:hover span {

[stealthcow]

that works, cheers

[stealthcow]

got another problem with IE on this site,

if you go to http://www.kdwebserver.co.uk/~peartr...ment-cambo.htm

the first grey box shows correctly, but the second one has all the text squished up (its just a copy and paste of the one above with different content, if i delete the first one the second one shows properly)

[jthomas]

Hmm. That is wierd. Especially since IE 5.0 and 5.5 display it ok...just not 6. Any reason you are unable to use Strict instead of Transitional? Can we see styles?

[stealthcow]

stupid IE!!!!

i need to find a fix

[finbarr]

may not have anything to do with the probelm but whats the extra span for at the bottom of those divs?

</ul></span> <span></span> </div>

[stealthcow]

that spans spare at the moment, an image is going to go in there

[emil]

You have spans around uls. I think that's what's causing you the problem
Check the W3C validator, error 6

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Way too many divs for a simple layout, IMHO.
Anyway, this seems to fix the problem. (If you reverse the order of the .inner divs you'll see the same thing happens to the one coming after the first, so that's why I suspect the spans.)

* html div.inner .middle span { padding: 10px; width: 150px; float: left;  clear:right;}
* html .inner h2 { margin: 0px; padding: 0px; width:500px;}

[stealthcow]

that works, cheers

just a quick question though... why does it work?!

[emil]

I just gave the h2 a fixed width for IE, as it kept squishing it in the fixed width span.
Can't remember what the clear:right fixed

[stealthcow]

ah, gotcha