Image Border Editing CSS
 

Hey Gurus,

While working in /skin1_c.css to change the color and weight of the product images border, I can't figure out how to make the bottom frame the same weight as the rest of the surrounding border. You'll see what I am referring to here:

http://www.aquadesign.com/Fishing-Shirts-p-1-c-250.html

Here's what my edit looks like:

.ProductBorder {
PADDING: 1px;
BACKGROUND-COLOR: #CCCCCC;
WHITE-SPACE: nowrap;
}

Any ideas what to do to fix the bottom border?

Thanks much,

Re: Image Border Editing
 

Hi Aquaman -

The border is being created not only by the padding in the .ProductBorder class - but I think also by the padding & margins of the image and even possibly the line-hight of the href inside the table cell could have an impact. And to make it more complicated - Firefox and Internet Explorer handle this a little differently - so you could make it perfect in IE and be 1px off in another browser.

That said - there are a few things you can try - you can play with the pad in .ProductBorder, maybe try padding 1px 1px 0px 1px ?

When you make the bottom 0px, and still see a border - that means there must be a pad, margin or line-height somewhere that is still causing spacing.

In Firefox - - the following seems to even out the border. If you are lucky - it will also work in IE:
padding 2px 1px 1px 1px

If none of that works - you may have to start investigating the margin/padding settings of everything inside the table cell, even the href. But know that IE and Mozilla browsers seem to handle margin/padding in table cells differently. You do have a universal selection for padding in your css * {padding:0pt;}- which should clear up some of these kinds of issues - but the margins may still be throwing things off.


Sometimes, if you want precision down to the pixel - it may be easier to just build this kind of thing in css instead of using embedded tables and fighting all the different browser ways of handling this.

Re: Image Border Editing
 

Thanks for your insight and ideas gb2world. It's a bit tricky when browsers display the same code differently. I appreciate your expertise on the matter.

Best regards,