Page 1 of 1

New to CSS Borders Wont Work?

Posted: Fri May 25, 2007 8:37 am
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

Posted: Fri May 25, 2007 8:44 am
by feyd
You need something "solid."

Posted: Fri May 25, 2007 8:52 am
by Pezmc
Why isnt a gif "solid"?

Posted: Fri May 25, 2007 8:53 am
by Kieran Huggins
IMO the border-style property should default to solid, but it does not. Instead it defaults to "hidden".

Posted: Fri May 25, 2007 9:06 am
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?

Posted: Fri May 25, 2007 9:17 am
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;
}

Posted: Fri May 25, 2007 9:30 am
by Pezmc
Thanks!