I'm Stuck - Border around a linked image - not as simple as I thought?

jarigo2 · 4-18-12, 10:02 PM

Ok so I've googled and seen countless websites instructing the border=0 stuff and even the a img {border:none;} stuff in the style sheet.

Nothing works.

Please take a look at the social media buttons on the left column of www.pizzapie24x7.com. It seems to me that these nifty 3D icons that I'm using have transparent backgrounds which means that the actual edge of the image is larger than the 3D visible icon itself. Do you see that little gray border? It's driving me crazy!

How can I get rid of it?

I think it has something to do with the fact that its a transparent PNG. I've saved it as 8 and 24- same thing.

John

tpoynton · 4-19-12, 06:39 AM

are you talking about the +1 and like buttons, or the square ones? i see the gray border around the rectangles (one of which is a div, the other is probably a div generated by js). for the square ones, I only see a little gray on the bottom right corner of two of them, something that can be easily fixed by opening the image in an editing program and erasing.

jarigo2 · 4-19-12, 08:00 AM

Dont I look like a fool.

Either its a powweb server issue or a browser refresh issue. Last night when I was pulling my hair out trying to figure this out apparently my changes were being made but I wasn't seeing them. This morning I wake up to a bunch of changes with no gray border. Its like my server or my browser doesn't see an immediate change.

Oh I'm mad. At least the gray box is gone. It must have been one of the 100 things I tried last night with the image. oh boy.

**snowmaker** · 4-19-12, 08:13 AM

You know, I went to your site shortly after your post last night, and saw the border issue you were having. I was about to reply, with some things to try out (that was last night, so I don't remember what I was going to say..), but I had to run off, real life was calling (it always seems to get in the way like that, dammit), but a few hours later when I made it back here, the issue seemed resolved. It could very well be a browser cache issue, that has reared its head here in a few different ways. And that pan pizza looks good!

tpoynton · 4-19-12, 08:31 AM

must've been looking at a cached version on powweb servers...there is apparently some htaccess you can add to disable caching, sticky at http://forum.powweb.com/showthread.php?t=85763 .

Caching is bad when you are trying to see changes, but good for server performance - yours and everyone else's. If you disable caching, I'd recommend re-enabling it by commenting out those lines in the htaccess file. it is an extra step, but only takes a minute or so to open the htaccess file, add/delete comment markers, and upload.

jarigo2 · 4-19-12, 08:48 AM

Now I'm curious as to what did the "box removal"

either my photoshop save for web options where I altered the png setting or this in my style sheet:

a:link img{
border: 0px solid #cccc99;
}
a:visited img{
border: 0px solid #cccc99;
}

I changed the px from 1 to 0. The problem is I really don't know what I'm doing! lol

Thanks anyway - its fixed, im running with it!

**snowmaker** · 4-19-12, 09:00 AM

Well this border: 0px solid #cccc99; translates to this: a solid border 0 pixels wide (invisible..) which is a kinda greyish yellow color (which can't be seen since the border width is 0 px anyway). Basically, the border type and color aren't needed here.

edit: oh, and the a:link and a:visited specify visited and unvisited anchors (links).

jarigo2 · 4-19-12, 09:39 AM

A small embarrassing update: this was the fix:

a:link img{
border: 0px solid #cccc99;
}
a:visited img{
border: 0px solid #cccc99;
}

I did it on another blog of mine and the gray box was there with the same images used on the pizza site. I went into style and changed 1px to 0 px and boom it went away.

I could have saved about 3 hours last night if I would have known about the server cache issue! ha.

jarigo2 · 4-19-12, 09:41 AM

Quote:

Originally Posted by snowmaker

Well this border: 0px solid #cccc99; translates to this: a solid border 0 pixels wide (invisible..) which is a kinda greyish yellow color (which can't be seen since the border width is 0 px anyway). Basically, the border type and color aren't needed here.

edit: oh, and the a:link and a:visited specify visited and unvisited anchors (links).

Oh just saw this reply. So you think I have some unnecessary code in there? It seems to be working fine I assume I should just leave it be? I wonder how that got in there? Oh yes, about 5 years of me screwing around with a style sheet. :-)

**snowmaker** · 4-19-12, 09:45 AM

It's ok to leave it there, unless you need the space the unused 30 or so characters takes up..

jarigo2 · 4-19-12, 09:46 AM

Quote:

Originally Posted by snowmaker

It's ok to leave it there, unless you need the space the unused 30 or so characters takes up..

Thanks Bruce!

**snowmaker** · 4-19-12, 09:47 AM

You bet man.

entrecon · 4-20-12, 02:48 PM

I don't know that you are using one, but if you have something like WordPress or Joomla they also have a cache funtionality that you might need to clear when working on this type of stuff.

jarigo2 · 4-21-12, 08:31 AM

Quote:

Originally Posted by entrecon

I don't know that you are using one, but if you have something like WordPress or Joomla they also have a cache funtionality that you might need to clear when working on this type of stuff.

No, I'm doing straight .shtml files uploaded to the ftp server. So if there is a cache issue it would either be my browser or Powweb.

4-18-12, 10:02 PM	#1
jarigo2 Join Date: Jan 2005 Location: baltimore Posts: 111 Reputation: 5	I'm Stuck - Border around a linked image - not as simple as I thought? Ok so I've googled and seen countless websites instructing the border=0 stuff and even the a img {border:none;} stuff in the style sheet. Nothing works. Please take a look at the social media buttons on the left column of www.pizzapie24x7.com. It seems to me that these nifty 3D icons that I'm using have transparent backgrounds which means that the actual edge of the image is larger than the 3D visible icon itself. Do you see that little gray border? It's driving me crazy! How can I get rid of it? I think it has something to do with the fact that its a transparent PNG. I've saved it as 8 and 24- same thing. John Last edited by jarigo2; 4-18-12 at 10:22 PM.. Reason: added PNG information

4-19-12, 06:39 AM	#2
tpoynton Custom User Title Join Date: Sep 2004 Location: Mass Posts: 2,119 Reputation: 293	are you talking about the +1 and like buttons, or the square ones? i see the gray border around the rectangles (one of which is a div, the other is probably a div generated by js). for the square ones, I only see a little gray on the bottom right corner of two of them, something that can be easily fixed by opening the image in an editing program and erasing. __________________ Edit your php.ini Enable CGI Update your stats Domain Pointing Tool Subdomain Pointing Tool CGI Error Log File a ticket

4-19-12, 08:13 AM	#4
snowmaker   Join Date: Nov 2002 Location: Solomons Island Posts: 3,119 Reputation: 318	You know, I went to your site shortly after your post last night, and saw the border issue you were having. I was about to reply, with some things to try out (that was last night, so I don't remember what I was going to say..), but I had to run off, real life was calling (it always seems to get in the way like that, dammit), but a few hours later when I made it back here, the issue seemed resolved. It could very well be a browser cache issue, that has reared its head here in a few different ways. And that pan pizza looks good! __________________ -bruce /* somdcomputerguy / 'If you change the way you look at things, the things you look at change.'*

4-19-12, 08:31 AM	#5
tpoynton Custom User Title Join Date: Sep 2004 Location: Mass Posts: 2,119 Reputation: 293	must've been looking at a cached version on powweb servers...there is apparently some htaccess you can add to disable caching, sticky at http://forum.powweb.com/showthread.php?t=85763 . Caching is bad when you are trying to see changes, but good for server performance - yours and everyone else's. If you disable caching, I'd recommend re-enabling it by commenting out those lines in the htaccess file. it is an extra step, but only takes a minute or so to open the htaccess file, add/delete comment markers, and upload. __________________ Edit your php.ini Enable CGI Update your stats Domain Pointing Tool Subdomain Pointing Tool CGI Error Log File a ticket

4-19-12, 09:00 AM	#7
snowmaker   Join Date: Nov 2002 Location: Solomons Island Posts: 3,119 Reputation: 318	Well this border: 0px solid #cccc99; translates to this: a solid border 0 pixels wide (invisible..) which is a kinda greyish yellow color (which can't be seen since the border width is 0 px anyway). Basically, the border type and color aren't needed here. edit: oh, and the a:link and a:visited specify visited and unvisited anchors (links). __________________ -bruce /* somdcomputerguy / 'If you change the way you look at things, the things you look at change.'* Last edited by snowmaker; 4-19-12 at 09:02 AM.. Reason: oh..

4-19-12, 08:00 AM	#3
jarigo2 Join Date: Jan 2005 Location: baltimore Posts: 111 Reputation: 5	Dont I look like a fool. Either its a powweb server issue or a browser refresh issue. Last night when I was pulling my hair out trying to figure this out apparently my changes were being made but I wasn't seeing them. This morning I wake up to a bunch of changes with no gray border. Its like my server or my browser doesn't see an immediate change. Oh I'm mad. At least the gray box is gone. It must have been one of the 100 things I tried last night with the image. oh boy.

4-19-12, 08:48 AM	#6
jarigo2 Join Date: Jan 2005 Location: baltimore Posts: 111 Reputation: 5	Now I'm curious as to what did the "box removal" either my photoshop save for web options where I altered the png setting or this in my style sheet: a:link img{ border: 0px solid #cccc99; } a:visited img{ border: 0px solid #cccc99; } I changed the px from 1 to 0. The problem is I really don't know what I'm doing! lol Thanks anyway - its fixed, im running with it!

4-19-12, 09:39 AM	#8
jarigo2 Join Date: Jan 2005 Location: baltimore Posts: 111 Reputation: 5	A small embarrassing update: this was the fix: a:link img{ border: 0px solid #cccc99; } a:visited img{ border: 0px solid #cccc99; } I did it on another blog of mine and the gray box was there with the same images used on the pizza site. I went into style and changed 1px to 0 px and boom it went away. I could have saved about 3 hours last night if I would have known about the server cache issue! ha.

4-19-12, 09:45 AM	#10
snowmaker   Join Date: Nov 2002 Location: Solomons Island Posts: 3,119 Reputation: 318	It's ok to leave it there, unless you need the space the unused 30 or so characters takes up.. __________________ -bruce /* somdcomputerguy / 'If you change the way you look at things, the things you look at change.'*

4-19-12, 09:47 AM	#12
snowmaker   Join Date: Nov 2002 Location: Solomons Island Posts: 3,119 Reputation: 318	You bet man. __________________ -bruce /* somdcomputerguy / 'If you change the way you look at things, the things you look at change.'*

4-20-12, 02:48 PM	#13
entrecon Custom User Title Join Date: Aug 2006 Location: Michigan Posts: 2,669 Reputation: 337	I don't know that you are using one, but if you have something like WordPress or Joomla they also have a cache funtionality that you might need to clear when working on this type of stuff. __________________ ________________________________ Find me on twitter: @entrecon