Help with CSS table border not showing

[kathynewman]

I'm not a whiz with CSS but am learning! However come up with a problem.

I'm trying to create a thin border around our product image.

Product Image Layout has:
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22">
<a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
<a href="<actinic:variable name="ExtendedInfoPageName" />">
</actinic:block>
</actinic:block>
<!-- ProductImage HTML begin -->
<table class="image_border" width="250" height="250" border="0" cellpadding="0" cellspacing="0" border color="2b80c0">
<tr>
<td align="center" valign="middle"><IMG SRC="<actinic:variable name="ProductImageFileName"/>"
ALT="<actinic:variable name="ProductName"/>"
BORDER=0
height="<actinic:variable name="ProductImageHeight"/>"
width="<actinic:variable name="ProductImageWidth"/>"
/></td>
</tr>
<tr>
<td align=center valign="bottom">
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
</a>
</actinic:block>
<actinic:variable name="ExtendedInformationLinks" /></td>
</tr>
</table>


<!-- This file is used to build the product image markup. -->
<!-- ProductImage HTML end -->


the corresponding css is:

table.image_border {
border-left: thin solid #28b0c0;
border-right: thin solid #28b0c0;
border-top: thin solid #28b0c0;
border-bottom: thin solid #28b0c0

}

When I preview product I get no border at all around image and can't work out why.

Could someone point me in the right direction please.

TIA

Kathy

[leehack]

This is your image code:

<IMG SRC="<actinic:variable name="ProductImageFileName"/>"
ALT="<actinic:variable name="ProductName"/>"
BORDER=0
height="<actinic:variable name="ProductImageHeight"/>"
width="<actinic:variable name="ProductImageWidth"/>"
/>

Which has border=0 in there.

The CSS code you have mentioned is styling the table (IOW class is applied to the table), not the image inside the table. To style the image inside the table, you would have a css style like so (this styles any images within the tag you have applied the style to):

table.image_border img {
border-left: thin solid #28b0c0;
border-right: thin solid #28b0c0;
border-top: thin solid #28b0c0;
border-bottom: thin solid #28b0c0
}

You'd also compress that CSS to be:

table.image_border img {
border: 1px solid #28b0c0;
}

But then again if you was only having this class for product images, then create a new one:

.productImage {
border: 1px solid #28b0c0;
}

and apply that to the image:

<IMG class="productImage" SRC="<actinic:variable name="ProductImageFileName"/>"
ALT="<actinic:variable name="ProductName"/>"
TITLE="<actinic:variable name="ProductName"/>"
height="<actinic:variable name="ProductImageHeight"/>"
width="<actinic:variable name="ProductImageWidth"/>"
/>

and then remove your class from the table.

[kathynewman]

Thanks Lee - what I forgot to say (steve just reminded me) is that the border needs to be around the table not just the image as there is another row in the table containing a link to enlarge the image.

Can do it with just border="1" in table but that puts border around the each cell rather than just the outer table which is what I'm trying to achieve.

Kathy

[leehack]

So if you change your opening table tag from this:

<table class="image_border" width="250" height="250" border="0" cellpadding="0" cellspacing="0" border color="2b80c0">

to this:

<table class="image_border" cellpadding="0" cellspacing="0">

and have this as the class:

table.image_border {
border: 1px solid #28b0c0;
height: 250px;
width: 250px;
}

that should work i think, although i'm a bit confused as to whether you want both the table and the image bordered or not.

[los_design]

**Warns Lee..another shameless CS3 plug coming up**

Note to anyone who is using DW, struggle ye not with CSS any longer.

Once you have created your classes, (or indeed before) select the area you are working on and expand the CSS tab (top right) and you can then define away til your eyes bleed.

Its really, really great to learn the basics of css IMHO.

[leehack]

**Warns Lee..another shameless CS3 plug coming up**

LOL Mr DW himself. If 8.5.2 is cleared with it (which it appears to be), then i will be spending, so don't worry your affiliate link is fine with me lol.

[los_design]

LOL Mr DW himself. If 8.5.2 is cleared with it (which it appears to be), then i will be spending, so don't worry your affiliate link is fine with me lol.

lovely jubbly.

Got myself the Masters Collection and a book on cs3 flash pro collecting dust. Must start reading it as flash has come leaps and bounds in the latest release.

Beating the pants of swish AND it now has an inbuilt flv convertor. sweeeeeet

[kathynewman]

Lee that works perfectly thank you.

Sorry not explaining myself very well today - been long - but productive couple of days.

Kathy

[leehack]

Lee that works perfectly thank you.

Sorry not explaining myself very well today - been long - but productive couple of days.

Kathy

My pleasure Kathy, my mom always said 'help the aged cross the road and you will definitely go to heaven'.

[los_design]

Kathy

you got anything to scare the sh^t out of foxes?

[leehack]

It's called a double barrel shotgun DJ.

[los_design]

It's called a double barrel shotgun DJ.

love it....if only..gits trashed my veggie garden this year

[kathynewman]

My pleasure Kathy, my mom always said 'help the aged cross the road and you will definitely go to heaven'.

Oh you cheeky so & so I'm not that old you know

Kathy

[kathynewman]

Kathy

you got anything to scare the sh^t out of foxes?

Nah sorry - been know to feed ours!

Kathy