New to CSS Borders Wont Work?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Pezmc
Forum Commoner
Posts: 53
Joined: Mon Nov 06, 2006 2:15 pm

New to CSS Borders Wont Work?

Post by Pezmc »

Hello I am quite new to CSS and am getting a bit of practice however I do not understand borders, my desired effect is a green bar with pink (to make it easy to see) at the top and bottom.
Here is what I have written

Code: Select all

.navbar {
height: 15;
background-color: #A4C530;
border-top-width: 1px;
border-top-color: #FF00FF;
border-bottom-width: 1px;
border-bottom-width: #FF00FF;
}
And my php part:

Code: Select all

<td colspan="6"><img src="spacer.gif" width="196" height="15" class="navbar"></td>
However in both firefox and iexplore it looks as below:
The top being as it is displayed and the lower being the desired effect
Image

Why is it appearing like this? what have i done wrong:?:

Thanks for any help :P
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

You need something "solid."
Pezmc
Forum Commoner
Posts: 53
Joined: Mon Nov 06, 2006 2:15 pm

Post by Pezmc »

Why isnt a gif "solid"?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

IMO the border-style property should default to solid, but it does not. Instead it defaults to "hidden".
Pezmc
Forum Commoner
Posts: 53
Joined: Mon Nov 06, 2006 2:15 pm

Post by Pezmc »

Code: Select all

.navbar {
height: 15;
background-color: #A4C530;
border-top-width: 1px;
border-top-color: #FF00FF;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-width: #FF00FF;
border-bottom-style: solid;
}
Fixed?
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

Pezmc wrote:

Code: Select all

.navbar {
height: 15;
background-color: #A4C530;
border-top-width: 1px;
border-top-color: #FF00FF;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-width: #FF00FF;
border-bottom-style: solid;
}
Fixed?
Try it!

Also, i would do it like this

Code: Select all

.navbar {
height: 15;
background-color: #A4C530;
border-top: #FF00FF 1px solid;
border-bottom: #FF00FF 1px solid;
}
Pezmc
Forum Commoner
Posts: 53
Joined: Mon Nov 06, 2006 2:15 pm

Post by Pezmc »

Thanks!
Post Reply