How to get drop-down box, field/box, and view button to all align horizontally?

HTML & CSS
1

I have this code, and I’d like some help styling it, please. Not recreate it all, just add to the existing.

  1. How do I get ‘Enter Search Words’ to align in the middle of the field/box instead of the top (see attached)?

  2. How do I get the drop-down box, the field/box, and the view button to all aligned horizontally/evenly?

  3. Can you give me an example on how to style the Drop-Down box (options)?

Here’s the current code:

.form_label{
}
#keyword{ 
width: 200px;
height: 38px;
border-width: 1px;
border-color: #800000;
font-color: #800000;
margin:0px 0px 0px 0px;
padding-left: 30px;
border-color:#d9d9d9;
background: url("../images/magnifying-glass.png") no-repeat left
}
#keyword:focus {
outline: none;
}


<form method="get" action="../search1.php">
<select size="1" name="type" />
<option value="1">CHANNEL 1</option>
<option value="2">CHANNEL 2</option>
<option value="any string here">ALL</option>
</select>
<input autocomplete="off" id="keyword" name="keyword" value="Search  [var.site_name]" onclick="clickclear(this, 'Enter Search Words')" onblur="clickrecall(this,'Enter Search Words')"  />
2
  1. It’s aligned in the middle for me
  2. You didn’t give the code for hte submit, but the dropdown is aligned in the middle for the search bar. No idea about the submit since you didn’t add it.
  3. Styling options will leave you with headaches and frustrations. Look to other options.

Here is my code showing what I say is true. Also, font-color CSS doesn’t exist. It’s just “color”. The border style can be shortened. You can see it in my CSS below.

<!doctype html>
<html>
<head>
<style>
.form_label{
}
#keyword{ 
width: 200px;
height: 38px;
border:1px solid #800000
color: #800000;
margin:0px 0px 0px 0px;
padding-left: 30px;
border-color:#d9d9d9;
background: url("../images/magnifying-glass.png") no-repeat left
}
#keyword:focus {
outline: none;
}
</style>
</head>
<body>
<form method="get" action="../search1.php">
<select size="1" name="type" />
<option value="1">CHANNEL 1</option>
<option value="2">CHANNEL 2</option>
<option value="any string here">ALL</option>
</select>
<input autocomplete="off" id="keyword" name="keyword" value="Search  [var.site_name]" onclick="clickclear(this, 'Enter Search Words')" onblur="clickrecall(this,'Enter Search Words')"  />
  </body>
</html>
3

Thanks for your reply.

  1. It is aligned in Chrome, but not IE

  2. Again not aligned in IE. Here is the code for "Submit:

    #submit {
    width: 169px;
    height: 21px;
    border-style:solid;
    border-width: 1px;
    border-color:#cccccc;
    background: #ffffff;
    }

  3. Finishing styling this, would probably be the simpler route. Any help will be appreciated.

The code you provided looks exactly like mine (except color:)

I look forward to additional help thanks.

4

Apologies. You never mentioned what browser was wrong. Also, which version of IE? 11 is fine.

Have you considered using display:table-cell to achieve the vertical align aspect?

5

Thank you for your reply. Much appreciated.
IE8
Can you, please, provide an example of how I’d could use that here?
Much thanks again.

6

Add this in (obviously make it more specific than this for the live site)

form select, form input
{
  display:table-cell;
  vertical-align:top;
}

Change it from top, to middle, to bottom and see how it aligns.

7

Ryan, thanks again.
However, I don’t get what you mean by “form select, form input”?

8

What don’t you understand? Not to be rude, but are you a beginner at CSS (and HTML?)

form select,form input

Those are two rules that are combined for ease (and to not repeat code)…First selects all <select> inside of <form> elements…same thing with <input> for the second part of the rule.

9

Thanks for your suggestion and guidance. That was a BIG help, much thanks for that.
But I’m still trying to vertically align the text off of the top of the keyword field/box.
I’ve tried a few variations including:

<input autocomplete="off" id="keyword" name="keyword" value="Search  [var.site_name]"     **style="vertical-align:text-middle**   onclick="clickclear(this, 'Enter Search Words')" onblur="clickrecall(this,'Enter Search Words')"  />

without success. Any ideas regarding that will be greatly appreciated.

10

vertical-align:text-middle

Lol, text-middle value does not exist :slight_smile: . You could try setting the line-height for the input to be around the height of the input. E.g. if the input is around 16px, make hte line-height:16px. Or you could set top/bottom padding to make it appear vertically centered.

11

Yes, well, it was worth a try.
The problem, it seems with doing line height is that effectively corrects IE correctly, but throws Chrome off.

12

When I add the line-height, Chrome doesn’t break. Is there any chance you have this online?

13

I find it more consistent to use padding and a line-height just bigger than the font-size.

Something like this seems to work better for all browsers.

height: 20px;
font-size:16px;
line-height:20px;
padding:9px 0 9px 30px;
14

Line-height worked great ( I has something wrong - imagine that) ! Thanks so much again for all the replies.
Should I start another post to ask this:
How can I get the “Enter Search Words” text to disappear when the field/box is accessed to enter new text?

15

You can use the placeholder=“” attribute. Treat it like value=“”

It won’t disappear until they type though. I’m fine that personally. Sometimes I forget what the boxes on pages are for.

1 Like
16

Much, much thanks again

17

Not a problem. It’s what we are here for :slight_smile:

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.