My two button classes are clashing and I don't know how to fix it

My two button classes are clashing and I don’t know how to fix it. do I need make a new input type or something if so how do I do that.


/* button */
a.button, input.button {
	cursor: pointer;
	color: #FFFFFF;
	line-height: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	background: url('../image/button.png') repeat-x;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
	display: inline-block;
	text-decoration: none;
	padding: 6px 12px 6px 12px;
}
input.button {
	margin: 0;
	border: 0;
	height: 24px;
	padding: 0px 12px 0px 12px;
}
a.button:hover, input.button:hover {
	background-position: 0px -0px;
}
.buttons {
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	overflow: auto;
	padding: 6px;
	margin-bottom: 20px;
}
.buttons .left {
	float: left;
	text-align: left;
}
.buttons .right {
	float: right;
	text-align: right;
}
.buttons .center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/*button_add_small*/
a.button_add_small, a.button_add_small:visited, input.button_add_small{
	margin-top: 3px;
	background: url('../image/button_add_small.png') no-repeat left center transparent;
	padding:5px;
	text-decoration: none;
	cursor:pointer;
}

a.button_add_small {
	display: inline-block;
	text-decoration: none;
	padding: 6px 12px 6px 12px;
}
input.button_add_small {
	margin: 0;
	border: 0;
	height: 0px;
	padding: 0px 12px 0px 12px;
	margin-left:40px;
}
a.button_add_small:hover, input.button_add_small:hover {
	background-position: 0px -24px;
}
.button_add_small {
	border: 0px;
	overflow: auto;
	padding: 6px;
}





Well you have this

[COLOR=#333333]a.button_add_small, a.button_add_small:visited, input.button_add_small{[/COLOR]	margin-top: 3px;
	background: url('../image/button_add_small.png') no-repeat left center transparent;
	padding:5px;
	text-decoration: none;
	cursor:pointer;
}

That groups both the <a> and <input> version of the button_add_small class. You know the classes are clashing so why not just avoid that?

I fixed it


/* button */
a.button, input.button {
	cursor: pointer;
	color: #FFFFFF;
	line-height: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	background: url('../image/button.png') repeat-x;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
	display: inline-block;
	text-decoration: none;
	padding: 6px 12px 6px 12px;
}
input.button {
	margin: 0;
	border: 0;
	height: 24px;
	padding: 0px 12px 0px 12px;
}
a.button:hover, input.button:hover {
	background-position: 0px -0px;
}
.buttons {
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	overflow: auto;
	padding: 6px;
	margin-bottom: 20px;
}
.buttons .left {
	float: left;
	text-align: left;
}
.buttons .right {
	float: right;
	text-align: right;
}
.buttons .center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/*button_add_small*/
a.button_add_small, a.button_add_small:visited, input.button_add_small{
	margin-top: 3px;
	background: url('../image/button_add_small.png') no-repeat left center transparent;
	padding:5px;
	text-decoration: none;
	cursor:pointer;
}

a.button_add_small {
	display: inline-block;
	text-decoration: none;
	padding: 6px 12px 6px 12px;
}
input.button_add_small {
	margin: 0;
	border: 0;
	height: 0px;
	padding: 0px 12px 0px 12px;
	margin-left:40px;
}
a.button_add_small:hover, input.button_add_small:hover {
	background-position: 0px -24px;
}
#button_add_small {
	border: 0px;
	overflow: auto;
	padding: 6px;
	background: url('../image/button_add_small.png') no-repeat left center transparent;
    margin-left: 37px;
    margin-top: -1px;
}


But I’m not sure if I did it the right way ?

It’s impossible to tell how correct that CSS is without the HTML to go along with it. You also didn’t really say what you did to fix it. Either way, if you link us to a live test site or give us the HTML to reproduce this problem, we can give our input as to whether it was the optimal solution.

Oh I’m sorry I forgot to write all that. so I am using opencart and I need to make a new button “add to cart” for the home page so I copied the old button classes but they were clashing even though I rename them and and tweaked them a little. the product page and check page buttons like the home page buttons and if I changed the input.button to input.button_add_small then would change back to default. here is the website http://update.bharstore.com/

so how did it fix it I just added the background: url(‘’) to the .button_add_small instead of a.button_add_small. and then i chamged the .button_add_small to #button_add_small just because I’m use to making everything an id.



/*button_add_small*/
a.button_add_small, a.button_add_small:visited, input.button_add_small{
	margin-top: 3px;
	background: url('../image/button_add_small.png') no-repeat left center transparent;
	padding:5px;
	text-decoration: none;
	cursor:pointer;
}

a.button_add_small {
	display: inline-block;
	text-decoration: none;
	padding: 6px 12px 6px 12px;
}
input.button_add_small {
	margin: 0;
	border: 0;
	height: 0px;
	padding: 0px 12px 0px 12px;
	margin-left:40px;
}
a.button_add_small:hover, input.button_add_small:hover {
	background-position: 0px -24px;
}
#button_add_small {
	border: 0px;
	overflow: auto;
	padding: 6px;
	background: url('../image/button_add_small.png') no-repeat left center transparent; <--- here is where I added the image
    margin-left: 37px;
    margin-top: -1px;
}

If you were referencing the wrong element selector to begin with (referencing a class instead of the ID) , and you went and fixed that, yes that’s the best way. Good job on figuring it out.

No I just changed it to change it.

That works too :).

lol yeah and thank you for helping me out I really appreciate it

bharstore,

You do realize that an ID can appear only once on a page, don’t you?

If you were using the same ID twice, then changing one of them to a class or to a unique ID was the proper resolution.

Personally, I avoid IDs like the plague and only use them where needed (for JavaScript or on-page links).

Cheers.

1 Like

and I avoid Classes like the plague I don’t know why I’m slowly teaching my self JavaScript I hope my ID’S come in handy. So why don’t you use ID’s ?? did a teacher in school say not to use them, I learn html and css just by looking at wordpress and playing around with it so I don’t know all the rule I’m sure I break most of them if their are any.

No, no formal teachers. Personal experience and the opinions of persons with whom I’ve spoken. (I’m older than I appear in my picture. meow.)

I do not use IDs promiscuously because they are “weighty”, “heavy-handed” compared to classes. To me, an ID carries too much specificity for comfort. A selector can only have one ID. An ID can only be used once on a page. One ID “outweighs” a trainload of classes. Requires heavier code to override styles assigned by an ID (such as the !important modifier).

I prefer to use IDs only where they are needed by JavaScript, by HTML as a fragment identifier, or by outside utilities (plugins) or server related code (whatever that might mean), and apply styles via classes. Yes, of course I make exceptions… but very few and not very often.

Classes can be combined and/or repeated. That’s powerful. Classes are more easily overridden/modified by other classes as needed. Bottom line, though, is that I like to keep it simple so I prefer to code with classes and add IDs where needed.

<opinion>
IDs are popular with new coders because the word “id” only contains 2 letters, whereas the word “class” requires one to break a sweat, waste time, and flirt with carpel-tunnel syndrome to type 5 letters. :eek: Something about the path of least resistance versus the logic of writing code seems to dominate inexperienced thinking. That’s what I believe, anyway. Am I wrong?
</opinion>

Did you know that an ID can appear only once on a page? (you overlooked that question :slight_smile: )

Why do you prefer to use IDs instead of classes?

I didn’t know that id’s were “weighty” and I just started using them when I first started playing around HTML. I just saw that they both did the something and in must premade layouts they used classes, so not to mix or get code messed up I used id’s.

I agree with Ron and tend to only use IDs where it structurally makes sense. Otherwise I really do like classes.

[quote=“ronpat, post:10, topic:44002”]
You do realize that an ID can appear only once on a page, don’t you?[/quote]
Finally! I finally understand the difference. Thank you ronpat.