block_head分区中的HTML CSS表单（组合框）垂直对齐

Question

EDIT4 : The problem seems to have fixed itself. The combobox was suddenly properly aligned while I was working on another part of the code. I have no idea why it works nom, but hey, it works! :D I can now flag this as SOLVED

I have a form (combobox) just beside a h1 title in a block_head division within a block division that works perfectly. I was able to align it where I want using a CSS file.

On the other hand, I have another identically placed combobox (I mean, I basically used the same code) that comes at the bottom of the block_head, and CSS modifications won't make it move, except for float : left/right.

Here's some code covering the problem.

Combobox that comes out good :

<div class = "block">
    <div class="block_head">
        <div class="bheadl"></div>
        <div class="bheadr"></div>
        <h1>Métriques d'utilisation</h1>
    </div>
    <div class="block_content">
        <!--Bloc CLIENT X-->
        <div class="block small left">
            <div class="block_head">
                <div class="bheadl"></div>
                <div class="bheadr"></div>
                <h2>
                    Client : 
                </h2>
                <form method = "post" action="#" name = "clientForm">
                    <p>
                        <select name = "client" onchange="clientForm.submit();">
                        <?php                       
                            foreach($_SESSION['clientList'] as $client) {
                                $selected = ($client == $_SESSION['currentClient']) ? 'selected = "selected"' : '';
                                echo "<option value = $client $selected>$client</option>";
                            }
                        ?>
                        </select>
                    </p>
                </form>
            </div>
...

Combobox that comes out wrong :

<div class = "block">
    <div class="block_head">
        <div class="bheadl"></div>
        <div class="bheadr"></div>
        <h1>Tests</h1>
        <form id="branch" class="branch" method="post" action="#">
            <p>
                <select onchange="changeBranch(this.value)">
                <?php
                    $app->branch = $this->currentBranch;

                    foreach($GLOBALS['branchList'] as $entry) {
                        $selected = ($entry == $branch) ? 'selected="selected"' : '';
                        echo "<option value=\"{$entry}\" {$selected}>{$entry}</option>
";
                    }
                ?>
                </select>
            </p>
        </form>
        <?php
            //Afficher la sélection de la branche
            //$app->showBranchForm();
        ?>
    </div>
...

CSS code for block_head :

.block .block_head {
    height: 54px;
    line-height: 54px;
    background: url(../images/bhead.gif) 0 0 repeat-x;
    overflow: hidden;
    }

.block .block_head .bheadl {
    width: 20px;
    height: 54px;
    float: left;
    background: url(../images/bheadl.gif) top left no-repeat;
    }

.block .block_head .bheadr {
    width: 20px;
    height: 54px;
    float: right;
    background: url(../images/bheadr.gif) top right no-repeat;
    }

.block .block_head h1 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
    text-shadow: 1px 1px 0 #fff;
    float: left;
    }

.block .block_head h2 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
    text-shadow: 1px 1px 0 #fff;
    float: left;
    }

.block .block_head ul {
    float: right;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    }

.block .block_head ul li {
    display: inline;
    padding: 3px 0;
    padding-left: 20px;
    background: url(../images/phs.gif) 7px center no-repeat;
    }

.block .block_head ul li.nobg { background: none; }

.block .block_head ul li a {
    text-decoration: none;
    color: #666;
    outline: none;
    }

.block .block_head ul li.active a { color: #888; }
.block .block_head ul li a:hover { color: #008ee8; }

.block .block_head form {
    float: left;
    padding: 17px 10px;
    height: 34px;
    line-height: 24px;
    }

.block .block_head form .text {
    width: 129px;
    height: 15px;
    padding: 5px 10px 5px 25px;
    border: 0;
    font-size: 11px;
    color: #999;
    margin: 0;
    background: url(../images/srch.gif) left center no-repeat;
    }

.block .block_head form .text:focus {
    color: #666;
    background: url(../images/srch_.gif) left center no-repeat;
    }

.block .block_head select {
    text-transform: none;
    }

Could anyone guide me as of how I could fix that?

As I mentionned, I tried playing with the CSS file, but it didn't do anything. I also tried moving the form to different block_heads.

I would have posted images, but I need moar reputation -_-'

Thanks!

EDIT : Got some links to pictures of the problem :

Good combobox

Bad combobox

EDIT2 : Added complete block_head CSS code

EDIT3 : Bump!

EDIT4 : The problem seems to have fixed itself. The combobox was suddenly properly aligned while I was working on another part of the code. I have no idea why it works nom, but hey, it works! :D I can now flag this as SOLVED

Answer 1

I would have of asked this in a comment but my current reputation doesn't allow me to :( Do you have link to this example as it's quite hard to understand what your issue is or even posts both sets of CSS from the working and broken one if you don't. Are they both meant to appear side by side? e.g.

===H1=== +++Combo+++

Edit:

Thanks for the additional screen grabs. I think it's happening because of the "P" tag wrapped around the select. Try remove the margin from the P:

.block .block_head form p {
margin: 0;
}

See example here:

http://jsfiddle.net/XBdeL/2/