We help IT Professionals succeed at work.

submit button has lost standard appearance

Gordon Saxby
Gordon Saxby asked
on
301 Views
Last Modified: 2008-07-17
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?
Comment
Watch Question

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

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

or

  <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
Gordon SaxbySenior Web Developer

Author

Commented:
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.)
Gordon SaxbySenior Web Developer

Author

Commented:
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

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Gordon SaxbySenior Web Developer

Author

Commented:
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!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.