PDA

View Full Version : Padded bordered div around images...

Jamesy
12-11-2004, 08:52 AM
Hi,

I am attempting to get a padded border around my images. I currently have a div which wraps around the image, with the necessary border and padding. However - this padding is only kept on the top, left, and bottom edges. On the right hand side, the div extends all the way to the edge of its container?

Website (http://nutternet.com/blog)

The code in question:

.image {
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 5px;
padding: 5px;
}

------------------------------------

<div class="image"><img src="hello kitty christmas.JPG"></div>


If you need to view any more code, just view the source of my webpage - as it is currently 'under construction' the CSS hasn't been moved to a seperate style sheet file.

Thanks for your time,
James.
rmedek
12-11-2004, 09:15 AM
Apply the css to the image, not a division of the page with an image class:
img {
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 5px;
padding: 5px;
}

------------------------------------

<img src="hello kitty christmas.jpg" alt="hello kitty" width="xx" height="xx">
Should do it...
Jamesy
12-11-2004, 11:47 AM
Heya,

Okay, I've just tried that and it displayed as intended in FireFox. However - Internet explorer showed no padding, just a grey border around the image?

Thanks,
James.
coothead
12-11-2004, 06:12 PM
Hi there Jamesy,

If you write partial code, chances are that it will not work correctly in I.E. :eek:
Without a DOCTYPE I.E. renders everything in Quirks Mode :eek:
Get into the habit of writting complete code, like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Strict XHTML Template</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

img {
border: 1px solid #CCCCCC;
margin: 0px 0px 0px 5px;
padding: 5px;
}

/*//]]>*/
</style>

</head>
<body>

<div>
<img src="hello_kitty_christmas.jpg" alt="hello kitty" />
</div>

</body>
</html>
Also do not name your files in this manner...
hello kitty christmas.jpg
...either use the underscore...
hello_kitty_christmas.jpg
...or camel case...
helloKittyChristmas.jpg

coothead
Jamesy
12-11-2004, 08:27 PM
Hi,

Cheers coothead, I think I love you :P!

Hmm, yeah I'm a bit of a bad HTML/XHTML coder... because PHP is my primary language, and I used to use DreamWeaver, I'm in quite bad habbits.

However, I'm gluing myself to the w3schools website thisevening - gunna try and learn a thing or two!

Thanks again,
James.