CSS for different browsers

Navigation
3

I'm building a custom%% of% +% with custom%. The problem is that each browser interprets the code differently. My final intention is to make the label appear to be just a single line. Chrome and Opera are correct. Already in IE and Firefox is fully visible the "error" that occurs.

I'm not using css reset , and not even the input text tag.

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

Follow the 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>
    
asked by anonymous 05.01.2015 / 18:48

2 answers

5

You do not need to create a CSS for each browser

First of all: Set box-sizing:border-box to a universal selector so you have no surprises in the size of the elements. See in this article why to better understand.

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

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

*{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>
    
05.01.2015 / 19:37
1

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

source reset css: link 

/*
===========================================================
// 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;
}
    
06.01.2015 / 19:38
asp.net serving static files How to select with regex?