Ryu: Select und Input in einem div

Hallo,

ich versuch jetzt seit ca 30min verzweifelt diese drei Dinge, select input div, zusammen zu kriegen aber leider klappt überhaupt nichts...

Hier ein Beispiel Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>View Vorlage</title>
<style type="text/css">
#chat_bar {
margin-top: -1px;
border: 1px solid black;
background-color: red;
}

#chat\_bar select {  
	width: 130px;  
	height: 20px;  
}  

#chat\_bar input {  
	width: 300px;  
	height: 20px;  
}  
</style>  

</head>
<body>
<div id="chat_bar">
<select name="channel">
<option>Alle</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select><input type="text" name="message" value="Type your message" />
</div>
</body>

Wenn ich das Input Feld auf 18px verkleiner und border:0; definiere klappt es auf Firefox aber im IE steht trozdem etwas über...
Ich hab auch schon rumprobiert und margin und padding auf 0 zu setzen oder auf -1 aber nichts ändert sich.
Es scheint irgendwie das das select Feld immer oben einen nicht änderbaren margin pixel hat und anders herum input einen nicht änderbaren margin pixel unten.

Kann mir jemand mit einer eleganten Lösung aushelfen, ich bin echt am verzweifeln...

mfg
Ryu

  1. Moin!

    Das was Du für einen margin hältst ist vermutlich ein border...

    #chat_bar select {  
      border: 1px solid black;  
      width: 130px;  
      height: 20px;  
    }  
      
    #chat_bar input {  
      border: 1px solid black;  
      width: 300px;  
      height: 20px;  
    }
    

    MFFG (Mit freundlich- friedfertigem Grinsen)

    fastix

    1. dann haben sie wohl durchsichtige border, denn sonst würde ich keinen roten Hintergrund gesehen.

      Ich musste noch die height von input auf 16 ändern und dann klappt es.

      Danke!