border around images!

Hello i want to get a nice border around images, but not just with the
simple <img src"....." border="1"> tag.
I tried it in CSS.
I did the following:

<div class="img_class">
<img src="./images/img1.jpg" border="0" alt="img1" />
</div>

And in my css i have:

..img_class {
border: 1px solid #999999;
}

It doesn't work 100% as i want it, as the distance to the image from the
bottom border is off. There is some empty space. Even adding margin:0px;
and padding:0px; didn't help.

Anyone a solution for this?

Cheers

On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <oliver_summa (AT) web (DOT) de>
wrote:

Hello i want to get a nice border around images, but not just with the
simple <img src"....." border="1"> tag.
I tried it in CSS.
I did the following:

div class="img_class"
img src="./images/img1.jpg" border="0" alt="img1" /
/div

That's a very poor alt attribute. Try something that will actually
serve as an alternative to the image for those users who can't see it.

And in my css i have:

.img_class {
border: 1px solid #999999;
}

It doesn't work 100% as i want it, as the distance to the image from the
bottom border is off. There is some empty space. Even adding margin:0px;
and padding:0px; didn't help.

Anyone a solution for this?

Why are you specifying a border on the div and not on the image
itself?

<img src="./images/img1.jpg" class="foo" alt="something sensible" />

..foo { border: 1px solid #999999; }

Steve

in comp.infosystems.www.authoring.stylesheets, Oliver wrote:

i want to get a nice border around images, but not just with the
simple <img src"....." border="1"> tag.

CSS:
img {border:1px solid #999}
HTML
<img alt="foo" src="foo">


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

Steve Pugh wrote:

On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <oliver_summa (AT) web (DOT) de
wrote:

It doesn't work 100% as i want it, as the distance to the image from the
bottom border is off. There is some empty space. Even adding margin:0px;
and padding:0px; didn't help.

Anyone a solution for this?

Why are you specifying a border on the div and not on the image
itself?

And if that doesn't fix it, try declaring the image as display: block;

--
Mark.
http://tranchant.plus.com/

Oliver wrote:

Hello i want to get a nice border around images, but not just with the
simple <img src"....." border="1"> tag.
I tried it in CSS.

.img_class {
border: 1px solid #999999;
}

I use this, and it looks ok.

..imgborder {
border-top: 3px outset #d0d0d0;
border-left: 3px outset #d0d0d0;
border-right: 3px outset #a9a9a9;
border-bottom: 3px outset #a9a9a9;
}

Sometimes I use this - looks like a picture frame:

img.inframe {
border: inset 0.35em #999;
}

--
-bts
-This space intentionally left blank.

"Oliver" <oliver_summa (AT) web (DOT) de> wrote

Hello i want to get a nice border around images, but not just with the
simple <img src"....." border="1"> tag.
I tried it in CSS.
I did the following:

div class="img_class"
img src="./images/img1.jpg" border="0" alt="img1" /

If you want to do it in CSS, why are you undermining yourself by doing it in
HTML as well--and with a contradictory value? Get rid of the border
attribute.

/div

And in my css i have:

.img_class {
border: 1px solid #999999;
}

It doesn't work 100% as i want it, as the distance to the image from the
bottom border is off.

Are you sure there isn't a band of white (or transparency) at the bottom of
the image?

There is some empty space. Even adding margin:0px;

and padding:0px; didn't help.

Margin is outside the border, so that wouldn't help.

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Oliver wrote:

Hello i want to get a nice border around images, but not just with the
simple <img src"....." border="1"> tag.
I tried it in CSS.

.img_class {
border: 1px solid #999999;
}

I use this, and it looks ok.

.imgborder {
border-top: 3px outset #d0d0d0;
border-left: 3px outset #d0d0d0;
border-right: 3px outset #a9a9a9;
border-bottom: 3px outset #a9a9a9;
}

Sometimes I use this - looks like a picture frame:

img.inframe {
border: inset 0.35em #999;
}

Shouldn't it be 0.35em inset #999; ? I thought order of attribute values was
signficant with compound properties.

On Mon, 15 Nov 2004 10:04:29 -0500, Harlan Messinger
<h.messinger (AT) comcast (DOT) net> wrote:

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote in message
news:um3md.6712$Mg.1177 (AT) twister (DOT) nyroc.rr.com...

[snip]

border: inset 0.35em #999;

Shouldn't it be 0.35em inset #999; ? I thought order of attribute values
was signficant with compound properties.

It depends entirely on the syntax specified for the property. See
<URL:http://www.w3.org/TR/REC-CSS2/about.html#q6>.

In this case

'border-top', 'border-right', 'border-bottom', 'border-left'

Value: [ <'border-top-width'> || <'border-style'> || <color> ]

inherit

because the values (except inherit) are separated by double bars (||),
they may appear in any order.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

"Michael Winter" <M.Winter (AT) blueyonder (DOT) co.invalid> wrote

On Mon, 15 Nov 2004 10:04:29 -0500, Harlan Messinger
h.messinger (AT) comcast (DOT) net> wrote:

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote in message
news:um3md.6712$Mg.1177 (AT) twister (DOT) nyroc.rr.com...

[snip]

border: inset 0.35em #999;

Shouldn't it be 0.35em inset #999; ? I thought order of attribute values
was signficant with compound properties.

It depends entirely on the syntax specified for the property. See
URL:http://www.w3.org/TR/REC-CSS2/about.html#q6>.

In this case

'border-top', 'border-right', 'border-bottom', 'border-left'

Value: [ <'border-top-width'> || <'border-style'> || <color> ]
| inherit

because the values (except inherit) are separated by double bars (||),
they may appear in any order.

Thanks. The delimiter specifics had escaped me. That's good, one less thing
(the order) to memorize!

Mark Tranchant wrote:

Steve Pugh wrote:

On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <oliver_summa (AT) web (DOT) de
wrote:


It doesn't work 100% as i want it, as the distance to the image from
the bottom border is off. There is some empty space. Even adding
margin:0px; and padding:0px; didn't help.

Anyone a solution for this?


Why are you specifying a border on the div and not on the image
itself?


And if that doesn't fix it, try declaring the image as display: block;

or vertical-align:bottom

--
Gus