2 replies [Last post]
dugal
dugal's picture
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

I have been knocking my head against a wall here. I have styled all images in my content divs to have a 5px grey padding.

Now I have an image, a buy now button, that I don't want to have the padding as it's round and doesn't need a frame. I have a selector for button that looks like this:

.category2 .button { background: black; float: right; margin: 0 2em 2em 0; padding: 0; }

all of the selectors work but background and padding? it is floated right, and has the correct margins, but still has the darn padding! any help would be appreciated. Thanks.

Here is the HTML

OTHERWORLD | Store - DD Series




@import url("css/style.css");

greenermountain.net
simple web solutions for simple needs

Store - DD Series - Demons & Devils

Please click on any of the pictures below for an impressive and larger picture.

Demon Idol

DD1 - The Demon Idol

This model is a 2-part casting in resin, sculpted by Paul Muller. It is 84mm tall to the tip of its horns. Supplied with a selection of coloured gemstone eyes.

Price - £18.00

buy now

And the CSS
/* CSS Document */

* {
margin : 0;
padding : 0;
font-style: normal;
font-weight: normal;
}

body {
background: #000 url(../images/shared/stars-bg.jpg) repeat-y;
font-size: 62.5%;
font-family:Arial, Helvetica, sans-serif;
color: #ccc;
text-align:center;
}

p {
margin: 1em 0 2em 0;
font-size: 1.5em;
line-height: 1.6em;
}

h1, h2, h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
color:#66ea00;
font-size: 2.8em;
font-weight:normal;
line-height: 100%;
width: 575px;
height: 151px;
position: relative;
margin: .5em auto 2em auto;
}

h2 {
font-size: 2.5em;
letter-spacing: 0;
line-height: 1.0;
color: #ff6600;
margin-bottom: 0.8em;
}
/*
h3 {
font-size: 2em;
letter-spacing: 0;
color: #089dea;
margin-bottom: 1em;
margin-top: 1em;
}
*/

h4 {
font-size: 1.6em;
color: #ff6600;
margin: 2em;
}

a, a:visited, a:link, a:visited, a:active {
color:#ffffff;
font-weight:bold;
}

a:hover {
color: #ff6600;
}

a img {
border: none;
}

#wrapper {
width: 85em;
margin: 0 auto;
text-align: left;
}

#content {
width: 67em;
float:right;
margin-bottom: 1em;
}

#column2 {
width: 14em;
float: left;
margin-bottom: 1em;
}

#footer {
clear: both;
padding-top: 3em;
}
/* ----------------- header ------------------------*/

h1 span {
background: url(../images/shared/omlogo.jpg) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

/*------------------ content -------------------------*/

#content img {
padding: 5px;
background: #cccccc;
}

/* ----------------- mainnav list -------------------*/

#mainnav {
list-style-type: none;
font: 1.7em "Lucida Grande","Trebuchet MS","Tahoma","Helvetica","Arial",sans-serif;
padding-top: 3em;
}

#mainnav li {
margin-bottom: 0.8em;
line-height: 1em;
}

#mainnav li a:link, #mainnav li a:visited, #mainnav li a:hover, #mainnav li a:active {
display: block;
text-decoration:none;
padding-left: 0.5em;
color: #ffffff;
border-left: 2px solid #cccccc;
}

#mainnav li a:hover {
color: #ff6600;
border-left: 2px solid #ffffff;
}

body.home #mainnav a#home, body.store #mainnav a#store {
color: #ff6600;
border-left: 2px solid #ff6600;
/*text-decoration: underline;*/
}

* html #mainnav li a {
width: 100%;
} /* I hate hacks!! */

/*--------------- footer -------------------*/

#footer p {
font-size: 1.2em;
margin-right: 4em;
display: inline;
}

#footer a {
text-decoration: none;
color: #ffffff;
}

#footer a:hover {
background: #009900;
color: #000000;
}

/*--------------------- store -----------------------*/

.category {
border: 1px solid #cccccc;
/*height: 25em;*/
width: 50em;
margin: 2em auto;
background: url(../images/shared/box-gradient.gif) top left repeat-x;
overflow: auto;
}

.category img {
margin: 3em;
float: left;
}

.category2 {
border: 1px solid #cccccc;
/*height: 25em;*/
width: 50em;
margin: 2em auto;
background: url(../images/shared/side-gradient.gif) top left repeat-y;
overflow: auto;
}

.category2 img {
margin: 3em;
float: left;
}

.category2 .button {
background: black;
float: right;
margin: 0 2em 2em 0;
padding: 0;
}

/*--------------------- global -----------------------*/

.fr {
float: right;
margin: 2em 0 2em 3em;
}

.fl {
float: left;
margin: 2em 3em 2em 0;
}

/*
div {
margin:0;
padding:0;
outline:1px solid red;
}
*/

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's simply a case of

It's simply a case of specificity, look again at the rulesets, read then through pay attention to the original rules for the image applied if a child of a named/IDed element then look at how you are trying to reverse those styles by selecting on a class that has a named parent that carries a class. An ID and specific element is going to outweigh two classes, stick the id parent in front of the two class selectors to balance and perhaps add the class .button to it's element img.button.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dugal
dugal's picture
Offline
Enthusiast
Last seen: 12 years 12 weeks ago
Joined: 2007-08-06
Posts: 149
Points: 0

Thank you sir. replacing

Thank you sir.

replacing .category2 with #content did it, end code below

thanks again Hugo!

#content .button { background: black; float: right; margin: 0 2em 2em 0; padding: 0; }