1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

[CSS] Problema no Safari com as <select>

Discussão em 'Web Development' iniciada por Pikatxu, 13 de Agosto de 2008. (Respostas: 4; Visualizações: 1395)

  1. Pikatxu

    Pikatxu Power Member

    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:
    [​IMG]


    Firefox:
    [​IMG]

    Safari:
    [​IMG]

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

    Abaixo o codigo:
    HTML
    Código:
    <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
    Código:
    #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
     
  2. hostmake

    hostmake Power Member

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

    alfinete Power Member

    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.

    Código:
    <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
     
  4. Pikatxu

    Pikatxu Power Member

    Obrigado alfinete, na realidade já tinha resolvido com algo semelhante:
    Código:
    <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.
     
  5. SoundSurfer

    SoundSurfer Power Member

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

Partilhar esta Página