I want a black border

vigour

Dear list!

I'm trying to draw a black border around all my pictures. I get a border as the result but... The borders are all kinds of colors, different grays, white and black. It seems like random. What is going on? I want black and only black.

// Create border around image
$black = imagecolorallocate($image,0,0,0);
imageline($newimg, 0, 0, 0, $new_height, $black);
imageline($newimg, 0, 0, $new_width, 0, $black);
imageline($newimg, $new_width-1, 0, $new_width-1, $new_height-1, $black);
imageline($newimg, 0, $new_height-1, $new_width-1, $new_height-1, $black);

NogDog

How about just letting HTML/CSS do it for you on the client?

<img src='picture.jpg' style='border: solid 2px black' alt=''>

🙂

vigour

I know that I can do it that way but the image is also a link so the border will be the wrong color.

NogDog wrote:
How about just letting HTML/CSS do it for you on the client?
<img src='picture.jpg' style='border: solid 2px black' alt=''>
🙂

NogDog

The border will be whatever color and width you specify in the style attribute, which will override the default border color/width for unstyled linked images.

vigour

I just tried your code and my border is blue, some are purple. (link colors) That is on Explorer 6.0 The border gets 2 pixel (I want 1 pixel) wide and brown (I want black) in Firefox. It seems that this method is a mess. I think I will go for the first method instead, if someone can tell me what is wrong with it.

NogDog wrote:
The border will be whatever color and width you specify in the style attribute, which will override the default border color/width for unstyled linked images.

NogDog

vigour wrote:
I just tried your code and my border is blue, some are purple. (link colors)

Works OK for me: http://www.charles-reace.com/test/test.php

Applicable HTML:

<p>No style attribute:<br>
<a href='/Photos/noggin1.jpg'><img src='/Photos/noggin1.jpg' alt=''></a></p>
<p>With style attribute <b>style='border: solid 3px black</b>:<br>
<a href='/Photos/noggin1.jpg'><img src='/Photos/noggin1.jpg' alt=''
style='border: solid 3px black'></a></p>

vigour

Yuor example works for me too in both browsers. But not when I use it on my page. Very strange.

echo '<td width="134" height="136" background="pictures/system/cell_back.jpg"><div align="center""><a href="product_info.php?product_id='.$row["product_id"].'"target="main"><img src="pictures/small/'.$row['bild'].'" title="'.$title.'" style='border: solid 3px black' /></a></div></td>';

NogDog wrote:

Works OK for me: http://www.charles-reace.com/test/test.php

Applicable HTML:

<p>No style attribute:<br>
<a href='/Photos/noggin1.jpg'><img src='/Photos/noggin1.jpg' alt=''></a></p>
<p>With style attribute <b>style='border: solid 3px black</b>:<br>
<a href='/Photos/noggin1.jpg'><img src='/Photos/noggin1.jpg' alt=''
style='border: solid 3px black'></a></p>

bpat1434

You have a syntax error in the code you posted. Change the single quotes around the style to double quotes and you'll be fine.

vigour

That seems to work, thanks. But the strange thing is that I have already tested it before you told me, and it did not work then.

bpat1434 wrote:
You have a syntax error in the code you posted. Change the single quotes around the style to double quotes and you'll be fine.

motherHubbard

vigour wrote:
I just tried your code and my border is blue, some are purple. (link colors) That is on Explorer 6.0 The border gets 2 pixel (I want 1 pixel) wide and brown (I want black) in Firefox. It seems that this method is a mess. I think I will go for the first method instead, if someone can tell me what is wrong with it.

For future reference:
Below is one way to easily code the image and link as described. The key is to add the color to the <a> tag so it does not use default link colors:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Image Border</title></head>
<body>
<a href="somepage.html" style="color:black;">
<img src="1.jpg" style="border-width:2px;border-style:solid;border-color:black;" /></a>
</body></html>