PDA

View Full Version : Input type=submit button looking odd


DemonicB
12-10-2007, 08:02 PM
http://img88.imageshack.us/img88/4446/submitbuttonux2.png
The top button is the one that my code renders, yet I'd like it to have as the bottom.

Edit2: Forgot to add that this is only in FireFox and Opera... It renders fine in IE.

this is the code for the button:
<input name="sendit" type="submit" class="knop" id="submit" value="Bericht versturen" />

And I don't think I altered the style in my CSS, just made it wider (came out as that before I made it wider as well...)...

the page is here: http://www.ilfiorfiore.be/apostrophe/contact.php

If you need anything else to help me out, let me know :)
And thanks in advance.


Edit: I know I don't need the class and ID, but I added it to see if it altered anything... It didn't...

_Aerospace_Eng_
12-10-2007, 08:26 PM
You have this in your CSS
.knop {
text-deoration:none;
display:inline;
border:none;
width: 200px;
height: 20px;
}
You also have this
* {
margin:0;
padding:0;
border:none;
}
Removing the border:none; part and the display:inline; part will make it display the same way IE does. IE limits you on the amount of style that can be applied to a form element.

DemonicB
12-10-2007, 10:00 PM
Thank you!

I put the display:inline there in the hope it'd make a difference... It didn't either :P
I removed the border:none part and it's displaying the way it should now... Thanks again!

Arbitrator
12-11-2007, 09:12 AM
I put the display:inline there in the hope it'd make a difference... It didn't either :PThat’s probably because display: inline is the default setting for input elements. Based upon what I see in Mozilla Firefox, there was no need to remove it; it was just redundant.

Tangential Information
You might want to take a good look at the code _Aerospace_Eng_ quoted; you misspelled the name of the text-decoration property. Correcting the error probably wouldn’t affect anything though; I don’t know of any browser that applies text decorations to input elements by default. You may as well remove the declaration since, like display: inline, it seems to be redundant.

DemonicB
12-11-2007, 09:28 AM
Yea, I corrected that one as well when he quoted it... Thanks anyway ;)

Arbitrator
12-11-2007, 09:50 AM
Yea, I corrected that one as well when he quoted it...Heh. Actually, I checked your Web site just before I posted that and the error was still there. It’s gone now though.