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
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; }
and:
a{text-decoration:none;}
just targeting the link.
thanks Tony, that
:bigoops: thanks Tony, that worked.....
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
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;}
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
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.
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
Try this a img{border:thick
Try this
a img{border:thick solid #000;} a:hover img{border:thick solid #333;}
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; }
a:hover img { border: thick solid #666666; }
cheers,
gary
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
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>
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?
I've got most of it sorted
I've got most of it sorted except for the spacing of the images. Anyone....?
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...?
Hi Blimp, It works. I would
Hi Blimp,
It works.
I would most likely have used margin instead of padding.
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?
Try a{outline:none;}
Try
a{outline:none;}
Tony, Your the bomb
Tony,
Your the bomb man...... :thumbsup: