image border?

[roN]

Hi,

I have an image and I would like to draw a border around it, I tried:
<p style="border:1px border-style:solid; border-color:#EEEEEE;
background-color:#FFFFFF;"><img src="./images/header.jpg" width="800"
height="130" border="0" ><br>
but I don't get a border, why not? Where am I going wrong?
Thank you!
--
chEErs roN

I'm root, I'm allowed to do this! ;)
keep on rockin'

['sNiek]

roN schreef:

Hi,

I have an image and I would like to draw a border around it, I tried:
<p style="border:1px border-style:solid; border-color:#EEEEEE;
background-color:#FFFFFF;"><img src="./images/header.jpg" width="800"
height="130" border="0" ><br>
but I don't get a border, why not? Where am I going wrong?
Thank you!

Walk this way:

<p><img src="./images/header.jpg" width="800"
height="130" border="0" style="border: 1px solid #EEEEEE;" /><br></p>

Watch the shortened css-markup (and the closure of the p-tag)

--
Niek

[Els]

'sNiek wrote:

<p><img src="./images/header.jpg" width="800"
height="130" border="0" style="border: 1px solid #EEEEEE;" /><br></p>

Watch the shortened css-markup (and the closure of the p-tag)

Watch the border="0" in there - sure you need it? ;-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Jukka K. Korpela]

roN wrote:

I have an image and I would like to draw a border around it,
It's generally best to include the border into the image itself.
It can be done in CSS, too, though.
I tried:
<p style="border:1px border-style:solid; border-color:#EEEEEE;
background-color:#FFFFFF;"><img src="./images/header.jpg" width="800"
height="130" border="0" ><br>
but I don't get a border, why not? Where am I going wrong?

1) You are trying to set the border on the paragraph, not the image.
(There's a difference. A paragraph has 100% width by default.)
2) You have a syntax error in the style sheet (missing semicolon after
"1px"). Use the W3C "CSS Validator" to detect syntax errors in future.
3) You have invalid markup: no alt attribute. This does not affect the
rendering, though, except when the image is not displayed.
4) You are setting background-color without setting color. This may
matter when the alt text, rather than the image, is displayed.

It's questionable whether <p> (paragraph) markup is adequate here. It
might if the alt attribute's value is a full paragraph's worth of text.
More normally, you would write

<div><img
alt="ACME International"
src="images/header.jpg"
style="border: solid #eee 1px; background: #fff; color: #000"
width="200" height="130"></div>

(If the image acts as a top-level heading for the page, use <h1> instead
of <div>.)

[Els]

Els wrote:

'sNiek wrote:

<p><img src="./images/header.jpg" width="800"
height="130" border="0" style="border: 1px solid #EEEEEE;" /><br></p>

Watch the shortened css-markup (and the closure of the p-tag)

Watch the border="0" in there - sure you need it? ;-)

Eh.. and the <br> not having any purpose right before </p> (I think
the original example was taken from a piece of code with more lines
after the image within the same paragraph), and the 'XHTMLisation' of
the image element, while the rest is/was in plain HTML.
Oh, and the missing alt attribute.

Hmm.. yup, that's about it I think :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[roN]

Els wrote:

Els wrote:

'sNiek wrote:

<p><img src="./images/header.jpg" width="800"
height="130" border="0" style="border: 1px solid #EEEEEE;" /><br></p>

Watch the shortened css-markup (and the closure of the p-tag)

Watch the border="0" in there - sure you need it? ;-)

Eh.. and the <br> not having any purpose right before </p> (I think
the original example was taken from a piece of code with more lines
after the image within the same paragraph), and the 'XHTMLisation' of
the image element, while the rest is/was in plain HTML.
Oh, and the missing alt attribute.

Hmm.. yup, that's about it I think :-)

Hmm yup, thank you guys,
I now have following:
<img src="./images/header.jpg" width="800" height="130" border="1"
style="border: 1px solid border-color:#EEEEEE;">
but the border stays black, why? I would like to have it light grey.
Thank you!

--
chEErs roN

I'm root, I'm allowed to do this! ;)
keep on rockin'

[Knud Gert Ellentoft]

roN skrev:

<img src="./images/header.jpg" width="800" height="130" border="1"
style="border: 1px solid border-color:#EEEEEE;">
but the border stays black, why? I would like to have it light grey

<img src="./images/header.jpg" width="800" height="130"
style="border: 1px solid #EEEEEE">
--
Topposter du svar, dvs. skriver dit svar over det citerede,
så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

[Stan McCann]

Knud Gert Ellentoft <el*******@mail.tele.invalid> wrote in
news:v6********************************@dtext.news .tele.dk:

roN skrev:

<img src="./images/header.jpg" width="800" height="130" border="1"
style="border: 1px solid border-color:#EEEEEE;">
but the border stays black, why? I would like to have it light grey

<img src="./images/header.jpg" width="800" height="130"
style="border: 1px solid #EEEEEE">

Yep, got rid of the deprecated border attribute and fixed the css
syntax error (missing semi-colon), but still missing alt which is a
required attribute of <img>. If there is no appropriate alternate text
to use, at least use alt="".

--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU at Alamogordo http://alamo.nmsu.edu/
Now blocking Google Grouper posts and replies.
http://blinkynet.net/comp/uip5.html