Jump to content

Can't seem to align a text box with a button


gerkintrigg

Recommended Posts

Hello,

I'm trying to work out how to align the text search box with the search button on http://www.sary.co.uk

 

The thing is that it works in rockmelt but Internet Explorer's having issues... so I sort it for IE and rockmelt displays it wrong.

 

I need something that'll work for all browsers.

 

Any ideas?

 

I've currently got these styles applied to the form elements:

.go_btn {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
background-image: url(furniture/go_btn.jpg);
background-repeat:no-repeat;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 0px;
border-top-color: #F06;
border-right-color: #F06;
border-bottom-color: #F06;
border-left-color: #F06;
height:25px;
width:38px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: capitalize;
color: #FFF;
text-decoration: none;
position: relative;
left: -2px;
}

.search_box {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000;
background-image: url(furniture/search.jpg);
background-repeat: no-repeat;
height: 17px;
padding-left: 25px;
border-top-width: 3px;
border-right-width: 0px;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #F06;
border-right-color: #F06;
border-bottom-color: #F06;
border-left-color: #F06;
}

 

Using Firefox 4, this seemed to work:

 

.go-btn {
     position:relative;
     top:1px;
}

 

EDIT: By the way, you have a lot of unnecessary lines of code. You can put a lot of your styling into one statement. For example instead of all the border-left, border-right etc, you can just do:

border:1px solid #F06;
border-left:0px;

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.