[CSS] Problema no Safari com as <select>

[Pikatxu]

Boas,
estou a ter um problema com o alinhamento de uns list menus(apesar de parecer que é a imagem ao lado. Podem ver pelo espaço que fica para a imagem de cima) no safari.

IE7:

Firefox:

Safari:

Tudo a funcionar certo no Opera e IE6 também.

Abaixo o codigo:
HTML

<img src="imagens/pt/entrydate.gif" class="label" /><br />

    <select name="data1" class="select3">
    <option value="0">Abril 2008</option>
    </select>

<select name="data2" class="select4">
    <option value="0">03</option>
    </select>

<img src="imagens/dateD.gif" />
    <img src="imagens/pt/exitdate.gif" class="label" /><br />
    
<select name="data1" class="select3">
    <option value="0">Abril 2008</option>
    </select>

<select name="data2" class="select4">
    <option value="0">03</option>
    </select>
<img src="imagens/dateD.gif" />

CSS

#sidebar .label {
    margin:0px 2px 5px 5px;
}

#sidebar .select3 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9px;
    width:123px;
    color:#aea899;
    margin-bottom:6px;
    margin-right:10px;
}

#sidebar .select4 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9px;
    width:53px;
    color:#aea899;
    margin-bottom:6px;
    margin-right:7px;
}

Já tentei forçar border, padding e margin 0 aos selects mas continuam a dar sempre aquele espaço para cima que não consigo perceber de onde vem.

Obrigado

 

[hostmake]

Isso vem do Safari, e como não há selectors para o mesmo, boa sorte com isso lol.

 

[alfinete]

podes tentar usar div's e por possições nas mesmas, com position:absolute;

dentro das mesmas poes essas ddls, ou <selects>

do tipo crias uma div com o tamanho do width da pagina, dentro dessa crias mais uma para cada select, esta contem mais duas uma para a label do nome da ddl e outra para a ddl, mais ou mesnos isto.

<div id="1">
  <div id="2">
      <div id="3">  label com o  nome ddl 1 </div> 
      <div id="4">  ddl2 </div>
   </div>
   <div id="2">
      <div id="3">  label com o  nome ddl 2 </div> 
      <div id="4">  ddl2 </div>
   </div>

</div>

#1
{
position:relative;
left:0px;
top:0px;
width:800px;
height:70px;
float:left;
}

#2
{
position:relative;
left:10px;
top:10px;
width:800px;
height:30px;
float:left;
}

#3
 {
 position:relative;
 left:0px;
 top:0px;
 width:200px;
 height:30px;
 float:left;
 }

#4
  {
  position:relative;
  left:120px; /*se o tamanho da label do nome do campo ou ddl tiver 100px de tamanho(+/-)*/
  top:0px;
  width:200px;
  height:30px;
  float:left;
  }

do tipo não testei , mas o que fix foi criar uma div geral(#1) (tamanho total do formulario), duas secundarias (#2), em que cada uma dessas vais ter mais duas uma para o nome do campo e outra para o campo em si (#3,#4)

assaim vais ficar com o "nomedocampo ddl"

espero que tenha ajudado

 

[Pikatxu]

Obrigado alfinete, na realidade já tinha resolvido com algo semelhante:

<div class="floater">
<select name="data1" class="select3">
   <option value="0">Abril 2008</option>
   </select>

<select name="data2" class="select4">
    <option value="0">03</option>
    </select>
</div>
<div class="floater">
<img src="imagens/dateD.gif" />
</div>
<div style="clear:both;"></div>

A "floater" é um simples float:left.


Já agora, se isto servir para alguém, isto acontece porque após uma <select> o Safari alinha tudo o que vier à frente pelo meio do drop menu, todos os outros browsers alinham pela linha debaixo do menu.

Obrigado a todos.

 

[SoundSurfer]

Experimenta definir novamente todos os paddings e margins para o select, para anular os que o browser pode estar a colocar por omissão.