CODEWITHSUNDEEP
htmlcss
corybranan
corybranan

Reputation: 31

Why is there no border on this?

Pretty much explains it. When you toggle invisible div there is no border around it, even though it's specified in CSS

Snippet added below:

$("#button").click(function () {
    $(".hidden").slideToggle(200);
    });
.hidden{
    	background-color:#ccc;
    	width:120px;
    	text-decoration:none;
    	font-size:14px;
    	color:blue;
    	display:none;
    	border:thick;
    	border:green;
    	margin: 1em 1em 1em 1em;
    	padding: 1em 1em 1em 1em;	
    }
    .style2 {
    	border: 1px solid #000000;
    }
<!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
    </head>    
    <body>
      <div class="hidden">woot</div>
    <table style="width: 25%" cellspacing="1" class="style2">
    	<tr>
    		<td class="style2" style="width: 182px"><p id="button"><a href="#">Toggle</a></p>&nbsp;</td>
    		<td class="style2">&nbsp;</td>
    	</tr>
    	</table>
    </body>
    </html>

Upvotes: 0

Views: 232

Answers (7)

SilverHorn
SilverHorn

Reputation: 1026

You don't need to get complicated.

border: 5px solid #000;

Upvotes: 0

Sean Vieira
Sean Vieira

Reputation: 159865

border is a shorthand property -- it's the shorthand way of writing out:

border-width: thick;
border-style: solid;
border-color: green;

Try:

border: thick solid green;

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 53991

Because you're overriding the border property by declaring it twice:

border:thick;
border:green;

The second decleration overrides the first. If you did:

border-style: solid;
border-color: green;

it would be working fine.

A neater solution is to combine the values into a single decleration:

border: 1px solid green;

Also your border style value 'thick' doesn't exist as far as the spec i'm reading states.

Values include: dotted, dashed, solid, double groove, ridge, inset & outset.

Update

I see now that the value 'thick' is meant for border-width in which case it is fine to use this value.

border-style: solid;
border-color: green;
border-width: thick;

or

border: thick solid green;

Upvotes: 3

Hannes
Hannes

Reputation: 8237

you are missing one Border Argument and you apply it wrong, try border: thick solid green; instead of:

border:thick;
border:green;

Upvotes: 1

Nathan
Nathan

Reputation: 11149

Change border: think; border: green; to border: thick green solid;. You need to define those three things to make borders show up.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723398

You are specifying the shorthand border twice. I suspect the bottom is overriding the top with a width of 0.

Combine them:

border: thick green;

Or don't use the shorthand:

border-width: thick;
border-color: green;

Upvotes: 2

adarshr
adarshr

Reputation: 62573

It should be 

border: 1px solid green;

or the below three together

border-style: solid;
border-width: thick;
border-color: green;

Upvotes: 1

Related Questions