18 replies [Last post]
blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

I've thrown up this test page with 3x images set as img links.

I then set a CSS rule so that there is no blue boarder around my images when previewed in a browser.

The CSS rules works fine in Safari but still shows the boarder in IE7 & FF3.

Any guidance as to why and how I go about fixing this?

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Blimp, You have your

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

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

The image is within the A element, so you need to use:
a img{ 
border: 0; }
to remove any border from the image.
and:
a{text-decoration:none;} just targeting the link.

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

thanks Tony, that

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

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Tony, I've added a:hover

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi blimp, It's because the

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

2. float the link:
a{float:left;
width:108px;
height:159px;}

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Hi Tony, Firstly I'd like

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

HI Blimp, Adding the border

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.

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Hi Tony, I tried adding the

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Try this a img{border:thick

Try this

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You added an additional

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

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

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Tony, I've just realized

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

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Guys thanks so much..... all

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>

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Tony, Just when I thought I

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?

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

I've got most of it sorted

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

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

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Playing around with the CSS

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...?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Blimp, It works. I would

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

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Hi Tony, Not sure if your

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?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Try a{outline:none;}

Try
a{outline:none;}

blimp
Offline
Enthusiast
Last seen: 10 years 44 weeks ago
Timezone: GMT+10
Joined: 2009-06-18
Posts: 91
Points: 36

Tony, Your the bomb

Tony,

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