IMG LINK

Hi Blimp,
You have your selectors around the wrong way.

/* incorrect */
img a {
 border: 0;
 text-decoration: none;
} 

a img{ 
border: 0; }

:bigoops: thanks Tony, that worked.....

Tony,

I've added a:hover with a thick boarder however when previewed, the boarder doesn't go right around the image, why is this so?

http://www.blimpmedia.com.au/shadowbox/003/shadowboxtest1.html

Hi blimp,
It's because the link is an inline element by default.
To fix it you can do a couple of things depending on your needs.
1. display the link as a block and give it a height and width.

a{display:block;
width:108px;
height:159px;}

a{float:left;
width:108px;
height:159px;}

Hi Tony,

Firstly I'd like to express my appreciation for taking the time to help me out with this. I'll be soon working on a site where I'll be implementing this technique, so I thought there is no better place to iron this out, other than csscreator. :thumbsup:

As suggested I've now added the block rule and to no surprise this works as expected. What I am noticing though, is that when you hover over any of the images, there seems to be like a jump, how do I get around this?

Just out of curiosity, can I also make a class rule that sets the block, width & height and then apply it to each image, or setting to the "a" tag is quicker and simpler?

block: http://www.blimpmedia.com.au/shadowbox/003/shadowboxtest1.html

float: http://www.blimpmedia.com.au/shadowbox/003/shadowboxtest2.html

HI Blimp,
Adding the border to the link on hover moves the image over by the width of the border, so yes there will be a jump unless you counter that.

You could add margin to the link and remove it on hover.
Or you could star with the border having the same color as the background and just change the color on hover.

Hi Tony,

I tried adding the same boarder thickness just slightly darker to the "a img" css rule, and left the a:hover rule as is.

My understanding is that if I add the same boarder to the "a img", this would position my thumbnail in the same pixel space as my "a:hover" state. I guess this is not true because there is still that pixel shift.

Sorry having trouble understanding this.

http://www.blimpmedia.com.au/shadowbox/003/shadowboxtest1.html

Try this

a img{border:thick solid #000;}
a:hover img{border:thick solid #333;}

You added an additional border, instead of just changing the color.

a:hover {   /* shadowbo...est1.html (line 25) */
border:thick solid #666666;
}

a:hover img {
  border: thick solid #666666;
  }

gary

Tony,

I've just realized what I did wrong, I needed to add the boarder to the "a" rule rather than the "a img".

Now in Safari this works all fine but in FF3 and IE7 I still get that blue line around my images. :blushing: wish all these browsers worked the same.

What am I doing wrong?

http://www.blimpmedia.com.au/shadowbox/003/shadowboxtest3.html

Guys thanks so much..... all works now.

This is the adjusted code

<style type="text/css">
body {background-color: #121212;}
a {display:block; width:108px; height:159px;}
a img {border:thick solid #333;}
a:hover img {border:thick solid #666;}
</style>

Tony,

Just when I thought I had this all under control.

I've now laid out the site and added the 3x thumbnails within a div container which looks like this.

http://www.blimpmedia.com.au/csscreator/010/frank.html

How do I spread all 3x images to evenly space within that video div?

I've tried adding a #video img rule and set a 20px padding, however this wont work when I add the "a" and "a:hover" borders from the previous posts.

What's the best way to go about this?

I've got most of it sorted except for the spacing of the images. Anyone....?

http://www.blimpmedia.com.au/csscreator/010/frank1.html

Playing around with the CSS rules, I've come up with this

http://www.blimpmedia.com.au/shadowbox/003/frank.html

Is this the right way to go about it...?

Hi Blimp,
It works.
I would most likely have used margin instead of padding.

Hi Tony,

Not sure if your experiencing the same, in Safari this all works well, same goes for IE7, but in Firefox 3 I get this really wired read line that appears when I click and hold my mouse down on anyone of these images.

Any idea why?

Try
a{outline:none;}

Tony,

Your the bomb man...... :thumbsup: