CSS forms - IE displaying other.

PicoDeath · #1 Jun 7th, 2007, 20:09

Please look at the image below, IE is displaying the button wrong, it should be the same as Firefox, what did i do wrong? Thanks.

HTML

Code: Select all

<div id="searchbox">
            <form id="search" action="" method="post">
                <input name="searchitem" id="textarea" type="input"/>
                <input id="go" type="submit" value=""/> 
            </form>
</div>

CSS

Code: Select all

#searchbox{
width: 173px;
height: 25px;
padding: 2px;
background-image: url(images/searchbox.gif); 
}

form#search {
width: 173px; 
height: 16px;
font-family: "verdana";    
font-size: 7px;    
}

form#search input {
width: 138px;
height: 15px;
border: 1px solid #5e5e5e; 
padding: 0 px;
color: #cfcecb;
background-image: url(images/searchbg.gif); 
background-repeat: repeat-x; 
}

form#search #go {
height: 20px;
width: 30px;
margin-left: 1px;
border: 1px solid #5e5e5e;
background-image: url(images/go.gif); 
}

Lchad · #2 Jun 7th, 2007, 21:32

Try adding this to your css

Code: Select all

* {
    margin: 0;
    padding: 0;
}

It might be that IE is adding padding. So the above code starts you out at zero padding and margins..

PicoDeath · #3 Jun 7th, 2007, 23:38

I've fixed it now, I did it by adding float:right to the submit button.

Also to get rid of the nasty border and fix it's size, I used the following on the submit button again.

PHP: Select all


border: 0px none transparent;
border: 0px hidden transparent;

Lchad · #4 Jun 8th, 2007, 11:28

Thanks for sharing! Glad you fixed it!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
JS and Forms	roki13	JavaScript Forum	1	Jun 6th, 2007 15:28
Forms	nzamusangamungu	Web Page Design	9	Nov 17th, 2006 10:31
Forms	nzamusangamungu	Web Page Design	5	Nov 13th, 2006 13:10
forms	mickc90	PHP Forum	3	Aug 1st, 2006 22:06
forms	atomicant_2005	JavaScript Forum	15	Dec 9th, 2005 16:09

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS forms - IE displaying other.