I am creating a site using XHTML and CSS and have applied a border to my divs, this looks fine in Internet explorer, however when I try and view this in Firefox the border isnt visible and I can't seem to work out why.

I simply used the border: 1px; tag - Does anyone have a way around getting it to display correctly in Firefox?

Any help will be greatly appreciated.

You've set the border-width, but will also want to set a border-style and a border-color. Even better is the shortcut:

border:1px solid #000

or whatever color and style you want to use. W3Schools has a good list of border properties and associated values.

Apologies, I didnt mention that I had used the tags you stated, the exact code I used is:

border-style: solid;
border: 1px;
border-color: #CCC;

Another style may be overriding that... can we see an example of you code?

I would think that would work, though you may need to specify border as border-width:1px.

If that doesn't work is the page online somewhere so we could take a look. It might be something else in the code that's causing the problem and a link to the page would help in debugging it.

Of course, heres the code for the divs I am trying to set a border for..

#leftcontent {
position: absolute;
top: 290px;
left: 200px;
width: 390px;
height: 232px;
background-color: #CCFFCC;
border-style: solid;
border: 1px;
border-color: #CCC;
}
#rightcontent {
position: absolute;
top: 290px;
left: 610px;
width: 190px;
height: 232px;
background-color: #CCFFCC;
border-style: solid;
border: 1px;
border-color: #CCC;

Alternatively heres the stylesheet

Cheers

Yep, I changed border to border-width in the code and the border showed up right away. I prefer the shortcut border:1px solid #ccc though to save some space.

Van Gogh you are absolutely right, it was simply a matter off adding '-width' to the border tag.

However one other issue which Firefox doesnt like is the shadow I have applied to the divs, if you look in the stylesheet I have added another div and aligned it 5 pixels south and to the right of the div to contain content. I set it to z-index: -1 however it doesnt display yet it does it IE, any ideas about this one??

Thanks alot for your help so far, its appreciated!

'border' by itself is the shorthand version of :
border-width: 1px;
border-color: #ccc;
boder-style: solid;

So, you use all 3 or use the single shorthand line of
border: 1px solid #ccc;

The shorthand method keeps the size of your CSS file tidy and small.

You can't use both, as you did

I didnt use both did I?? The border problem has been resolved, that displays correctly now.

Its just the shadow that I am trying to get to display now.

Thanks for all your help though sirs and madams,

I think what's happening with the shadow is it's being displayed behind some of your other elements. Whenever you give something a position it has a default z-index of 0. if you give the shadow divs a z-index of 1 and then give the left and right content divs a z-index of 5 you should see it. The color is very light though so even when it's there it can be difficult to see.

Thanks Steve I'll try that, I know its a light colour, I just wanted a nice subtle shadow to display, I may yet play around with the colour, first things first though I need to bugger to display!

Thanks for all your help.

Spot on again Van Gogh, displays correctly now.

Top man, cheers.

Glad to help.