CODEWITHSUNDEEP
asp.nethtmlcss
broke
broke

Reputation: 8302

CSS- Why this doesn't work?

I have a CSS Class:

.ImageBorder
{
border-style:solid; border-color:Black;
}

I then set the CSS Class to an asp.net Image:

<asp:Image ID="Image3" runat="server" Height="150px" 
                ImageUrl="~/Photos/defaultA.jpg" CssClass="ImageBorder"  />

But it doesn't work. It will work if I put the image in a div tag and then set the divs css class, but I'd rather not do this? What gives?

Upvotes: 3

Views: 490

Answers (3)

David Neale
David Neale

Reputation: 17018

Try giving the border a width:

border: 1px solid black;

Upvotes: 6

Kevin
Kevin

Reputation: 76194

As noted in other answers, you should specify the border-width. You may experience an additional "gotcha", though: asp images may have a "border-width:0" inline styling. In which case, your rule would need the !important declaration to override it:

.ImageBorder
{
border: 1px solid black !important;
}

The !important declaration ignores the normal rules of precedence that CSS follows. Normally, inline styling takes precedence over embedded or external style sheets, which take precedence over the user agent's styling. An important property will take precedence over all non-important properties, regardless of where it is declared.

Using !important can lead to some frustration, however. Suppose you wanted to have an image with all the same qualities as your ImageBorder images, but with a width of 100. You might write

<img src="superBorderedImage.png" class="ImageBorder" style="border-width:100"/>

... But this will not work. You specified with great importance that ImageBorder images have width 1, so your "super bordered image" won't have its special thick border. For this reason, you should use !important only when you're certain you won't need to override it later for special cases.

Upvotes: 5

Chris Rasys
Chris Rasys

Reputation: 1335

As noted by David, you're not specifying any width for your border, which means it has no width and consequently, you can't see it.

You can use the shorthand:

.ImageBorder
{
    border: 1px solid black;
}

or the longhand way:

.ImageBorder
{
    border-style: solid;
    border-color: Black;
    border-width: 1px;
}

Upvotes: 3

Related Questions