Get rid of box around add to cart button

[undersun]

I am a newbie to zencart, but fast appeciating its power (but not its complexity!)

anyway, if you go to my site at:
http://www.pageplusdirect.com/zencar...e_plus_refills

The "add to cart" images have a light gray box around them. I don't think this has to do with "a img {border:none;}"

The program just puts a box around certain items, like "add to cart" items.

Can someone help me figure this out? Thanks!

[haredo]

Un,
The old TM template, a nasty bearcat but fun to play with..

Locate this:
includes/templates/12541/css/stylesheet_tm.css

Find this:

input, select, textarea {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-originadding;
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #C0C0C0;
color:#000000;
font-family:tahoma;
font-size:11px;
line-height:13px;
padding:2px;
vertical-align:middle;
}

The highlighted red font above is the fix
1. change 1 to 0

[undersun]

that was the solution!! Thanks haredo!!

[undersun]

This fix brought up another problem - when I made the border: 0px, the borders disappear around text input areas, like "e-mail address" or "password."

How do I work around this problem?

Well, I think I just answered my own question - I removed the input
call altogether from my css, and I guess browsers have an automatic "text input border" default.

At least it is working!

[haredo]

Un,
Your Welcome,
I would do this, just in case you will find additional errors.

input, select, textarea {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-originadding;
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #C0C0C0;
color:#000000;
font-family:tahoma;
font-size:11px;
line-height:13px;
padding:2px;
vertical-align:middle;
}

Change to this:

select, textarea {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-originadding;
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #C0C0C0;
color:#000000;
font-family:tahoma;
font-size:11px;
line-height:13px;
padding:2px;
vertical-align:middle;
}

input {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-originadding;
background:#FFFFFF none repeat scroll 0 0;
border:0px solid #C0C0C0;
color:#000000;
font-family:tahoma;
font-size:11px;
line-height:13px;
padding:2px;
vertical-align:middle;
}

1. That will fix up up. :)

[wgeoghegan]

Here's a tip to finding out what css you need to alter;

Install the Firebug addon for Firefox. It lets you inspect a web page and will show you what line of CSS contains the properties you have selected.

[schoolboy]

In a standard ZC stylesheet, many of the elements that SHARE a declaration are "nested" together, as this can save a lot of space.

So, it is not unusual to have to "split up" these nestings to give one particular class or id its own declaration.

eg:

#firstItem, #secondItem, #thirdItem {
border: 1px solid #cccccc;
}

In the above, ALL (#firstItem, #secondItem, #thirdItem) will have a solid border of 1px in color #cccccc .

Let's say you want #secondItem to NOT have a border...

#firstItem, #thirdItem {
border: 1px solid #cccccc;
}

#secondItem {
border: none;
}