HighDots Forums  

image border?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss image border? in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
roN
 
Posts: n/a

Default image border? - 03-01-2006 , 02:05 PM






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'

Reply With Quote
  #2  
Old   
'sNiek
 
Posts: n/a

Default Re: image border? - 03-01-2006 , 02:10 PM






roN schreef:
Quote:
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


Reply With Quote
  #3  
Old   
Els
 
Posts: n/a

Default Re: image border? - 03-01-2006 , 02:15 PM



'sNiek wrote:

Quote:
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/


Reply With Quote
  #4  
Old   
Jukka K. Korpela
 
Posts: n/a

Default Re: image border? - 03-01-2006 , 02:34 PM



roN wrote:

Quote:
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.

Quote:
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>.)


Reply With Quote
  #5  
Old   
Els
 
Posts: n/a

Default Re: image border? - 03-01-2006 , 02:35 PM



Els wrote:

Quote:
'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/


Reply With Quote
  #6  
Old   
roN
 
Posts: n/a

Default Re: image border? - 03-01-2006 , 03:43 PM



Els wrote:

Quote:
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'


Reply With Quote
  #7  
Old   
Knud Gert Ellentoft
 
Posts: n/a

Default Re: image border? - 03-01-2006 , 03:58 PM



roN skrev:

Quote:
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


Reply With Quote
  #8  
Old   
Stan McCann
 
Posts: n/a

Default Re: image border? - 03-02-2006 , 10:19 AM



Knud Gert Ellentoft <ellentoft (AT) mail (DOT) tele.invalid> wrote in
news:v66c021h36nugu3tv6aptr69vkpg6c5g90 (AT) dtext (DOT) news.tele.dk:

Quote:
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


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.