Aligning form elemnts in a div

Hello.

I have finally gotten around to replace tables with CSS. A few bumps in the road are therefore to be expected.
The image below is quite self explanitory. I want the text field and the button to line up.


Here´s the CSS for the div in question:

#SearchBox {
   position: relativ;
   width: 293px;
   height: 48px;
   margin-left: 0px;
   margin-top: 15px;
   font-weight: normal;
   padding-left:0px;
   padding-right:0px;
}

Code (markup):

And here´s the div itselfe:

<DIV id="SearchBox" class="alignCenter">
<form method="GET" action="search_results.php">
<input type="text" name="zoom_query" size="25">
<input type="image" src="images/searchbutton.jpg">
</form></DIV>

Code (markup):

Can anyone tell me whats missing please?

Sincerely
Ronny

 

Try with #SearchBox input[type="image"] { margin-top: something; } till you get what you want.

Getting inputs heights and aligns right and crossbrowser is a headache.

 

Both the inputs can be float to left with relatively positioned in the respective style element.

For example:
Markup

<DIV id="SearchBox" class="alignCenter">
<form method="GET" action="search_results.php">
<input[B] id="searchfield"[/B] type="text" name="zoom_query" size="25">
<input [B]id="searchbutton" [/B]type="image" src="images/searchbutton.jpg">
</form></DIV>

Code (markup):

Style

#searchfield{
position:relative;
float:left;
margin:0px;
}
#searchbutton{
position:relative;
float:left;
margin:0px;}
}

Code (markup):

Hope this should resolve the issue, else a live link to view the page would be great.

I am afraid, playing around with the margin for the image (button) may give you inconsistent results on cross-browsers.

 

Hello and thanks for your reply.

What you sugested aligns the field and button as long as the float parameter is "left". When trying to center it the same problem happens again. I suppose I could give a margin-left:10px or something but the problem doesn´t end there As the pic above shows I´d like for the searchfield to be in a box of 63px in height so it corresponds with the background.

Am I making any sence?

Here´s a link: www.secondparadigm.eterya.com/indexcss.php

Can´t post a link properly until I´ve been a member for seven days...

 

Thanks for the help...
I found away around it using margin-left, top and bottom parameters in the style sheet.

At least it looks good from my end now