Jump to content
Sign in to follow this  
luiz monteiro

Definir borda inferior de 1px para todos os navegadores

Recommended Posts

Tudo bem pessoal!

Estou há alguns dias pesquisando e usando diferentes dicas para resolver o problema para que a borda inferior de 1px aplicada em quatro boxes sejam exibidas igualmente no chrome, safari, mozilla, opera e IE.

A estrutura é a seguinte:

 

==========CSS

 

html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div
{
    margin: 0px;
    padding: 0px; 
    border:none; 
    outline:none;
    list-style-type:none;
    box-sizing: border-box;
}

 

*
{
    font-size: 14px;
    font-family: verdana, arial;
}

 

.container
{
    width: 608px;
    height: 421px;
    margin: auto;
    margin-top: 50px;
    overflow: hidden;
}

 

.box_one, .box_two
{
    display: inline-block;
    width: 300px;
    height: 250px;
    overflow: hidden;
}

 

.border_bottom
{
    border-bottom: #f5f5f5 solid 1px;
}

 

.border_bottom_white
{
    border-bottom: #fff solid 1px;
}

 

.espaco
{
    margin-right: 2px;
}

 

.box_tree, .box_four, .box_fift
{
    display: inline-block;
    width: 198px;
    height: 149px;
    margin-top: 20px;
    overflow: hidden;
}

 

.vertical
{
    vertical-align: top;
}

 

 

 

============HTML

 

   <content>


        <div class="container">

 

            <div class="box_one border_bottom_white espaco vertical">box one in first line</div>

            <div class="box_two border_bottom vertical">box two in first line</div>

            <div class="box_tree espaco border_bottom vertical">box tree in second line</div>

            <div class="box_four espaco border_bottom vertical">box four in second line</div>

            <div class="box_fift border_bottom vertical">box fift in second line</div>

      

    </div>

 

 </content>

 

O que ocorre é que cada navegador exibe de uma maneira diferente, mesmo resetando o box-sizing: border-box;  o font-size e o font-family.

Essa configuração do CSS foi a mais próxima do desejável.

A estrutura do HTML precisa ser essa aí.

Agradeço desde já.

 

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By lezão
      Boa noite!
      Td bem com vcs?
      Peguei um codigo de modal muito util para mim, mas ele naun sai do lugar, estou tentando posiciona lo em outro lugar e naun consigo.
      Ja fiz de tudo e nada resolveu alguém pode me ajudar?
      Gostaria que ele ficasse, aonde eu colocar ele aceitar e rodar.
      segue o codigo abaixo:
      <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} /* Button used to ppen the contact form - fixed at the bottom of the page */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } /* The popup form - hidden by default */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; } /* Add styles to the form container */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Full-width input fields */ .form-container input[type=text], .form-container input[type=file], .form-container input[type=textarea] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* When the inputs get focus, do something */ .form-container input[type=text]:focus, .form-container input[type=file]:focus, .form-container input[type=textarea]:focus { background-color: #ddd; outline: none; } /* Set a style for the submit/login button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Add a red background color to the cancel button */ .form-container .cancel { background-color: red; } /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> <button class="open-button" onclick="closeForm()">Open Form</button> <div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1> <img src="http://mercatotal.com.br/gnservice/img/logotipo2.png" width="170px" height="70px"/></h1> <label for="nome"><b>Nome:</b></label> <input type="text" placeholder="Seu Nome" name="nome" required/> <label for="foto"><b>Foto:</b></label> <input type="file" placeholder="Sua Foto" name="foto" required/> <label for="comment"><b>Comentários:</b></label> <textarea placeholder="Seu Comentário" name="depoimento" cols="36,7" rows="10" required></textarea> <button type="submit" class="btn">Login</button> <button type="button" class="btn cancel" onclick="openForm()">Close</button> </form> </div> muito obrigado!
    • By lezão
      Boa tarde, meus amigos (as)!
      Estou tentando fazer uma box desse jeito da foto em anexo.
       
       
      Este é o código que estou tentando fazer ficar igual a da foto...
       
      alguém pode me ajudar ?
       
      fieldset{ width:100%; height:100%; padding: 1em; font:80%/1 sans-serif; border-radius: 10px; padding: 5px; min-height:1px; background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent; background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent; border: 1px solid #AAAAAA; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 15px #AAAAAA; font-size: 15px; color: #000; text-transform: uppercase; text-align: center; } div.box { width: 250px; display: inline-block; padding: 15px; min-height:1px; } <div class="box"> <fieldset onclick="location.href='#'" style="cursor:pointer;" align="center"> <img src="btn-galeria.png" width="130" height="130" /> <br/><br/> <span> Galeria de Fotos</span> <br/><br/> </fieldset> </div>  

    • By Usleydocarmo
      Estou com o seguinte erro:
      Ao acessar o meu site na pagina principal tudo ok. Porém quando acesso em um menu que vai carregar um arquivo que está em uma pasta e não na pasta raiz, ai o arquivo css não é carregado.
       
      <a href="usuarios"> home</a> chamo o arquivo funcionarios na mesma pasta onde está o arquivo index.php -funciona
      <a href="usuarios/usuarios"> home</a>  Pasta 'usuarios' e dentro dela chamo o arquivo 'usuarios' - ai não funciona
       
      Descobri que quando entro na pasta usuários fica assim, com a basta no diretório do arquivo. Como corrigir?
      <link rel="stylesheet" href="http://localhost/keiri/admin/usuarios/plugins/fontawesome-free/css/all.min.css&nbsp;">
       
      Meu htaccess
      RewriteRule ^([a-z]+)\/?$ dashboard.php?arquivo=$1 [NC,L]
      RewriteRule ^([a-z]+)\/([a-z]+)$ dashboard.php?pasta=$1&arquivo=$2 [NC,L]
      RewriteRule ^([a-z]+)\/([a-z]+)\/([0-9]+)$ dashboard.php?pasta=$1&arquivo=$2&item=$3 [NC,L]
    • By lezão
      Ola boa tarde!
      Td bem com vcs?
       
      Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.
       
       
      obrigado pela atenção.

    • By daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.