CSS for different browsers

Asked

Viewed 2,115 times

3

I’m riding a label + input text personalized. The problem is that each browser interprets the code differently. My final intention is to get the border-bottom appears to be a single line. Chrome and Opera is correct. Already in IE and Firefox is fully visible the "error" that occurs.

I’m not using css reset, and not even the tag form.

At first, I believe that the solution is to elaborate different CSS for each browser, but if you have another solution to this problem, you will be very welcome!

Follow CSS and HTML code:

.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>

html css

  • Which IDE do you use? Visual Studio?

  • 3

    @Marcoantonioquintal The IDE does not matter, the question is the navigator. To create a page you don’t even need to use Ides, notepad + a browser and bye!

  • 1

    I know, but each browser implements some of its own csss and there are tools in Ides that help you find errors and incompatibilities in css. E.g.: your css has padding-right:0px; and when the value is zero we should not put unit of measure. I tested your code in firefox and Chrome and it worked.

  • Landmark, regarding the IDE... Do they point out what is incorrect in the CSS or compatibility with each browser? E is working, but the question is about the design that is not the same in browsers. E am using Brackets, no IDE.

2 answers

5


No need to create a CSS for each browser

First of all: Define box-sizing:border-box on a universal selector so there are no surprises in the size of the elements. See in this article because to better understand.

You are applying border-bottom in two elements inline. It may be that one is higher than the other (as in your case) and the line does not appear as it should. And then, you’ll need to work with magic numbers on padding and margin to adjust correctly.

A better solution is to involve these two elements within a parent element, in which this will be applied border-bottom. The scheme would look like the following image:

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

    Thanks! You helped me with my work. I also liked the use of the positions.

1

Cara I think can help you, insert in your css a code to reset the elements of the browsers as soon as you upload your page, there are some templates, among them the following below:

reset css font: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;
}

  • I I took a test on Jsfiddle and even with the reset did not hit the lines. Not even using box-sizing:border-box and -webkit-box-sizing:border-box.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.