Link to home
Start Free TrialLog in
Avatar of Gordon Saxby
Gordon SaxbyFlag for United Kingdom of Great Britain and Northern Ireland

asked on

submit button has lost standard appearance

I am developing a web site and making use of CSS to style and position DIVs, etc. The standard HTML buttons (input type="button", input type="submit", etc) have lost their "standard" look and hover action. They have taken on a background colour that does not appear to be in the stylesheet and there is no change when the mouse hovers over.

I have removed the only mention of "input" from the css file but it hasn't helped. Obviously, I know it's difficult to diagnose without seeing the entire CSS and HTML but that's a bit tricky right now. So, assuming that the stylesheet does not mention "form" or "input", what else would affect these buttons?
Avatar of glcummins
Flag of United States of America image

Is there a class or ID associated with the submit button? Something in the form of:

 <input type="submit" class="theClass"...


  <input type="submit" id="theId"...
have you written a css selector that applies to 'input' ?

input {
something: value;
As you know, there are three different places that CSS rules can be applied:

 1. In a global CSS file included via a
Avatar of Gordon Saxby


I have tried a plain button immediately before the end of the body, but it still has changed. I have commented out any "input" entries in the stylesheet but the button still changes.

This is going to be something really obvious and silly, isn't it!!
<input type="submit" name="Submit" value="CHECKOUT">

Open in new window

Can you post the entire head of your document here?

Alternately, can you examine all Javascript that is being run, and see if the styling of the button is being changed at runtime? (An easy way to check this is to disable Javascript in your browser, and then reload the page.)
Ah, found it, the snippet below is at the top of the layout stylesheet. I removed it and the button appearance returned.

It hasn't had a major effect on the overall layout but it has had some. Will I need to set these 3 items everywhere, or can I reinstate this and do something else to maintain the button appearance?
* { 
	padding: 0; 
	margin: 0; 
	border: 0; 

Open in new window

Avatar of glcummins
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
glcummins - changing * ( to html, body { has done the trick! I have had to make some changes to a few classes to regain the correct layout but now the buttons all look like buttons should!