3

Estou montando um label + input text personalizado. O problema é que cada browser interpreta o código de modo diferente. A minha intenção final é fazer com que o border-bottom aparente ser apenas uma única linha. No Chrome e no Opera fica correto. Já no IE e no Firefox é totalmente visível o "erro" que ocorre.

Não estou utilizando css reset, e nem mesmo a tag form.

A princípio, creio que a solução seja elaborar diferentes CSS para cada navegador, mas caso tenha outra solução para este problema, será muito bem vindo!

Segue o código CSS e HTML:

.style-select{
    margin-bottom: 15px;
}

.style-select select {
background: transparent;
-webkit-appearance: none;
width: 213px;
font: 13px;
color: #444444;
height: 28px;
padding-right:55px;
padding-left: 8px;
    
border: none;

}

.style-select {
width: 183px;
height: 21px;
overflow: hidden;
background:url(arrow.jpg) no-repeat right;

}

.style-select select {
    padding-right:0px;
    text-align:left;
    line-height:21px;
    height:auto;
    vertical-align:top !important;
    
}

.style-select {
    border-bottom: 1px solid #C9D3DD;
}

/*Formatação label*/
.label-formulario{
    font: 12px HEINEKENCore;
    color: #444444;
    padding-bottom: 6px;
    padding-right: 30px;
    padding-left: 10px;
    
    border-bottom: 1px solid #C9D3DD;
    border-right: 1px solid #C9D3DD;
    
    float: left;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estilo.css" >
</head>
<body>
    
    <label class="label-formulario">Pilar T&D</label>
    <div class="style-select"> 
       <select> 
            <option>lorem</option>
            <option>Ipsum</option>
            <option>Dolor</option>
        </select>
    </div>

    <div>
    <label>Treinamento </label><select>
        <option>lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
    </select>
    </div>
    
</body>

</html>

4
  • Qual IDE você usa? Visual Studio? Commented 5/01/2015 às 18:16
  • 3
    @MarcoAntonioQuintal A IDE não tem importância, a questão é o navegador. Para criar uma página nem é preciso utilizar IDEs, bloco de notas + um navegador e tcharam! Commented 5/01/2015 às 19:14
  • 1
    Eu sei mas cada navegador implementa alguns csss próprios e existem ferramentas nas IDEs que ajudam a achar erros e incompatibilidades no css. Ex.: o seu css tem padding-right:0px; e quando o valor é zero não devemos colocar unidade de medida. Eu testei seu codigo no firefox e chrome e funcionou. Commented 5/01/2015 às 19:31
  • Marco, em relação a IDE... Elas apontam o que está incorreto no CSS ou a compatibilidade com cada navegador? E está funcionando sim, mas a questão é sobre o design que não fica igual nos navegadores. E estou utilizando o Brackets, nenhuma IDE. Commented 6/01/2015 às 18:27

2 Respostas 2

5

Não tem necessidade de criar um CSS para cada navegador

Primeiro de tudo: Defina box-sizing:border-box em um seletor universal para não ter surpresas no tamanho dos elementos. Veja neste artigo o porque para entender melhor.

Você está aplicando border-bottom em dois elementos inline. Pode ser que um fique mais acima que o outro (como no seu caso) e a linha não apareça como deveria. E então, você vai precisar trabalhar com números mágicos no padding e margin para ajustar corretamente.

Uma solução melhor é envolver esses dois elementos dentro de um elemento pai, no qual será aplicado esse border-bottom. O esquema ficaria como na imagem a seguir:

exemplo

*{box-sizing:border-box;margin:0;padding:0}

.wrapper {
    border-bottom: 1px solid #ccc; /* Aqui é aplicada a borda inferior, no elemento pai */
    height: 40px;
    position: relative;
    width: 300px
}

.wrapper p,
.wrapper select {
    position: absolute;
    top: 0; bottom 0
}

.wrapper p {
    left: 0;
    line-height: 40px;
    text-align:center;
    width: 30%
}

.wrapper select {
    border: none;
    height: 100%;
    right: 0;
    width: 70%
}
<div class='wrapper'>
    <p>Pilar T&D</p>
    <select>
        <option>lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
    </select>
</div>

1
  • 1
    Obrigado! Ajudou aqui no meu trabalho. Gostei também da utilização dos positions. Commented 6/01/2015 às 18:33
1

Cara acho que pode te ajudar, inserir no seu css um código para resetar os elementos dos navegadores assim que subir sua página, existem alguns modelos, dentre um deles o seguinte abaixo:

fonte reset css:http://www.nacaolivre.com.br/css/css-padrao-entre-navegadores-web/

/*
===========================================================
// Zera as configurações padrões dos elementos html.
===========================================================
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0px;
    padding: 0px;
    border: 0px;
    outline: 0px;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

:focus {
    outline: 0px;
}

/* --------------------------------------------------------------------------------------------- */
/* Configuração básica padrão para os elementos HTML entre os navegadores web. */
/* --------------------------------------------------------------------------------------------- */
h1 {
    font-size: 18px;
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}

h1, h2, h3 {
    margin: 16px 0;
}

h1, h2, h3, h4, h5, h6, strong {
    font-weight: bold;
}

abbr, acronym {
    border-bottom: 1px dotted #000;
    cursor: help;
}

em {
    font-style: italic;
}

blockquote, ul, ol, dl {
    margin: 16px;
}

ol, ul, dl {
    margin-left: 32px;
}

ol li {
    list-style: decimal outside;
}

ul li {
    list-style: disc outside;
}

dl dd {
    margin-left: 16px;
}

th, td {
    border: 1px solid #000;
    padding: 8px;
}

th {
    font-weight: bold;
    text-align: center;
}

caption {
    margin-bottom: 8px;
    text-align:center;
}

p, fieldset, table {
    margin-bottom: 16px;
}
1
  • Eu fiz um teste no JSFiddle e mesmo com o reset não acertou as linhas. Nem mesmo usando box-sizing:border-box e -webkit-box-sizing:border-box. Commented 7/01/2015 às 1:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .