layer border won't show

i had it working but now it doesn't

[maxxtraxx]

i have a layer that i want to put a border on using CSS but for whatever reason it doesn't render anymore. it did when i first created the page and the only thing i changed was using a .gif instead of .jpg as the background image for the layer. here's the code for the layer:

<div id="gridField" style="position:absolute; left:325px; top:96px; width:453px; height:159px; z-index:4; background-color: #000000; layer-background-color: #000000; background-image: url(images/gradient_bkg.gif); layer-background-image: url(images/gradient_bkg.gif); border: 1px none #000000;" class="runaround">&nbsp;</div>

help!

thanks

[maxxtraxx]

oh yeah, and here's for the class that i applied to the layer:

.runaround {
border: 1px solid #000000;
font-family: Tahoma, Verdana;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
color: #000033;

}

[MonkeeSage]

Try using a higher z-index, like 100, as some other element may have a higher stack order than "4" and be covering that layer... "An element with greater stack order is always in front of another element with lower stack order." (Cite [w3schools.com]).

You can also get rid of "border: 1px none #000000;" since you are setting the border in the class rule (also, AFAIK, "none" is not a valid border style; valid styles are "solid", "dotted", "dashed", "edge" and "groove").

Other than that I don't see anything that would cause the layer not to display.

Jordan

[Birdman]

I think your problem lies here:

<div id="gridField" style="position:absolute; left:325px; top:96px; width:453px; height:159px; z- index:4; background-color: #000000; layer-background-color: #000000; background-image: url(images/gradient_bkg.gif); layer-background-image: url(images/gradient_bkg.gif); border: 1px none #000000;" class="runaround">&nbsp;</div>

I would just try removing that line, or change it to solid, rather than none.

[garann]

To add to what MonkeeSage and Birdman said, something to look out for is that a setting in your inline CSS will override one in a class or ID definition. So that you can have a generic style in your external style sheet, but override specific attributes if need be. They don't call 'em Cascading for nothing.

(BTW, 'none' is a perfectly good value for border-style; references:
[w3.org...]
[w3.org...]
[w3.org...] )

[maxxtraxx]

right on, thanks guys.

yep, replaced "none" with "solid" and it works just peachy again.

thanks for all the input!

[Birdman]

Glad you got it sorted!

Garann: Yes, it is a valid value, just the wrong one for that situation.