467,915 Members | 1,146 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,915 developers. It's quick & easy.

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'
Mar 1 '06 #1
  • viewed: 1948
Share:
7 Replies
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
Mar 1 '06 #2
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/
Mar 1 '06 #3
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>.)
Mar 1 '06 #4
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/
Mar 1 '06 #5
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'
Mar 1 '06 #6
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
Mar 1 '06 #7
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
Mar 2 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by JLahm | last post: by
2 posts views Thread by Lars Forslin | last post: by
9 posts views Thread by Karl Burrows | last post: by
1 post views Thread by John Thompson | last post: by
6 posts views Thread by abdullah1983 | last post: by
10 posts views Thread by cjparis | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.