White border around image within black border 1

[followtheboat]

Good afternoon,

I'm trying to get a thin 1px white border around an image which sits within a thicker black border of 15px. Any clues on how to add in the white border to this code, which currently only draws the thick black border:

.wp-caption.aligncenter  {
	background-color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	margin-top: 10px;
	border: 20px solid #000000;
}

An example of this code in action, without the proposed white order, can be found here:

http://www.followtheboat.com/2008/07/03/banu-of-yacht-plaza-hotel-fethiye-turkey/

[]

http://www.followtheboat.com

[]
tales [not just] from the high seas

 

[cygmorg]

put a border around the image and a border around the div like this:

.div {
border: 15px solid black;
}
img {
border: 1px solid white;
}

Hope this helps

Gareth

 

[followtheboat]

Hi Gareth,

Thanks for your reply. The problem is that this is a Wordpress template and it calls up this bit of CSS when I insert a centre-aligned image. Therefore everything has to fall within the '.wp-caption.aligncenter' tag, doesn't it?

[]

http://www.followtheboat.com

[]
tales [not just] from the high seas

 

[ChrisHunt]

Something like this would work on a single image:

img.blackwhiteborder {
   background: #FFF;
   padding: 1px;
   border: 15px solid #000;
}

but I see your markup is a bit more complex:

<div id="attachment_2107" class="wp-caption aligncenter" style="width: 575px"><img class="size-full wp-image-2107" title="115" src="[URL unfurl="true"]http://www.followtheboat.com/wp-content/uploads/2009/01/115.jpg"[/URL] alt="Banu of Yacht Plaza Hotel" width="575" height="383" /><p class="wp-caption-text">Banu of Yacht Plaza Hotel</p></div>

Assuming you want the caption text white-on-black inside the narrow white border, I suggest the following:

.wp-caption.aligncenter  {
    background-color: #FFF;
    padding: 1px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 15px solid #000000;
}

.wp-caption.aligncentre p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    background: #000;
    color: #FFFFFF;
    margin: 0;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ChrisHunt]

Oh, and you may need this too:

.wp-caption.aligncentre img {
   display:block;
   margin: 0;
   padding: 0;
   background: #000;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[followtheboat]

Chris to the rescue. Spot on! Thank you!

[]

http://www.followtheboat.com

[]
tales [not just] from the high seas