Hi, habe folgendes Problem.

Ich muss eine Suchmaske erstellen gemäß der Vorlage auf dem angehängten Bild. Allerdings will das ganze nicht so wirklich klappen. Ist je nach browser mal verzogen, mal versetzt. Verzweifel langsam an der Sache. Vielleicht kann es sich ja jemand mal ansehen


html

HTML-Code:

        <div id="searchcontainer">
        	<div id="searchfieldcontainer">
            	<input type="text" name="searchinput" id="searchfield"/>
                <input type="submit" name="suche" value="SUCHE" id="searchbutton" />
            </div>
            <div id="searchoptionscontainer">
            	<div class="searchoptions_left">
					<a href="#">opt1</a>
					<a href="#">opt2</a>
					<a href="#">opt3</a>
					<a href="#">opt4</a>
					<a href="#">opt5</a>
                </div>
                <div id="searchoptions_right">
                    <select name="select" id="select" class="searchdropdown">
                        <option>Relevanz</option>
                        <option>exakte Suche</option>
                        <option>Operatoren</option>
                    </select>
                <a href="#" class="demo-btn" title="Hilfe" 
                onclick="Modalbox.show('<div class=\'warning\')">?</a>            
                </div>
             </div>
        </div>

css

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

#searchcontainer {     width:510px;     height:70px;     margin-top:2px; }   #searchfieldcontainer {     width:510px;     height:40px;     background:#FFFFFF none repeat scroll 0%;     padding: -5px 0px 0px 5px;     text-align:left;     vertical-align:top; }   #searchoptionscontainer {     width: 510px;     height:20px;     text-align:left; }   .searchoptions_left {     width: 400px;     height:20px;     margin-left:0px;     text-align:center; }   #searchoptions_right {     width: 97px;     height:13px;     padding:0px 0px 0px 0px;     margin-left:0px;     vertical-align:middle;     margin-top: 0px;     z-index:1; }   .searchoptions_left a, .searchoptions_left a:visited, .searchoptions_left a:active{     text-decoration:none;     font-weight:bold;     padding:2px 5px 8px; }   .searchoptions_left a:hover {     color: #000000;     bottom: 2px;     text-decoration:none; }   #searchfield {     background-color: #e4e4e4;     width: 399px;     height: 28px;     font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Verdana,sans-serif;     font-size:17px;     color: #333333;     padding-left:3px;     padding-right:3px;     text-align: left;     border: #999999 1px solid;     margin-top:0px; }   #searchbutton {     background-color: #e4e4e4;     width: 95px;     height: 31px;     font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Verdana,sans-serif;     font-size:14px;     font-weight:bold;     letter-spacing:0.1em;     color: #333333;     border: 1px solid #999999;     margin-top:0px; }   .searchdropdown {     background-color:#e4e4e4;     width: 80px;     height: 15px;     font-family: Verdana, Arial, Helvetica, sans-serif;     font-size:8px;     color: #333333; }

und zu guter letzt hier nochmal das bild im Anhang. Sollte vielleicht noch dazu sagen dass die untergrenze der Tabs und des Dropdownfeldes auf einer Linie sein sollen.