Thin Border CSS Question

Question Thin Border ( SitePoint Forums CSS )
Updated: 2008-11-23 03:50:02 (8)

Thin Border

I have a two column site. I changed the color in my 2nd column and lost my thin border around it. How do I put it back?

If you want to look. Here it is. http://www.maximizeonlinesales.com/realbio.htm

Thanks.

Answers: Thin Border ( SitePoint Forums CSS )

Thin Border

Hi,

You are using the shorthand border properties so you don't specify border-color just border:

Code:

#column2  {
background-color: #f5fffa;
background-position: ;
border: #555  solid 1px;
color: f0ffff;
vertical-align: top;
width: 25%;
}

Paul

Paul O'B

Thin Border

I'm not clear on this, Paul. Right now I don't have a border (is that the right term? I mean a very thin outline box around all of the shaded area). Before changing the color, I had one. How can I get it back? Thanks.

ealvin

Thin Border

Hi,

Just use the code I gave you above in bold:

Code:

border: #555  solid 1px;

The above will put the border back on your element.

In your original code you had this:

Code:

border-color: #555  solid 1px;

Thats the longhand for the border colour but you've added all the shorthand properties to it for border-width and border-style as well, which is incorrect.

This is the correct longhand:

Code:

 border-width: 1px;
 border-style: solid;
 border-color: #000000;

and this is the equivalent shorthand:

Code:

border:1px solid #000

Hope that makes it clearer

Paul

Paul O'B

Thin Border

Paul, I'm sorry to have so much trouble with this. I replaced the previous code with your code. It looks the same to me. I'm still not seeing the border. I don't know what is wrong. Thanks for your help.

ealvin

Thin Border

Can you provide an updated link (with the code you added) and I'll take another look for you

Paul O'B

Thin Border

It's the same as before. http://www.maximizeonlinesales.com/contact.htm
Thanks.

ealvin

Thin Border

Hi,

heres the offending code from your page:

Code:

#column2 {
background-color: #f5fffa;
background-position: ;
border:1px solid #000
color: f0ffff;
vertical-align: top;
width: 25%;
}

Look closely - can you see what's missing

Just in case you can't see I'll highlight it for you:

Code:

#column2 {
background-color: #f5fffa;
background-position: ;
border:1px solid #000
color: f0ffff;
vertical-align: top;
width: 25%;
}

You've missed the semi colan off the end of the style which is why its not being recognised.

Code:

#column2  {
background-color: #f5fffa;
border:1px solid #000;
color: f0ffff;
vertical-align: top;
width: 25%;
}

(also get rid of that background position if you are not going to use it)

Paul

Paul O'B

Thin Border

Paul, thanks so much. You do a great job of explaining things and I really appreciate your help.

ealvin

- Source: Thin Border SitePoint Forums CSS
- Previous Question: Practical joke played on Palin Physics Help and Math Help - Physics Forums General Discussion
- Next Question: Question about Horiz. Center FAQ SitePoint Forums CSS