CODEWITHSUNDEEP
cssalignmentopera
user706600
user706600

Reputation: 175

Form element not respecting CSS vertical alignment in Opera

I've inserted a Google Custom Search Engine form inside of a navigation bar but I just can't get it to center align in Opera. All browsers are respecting the vertical alignment perfectly (yes! even IE.. wow!).

You can check it out at www.micod.cat (the site's not in English but you can easily view the Search box in the menu bar, right). Opera is pushing the form input field flush against the top and that's incorrect.

Here's the CSS for that element:

#menu li.find form div {
   padding: 0;
   margin: 0;
   height: 50px;
   line-height: 50px;
   vertical-align: middle;
}

Any bright minds to offer some insight please? Thanks a lot!

Upvotes: 5

Views: 2271

Answers (3)

clairesuzy
clairesuzy

Reputation: 27654

The problem is the Doctype, changing it to a strict one or an HTML one fixes it e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

The XHTML transitional Doctype means Opera renders in "Almost Standards" mode, though quite why that would affect this I don't know, - Opera Doctype Switches

Upvotes: 3

thirtydot
thirtydot

Reputation: 228282

I don't know why, or what's going on, but placing an &nbsp; before <input type="q" .. /> fixes it.

You should wait for a better answer, but if one doesn't arrive, at least this works.

Upvotes: 1

Tom Hofman
Tom Hofman

Reputation: 1

It isn't the content you want to align, but the image inside the content.

#menu li.find form div img{ vertical-align: middle; }

and looking at your site you'll need:

#menu ul.nav li.find { padding-top: 10px; }

Upvotes: 0

Related Questions