472,960 Members | 1,865 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

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
7 2168
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: JLahm | last post by:
I have defined a class for my images called .image that specifies the default border color, width and style. I'd like to be able to have the pseudo elements link, visited and active have one color...
2
by: Lars Forslin | last post by:
I have a problem with making image hyperlinks work in Firefox/Netscape. It seems the clickable area is narrowed down to a small area in the middle of the image, around the edges or gone altogether....
9
by: Karl Burrows | last post by:
I am working on a Website for a non-profit group and for some reason I have one link that doesn't want to cooperate. All the image links work fine with the onmouseover and onmouseout script except...
1
by: John Thompson | last post by:
We're sooo close. When we load the page to upload the image, all of the prms go through except the binary image data. Using SQL server with the data type set to "image". Please help! Thanks-...
6
by: abdullah1983 | last post by:
Hi Guys, I need some clarification regarding the problem with safari browser. Please find my code below. I'm setting the image src, mouseover and mouseout using javascript. The mouseover and...
10
by: cjparis | last post by:
Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE...
0
by: punitshrivastava | last post by:
Hi to All, I am Punit Shrivastava.i created one html page for this i cde like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
11
by: Evolution445 | last post by:
I got this code, and it somehow doesnt work. <TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center"> <TR> <TD background="{image-path}navfiller.gif" HEIGHT=40...
2
by: studentofknowledge | last post by:
For some unknown reason ie is placing images I have in a div in a weird way. One image is overlapping another but this problem is not occuring in mozilla. I have looked at my code over and over again...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
2
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

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.