I have a search form and atm it looks like this: search form

As you can see it's not aligned, if I increase the margin-top of the button, the text field moves down too, this also happens if I increase the padding :|

#searchsubmit {
    padding: 7px;
    background: #F0691B;
    font-weight: bold;
    -moz-border-radius: 8px; -webkit-border-radius: 8px;
}

input[type="text"], textarea {
    padding: 5px;
    background: #f9f9f9;
    font-size: 25px;
    -moz-border-radius: 8px; -webkit-border-radius: 8px;
    border: none;
}
  • Can you give us some of the HTML as well. It's hard to tell what the problem is here. Also, the link you added is to localhost, which no one but you can access. Doug almost 9 years ago

3 answers

0
points

It's difficult to be precise without seeing any HTML, but it looks as if vertical-align:middle or vertical-align:baseline applied to the input button might help.

Answered almost 9 years ago by John Catterfeld
Mottie 1134
0
points

I think you might have to resort to absolute positioning... here is a demo:

HTML

<div id="search">
    <textarea></textarea>
    <input id="searchsubmit" type="submit" value="X">
</div>

CSS

#search {
    position: relative;
    top: 0;
    left: 0;
    width: 375px;
}
#searchsubmit {
    padding: 7px;
    background: #F0691B;
    font-weight: bold;
    -moz-border-radius: 8px; -webkit-border-radius: 8px;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 15px; /* 1/2 height of the textarea minus 1/2 height submit button */
    right: 3px;
}

input[type="text"], textarea {
    padding: 5px;
    background: #f9f9f9;
    font-size: 25px;
    -moz-border-radius: 8px; -webkit-border-radius: 8px;
    border: none;
    position: relative;
    top: 0;
    left: 0;
    width: 325px;
    height: 60px;
}
Answered almost 9 years ago by Mottie
0
points

Please, fix the link to your project. http://localhost is the address of your computer. Only you (in this computer) are able to see what you're up to.

In order to share your project, you can use a service such as DynDNS to get a static IP

Answered almost 9 years ago by poscaman