473,327 Members | 2,065 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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
Jul 21 '05 #1
15 19125
On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <ol**********@web.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

Jul 21 '05 #2
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>
Jul 21 '05 #3
Steve Pugh wrote:
On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <ol**********@web.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/
Jul 21 '05 #4
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.
Jul 21 '05 #5

"Oliver" <ol**********@web.de> wrote in message
news:cn*************@news.t-online.com...
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.

Jul 21 '05 #6

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:um****************@twister.nyroc.rr.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;
}


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

Jul 21 '05 #7
On Mon, 15 Nov 2004 10:04:29 -0500, Harlan Messinger
<h.*********@comcast.net> wrote:
"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:um****************@twister.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.
Jul 21 '05 #8

"Michael Winter" <M.******@blueyonder.co.invalid> wrote in message
news:opshiiimapx13kvk@atlantis...
On Mon, 15 Nov 2004 10:04:29 -0500, Harlan Messinger
<h.*********@comcast.net> wrote:
"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:um****************@twister.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!

Jul 21 '05 #9
Mark Tranchant wrote:
Steve Pugh wrote:
On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <ol**********@web.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
Jul 21 '05 #10
.oO(Harlan Messinger)
"Michael Winter" <M.******@blueyonder.co.invalid> wrote
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!


Yep, in this case. But there are cases (the 'font' shorthand property
for example) where the order is important.

Micha
Jul 21 '05 #11
Beauregard T. Shagnasty schrieb:
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;
}

Hi,
i've never seen inset or outset. Which CSS Version ist that?
Jul 21 '05 #12
Steve Pugh schrieb:
On Mon, 15 Nov 2004 13:31:52 +0100, Oliver <ol**********@web.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.


That's not the real Alt Attribute, just typed in quickly something so u
see what i mean. :)
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; }

I didn't know i can apply it straight to the image, but thanks. It did
do the trick. Cheers
Jul 21 '05 #13

"Oliver" <ol**********@web.de> wrote in message
news:cn*************@news.t-online.com...

Hi,
i've never seen inset or outset. Which CSS Version ist that?


CSS 1.

Jul 21 '05 #14
*Oliver* <ol**********@web.de>:

I didn't know i can apply it straight to the image,


Where/how did you learn CSS then?
I really want to know, because there seem to be many mislead people like
you.

--
"Music is essentially useless, as life is."
George Santayana
Jul 21 '05 #15
Christoph Paeper schrieb:
*Oliver* <ol**********@web.de>:

I didn't know i can apply it straight to the image,

Where/how did you learn CSS then?
I really want to know, because there seem to be many mislead people
like you.

Never really learned it.
I just browsed webpages and read code and learned from existing code.
That's how i approach most languages. I can understand and read code
pretty well. It's quicker to get results and i have to use multiple
languages/scripting languages at the same time. No real time for me to
learn it from the start.
Jul 21 '05 #16

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

33
by: Thomas Mlynarczyk | last post by:
Hi, I'm looking for a way to put a 1px solid border around the image in this link: <a href="some.html"><img src="some.gif"></a> Well, that, by itself, is simple. However, I would like to have a...
0
by: yurps | last post by:
Hello here is my html, if you click the missing image in the first column on the left, the div is shown, when clicked again the div disappears...but the bottom border disappears as well...Is there...
7
by: Bob Bedford | last post by:
I've an image in a cell of a table. I've this CSS: ..dbtable{ width: 600px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border-collapse: collapse; border: 1px solid #000000;
19
by: Eva | last post by:
Hi, I'm really really really new to javascripts and so i couldn't really comprehend thoroughly on the the previous posts regarding this issue. Anyways, I'm setting up a picture album site....
2
by: Stephen | last post by:
Ever since I ported VB my webform to C# the images in the following html have borders. <asp:EditCommandColumn footerText="New Item" EditText="<img src=images/edit.gif (border=0 alt='Edit line...
23
by: cmcdermo | last post by:
I want to change the colour of a border around an image when a user clicks on the image. Not sure how to go about this, i have tried a few things but it doens't seem to work. here is my image....
4
by: goetzs | last post by:
Im trying to create a border around my images that is about 6px of white and then a 1px grey border around that. Im using: background-color: #ffffff; padding: 6px; border: 1px solid #dfdad4; ...
5
by: smittie31 | last post by:
I am having a problem with a border around me html page. The border does not flow thru the whole html page, it cuts off halfway. --> See http://keithborom.com/marlon-sanders CSS STYLESHEET ...
1
by: drappaport | last post by:
When my website is viewed in IE6 on a PC and IE 5.2 on a mac my images that I've used as links have an ugly blue border around them. When you click on them it changes to a purple border. I am trying...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.