css shows error in chorme

Asked

Viewed 116 times

0

On that page, http://www.magicforbaby.com.br/contato.php?form, form fields are stylized correctly.

Locally with Texts inputs everything is as it should be, but on the web is out and css are correctly posted.

Why is it? Detail: only in Firefox this error did not occur!

inserir a descrição da imagem aqui

php contact.

<?php require_once "config.php" ; ?>
<!doctype html>
<html>
  <head>
    <title><?php echo $constantes->getTituloSite(); ?></title>
    <?php  require_once("_global/_meta/meta.ini"); ?>
    <link rel="shortcut icon" type="image/x-icon" href="_img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="_global/_css/estilo.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/site.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/menu.css">
    <link rel="stylesheet" type="text/css" href="_global/_css/jHtmlArea.css" />

    <script type="text/javascript" src="_global/_js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="_global/_js/jHtmlArea-0.8.js"></script>
    <script type="text/javascript" src="_global/_js/validaContato.js"></script>    
    <!--[if lt IE 9]>-->
      <script type="text/javascript" src="_global/_js/css3-mediaqueries.js"></script>
    <!--[endif]-->
  </head>

  <body>

      <div class="topo">
        <div class="sessoes">
          <div class="logo"><img src="_img/logo.png" /></div>
          <div class="menu"><?php require_once "_required/menu.php"; ?></div>    
        </div> 
      </div>

      <div class="conteudo">
        <div class="sessoes"><?php require_once "contatoConteudo.php"; ?></div>
      </div> 

      <div class="base">
        <div class="sessoes"><?php require_once "_required/base.php"; ?></div>
      </div> 
      <div class="final">
        <div class="sessoes"><?php require_once "_required/final.php"; ?></div>
      </div> 

  </body>

</html>

contact us.php

<?php if(isset($_GET["form"]) ) {   ?>

  <h1 class="h1Centralizado">Fale Conosco</h1>

  <form class="formularios" style="width: 450px; text-align:center" id="contato" action="?" method="post"> 

    <div class="contatoEsquerdo">  

      <label class="labelPequeno" >Assunto</label><select style="width: 212px; height:52px;" id="assunto" name="assunto" required>
        <option value="">Escolha o assunto</option>
        <option value="1">Quero Comprar</option>
        <option value="2">Quero Vender</option>
        <option value="3">Indicação</option>
        <option value="4">Elogio</option>
        <option value="5">Pedido de Catálogo</option>
        <option value="6">Outro</option>
      </select><br /><br />

      <div class="qual" style="display:none">
          <label class="labelPequeno" >Qual?</label><input type="text" class="typeTextMedio" maxlength="200" id="qual" name="qual" /> <br /> <br />        
      </div>

      <label class="labelPequeno" >Nome</label><input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" required /> <br /> <br />

        <label class="labelPequeno" >Telefone</label><input type="tel" class="typeTextMedio" maxlength="14" id="telefone" name="telefone" /> <br /> <br />

      <label class="labelPequeno" >Email</label><input type="email" class="typeTextMedio" required maxlength="200" id="email" name="email" /> <br /><br />

    </div>     

    <div class="contatoDireito">  
      <h1 style="text-align:center; width:100%;">Descrição</h1><br />
      <textarea class="textarea" name="descricao" id="descricao" cols="60" rows="15"></textarea><br /> <br />
    </div>

    <div style="clear:both; width:100%; text-align:center;">
      <input name="envia" class="btnAcesso" type="submit" value="Enviar" /><br /> <br />
    </div>

  </form>

<?php } ?>


<?php

  if(isset($_POST["envia"]) )  {   


    $assunto = $phpUtil->contatoTipos($_POST["assunto"]);  

    require_once "_controlls/_models/Emails.php";
    require_once "_controlls/_daos/EmailsDao.php";
    $emailsDao = new EmailsDao($conexao);

    $email = new Emails(
                     date("Y-m-d"), 
                     "n", 
                     $_POST["nome"], 
                     $_POST["email"], 
                     preg_replace( '#[^0-9]#', '', $_POST["telefone"] ),  
                     "", 
                     $_POST["assunto"], 
                     $_POST["descricao"]);

    $emailsDao->cadastrar($email);

    $texto  = "<h2>Email enviado pelo site da ".$constantes->getTituloSite()."</h2><br />";
    $texto .= "<b>Nome:</b> ".$_POST["nome"]."<br /><br />";
    $texto .= "<b>Telefone:</b> ".$_POST["telefone"]."<br /><br />";
    $texto .= "<b>E-mail:</b> ".$_POST["email"]."<br /><br />";
    $texto .= "<b>Intersse:</b> ".$assunto."<br /><br />";
    $texto .= "<b>Descrição:</b><br />".nl2br($_POST["descricao"])."<br />";

    require_once "_controlls/_models/EmailEnviar.php";
    require_once "_controlls/_daos/EmailEnviarDao.php";

    $emailEnviar = new EmailEnviar( 
          $constantes->getTituloSite(), 
          $constantes->getEmailSite(),
          $_POST["nome"], 
          $_POST["email"],
          "Re: ".$assunto,
          $texto
    );

    $emailEnviarDao = new EmailEnviarDao();

    $enviarEmail = $emailEnviarDao->enviaEmail($emailEnviar);   

    if ($enviarEmail["success"] == 0) {

        echo $phpUtil->sucesso ("Mensagem enviada com sucesso!"); 

    }
    else {

        echo $phpUtil->erro ($enviarEmail["errors"]);   

    }

  }

?>

css style.

@charset "utf-8";
/* CSS Document */

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
* {
    font-family: 'Open Sans';
    margin: 0;
    padding: 0;
}
body {
    font-size: 12px;
}
.carregando {
    background: #ffffff;
    font-size: 10px;
    font-family: verdana;
    position: absolute;
    width: 100%;
    height: 600px;
    text-align: center;
    z-index: 10000;
}
.carregando img {
    position: relative;
    vertical-align: middle;
    padding: 10px;
    z-index: 10001;
}
.meio {
    display: none;
}
.sessoes {
    width: 1000px;
    margin: 0 auto;
}
.formularios {
    margin: 0 auto;
}
img {
    border: 0;
    max-width: 100%;
}
ul {
    list-style: none;
}
a, a:hover {
    text-decoration: none;
}
input[type=checkbox] {
    background-color: #CCCCCC;
    width: 40px;
    height: 40px;
}
input[type=button], input[type=submit], input[type=reset] {
    background-color: #CCCCCC;
    color: #000;
    font-weight: bold;
}
.typeTextGrande, .typeTextMedio, .typeTextPequeno {
    height: 36px;
    padding: 4px;
}
.typeTextPequeno {
    width: 100px;
}
.typeTextMedio {
    width: 200px;
}
.typeTextGrande {
    width: 550px;
}
label {
    height: 40px;
    line-height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.labelPequeno {
    width: 100px;
}
.labelMedio {
    width: 200px;
}
.labelGrande {
    width: 300px;
}
.h1Centralizado, .h1CentralizadoAvisos {
    width: 100%;
    margin-top: 50px;
    line-height: 50px;
    text-align: center;
}
.textoPrincipal, .sucesso, .erro {
    width: 100%;
    height: 300px;
    line-height: 300px;
    text-align: center;
}
.erro, .h1CentralizadoAvisos {
    color: #F00;
}
.clearBoth {
    clear: both;
}
.btnAcesso, .btnPesquisa {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    width: 208px;
    height: 44px;
}
.btnAcesso {
    background-image: url(../../_img/acesso.png);
}
.btnPesquisa {
    background-image: url(../../_img/pesquisar.png);
}
/*///////////////////////// INICIO LISTAGENS ///////////////*/
.lista {
    margin: 0 auto;
}
select {
    width: 110px;
    height: 50px;
}
ul.listaTopo, ul.listaRegistros {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}
ul.listaTopo {
    background-color: #000;
    color: #FFF;
}
ul.listaTopo li, ul.listaRegistros li {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}

/*///////////////////////// FIM LISTAGENS /////////////////*/


@media screen and (min-width: 0px) and (max-width:860px) {
.sessoes {
    width: 100%;
}
.sucesso, .erro, .h1Centralizado, {
 line-height:100px;
}
}

css site.

@charset "utf-8";
/* CSS Document */

.topo, .menu, .conteudo, .cont, .base, .final {
    clear: both;
    position: relative;
    width: 100%;
}
.logo, .menu {
    display: inline-block;
    vertical-align: top;
    height: 150px;
}
.logo {
    width: 10%;
}
.menu {
    width: 89%;
}
.banner {
    display: inline-block;
    height: 657px;
}
.listaCategorias {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.listaCategorias li {
    display: inline-block;
    vertical-align: top;
    height: 350px;
}
.sobre {
    margin:0 auto; 
    width: 80%;
}
.base {
    background-color: #FCB412;
    border-top: 5px #FC0000 solid;
    border-bottom: 5px #FC0000 solid;
    font-size: 12px;
}
.baseEsquerda {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding: 3% auto;
    padding: 5px;
}
.barraBase {
    display: inline-block;
    vertical-align: top;
}
.barraBase .hr {
    display: block;
    width: 6px;
    height: 180px;
    background-color: #FC0000;
    border: none;
}
.baseDireita {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    padding: 3% auto;
}
.final {
    background-color: #000;
    color: #FFF;
}
.finalEsquerda, .finalDireita {
    display: inline-block;
    vertical-align: middle;
}
.finalEsquerda {
    text-align: left;
    width: 700px;
}
.finalDireita {
    text-align: right;
    width: 290px;
}

@media screen and (min-width: 0px) and (max-width:860px) {

.listaCategorias li {
    border: #000 .1px solid;
}

.final, .base, .baseEsquerda, .baseDireita, .finalEsquerda, .finalDireita {
    width: 95%;
    font-size: 10px;
    text-align: center;
}
.barraBase {
    display: none;
}
.final {
    height: 100px;
}
}

css menu.

@charset "utf-8";
/* CSS Document */

.menuPrincipal {
}

.menuPrincipal li {
  display:inline;
}

.menuPrincipal li a {
  display:inline-block;
  vertical-align:middle;
  width:19.6%;
  height:50px;
  line-height:50px;
  text-align:center;
  font-size: 24px;
  color: rgb(223,189,92);
}

.menuPrincipal li a:hover {
  color: #FFF;
  background-color:rgb(223,189,92);
}


.menuBase li a {
    color:#000;
}

.menuBase li a:hover {
    color:#FFF;
}


@media screen and (min-width: 0px) and (max-width:860px) {

.menuAbrir {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
}
.menuNav {
    position: absolute;
    top: 0;
    width:100%;
    height: 100%;
    display: none;
    position: fixed;
    z-index: 1500;
    background-color:#005E9C;
}

.menuFechar {
    right: 0;
    position: absolute !important;
}

ul.menuPrincipal li a {
    width: 100%;
}

}

@media screen and (min-width: 1000px) {
.menuAbrir, .menuFechar {
    display: none;
}

ul.menuPrincipal li {
    display: inline;
}
ul.menuPrincipal li a {
    width: 195px;
}
}

jhtmlarea.css

div.jHtmlArea { display: block; overflow: hidden; border: solid 1px #aaa; background-color: #fff; }

div.jHtmlArea iframe, div.jHtmlArea textarea { border: none;   }

div.jHtmlArea div { display: inline-block; padding: 0px; margin: 0px; }
div.jHtmlArea .ToolBar { display: inline-block; background: #fbfbfb; border-bottom: solid 1px #aaa; }
div.jHtmlArea .ToolBar ul { border: solid 1px #ccc; margin: 1px; padding: 1px; float: left; background: #fff url(jHtmlArea_Toolbar_Group_BG.png) repeat-x;}
div.jHtmlArea .ToolBar ul li { list-style-type: none; float: left; border: none; padding: 1px; margin: 1px; }
div.jHtmlArea .ToolBar ul li:hover { border: solid 1px #ccc; background: #ddd url(jHtmlArea_Toolbar_Group__Btn_Select_BG.png); padding: 0; }
div.jHtmlArea .ToolBar ul li a { display: block; width: 16px; height: 16px; background: url(jHtmlArea.png) no-repeat -16px -500px; border: none; cursor: pointer; padding: 0px; }
div.jHtmlArea .ToolBar ul li a.highlighted { border: solid 1px #aaa; background-color: #bbb; padding: 0; }
div.jHtmlArea .ToolBar ul li.separator {height: 16px; margin: 0 2px 0 3px; border-left: 1px solid #ccc;}
div.jHtmlArea .ToolBar ul li.separator:hover { padding: 1px; background-color: #fff; border-top:none; border-bottom:none; border-right:none;}

div.jHtmlArea .ToolBar ul li a:hover { }
div.jHtmlArea .ToolBar ul li a.bold { background-position: 0 0; }
div.jHtmlArea .ToolBar ul li a.italic { background-position: -16px 0; }
div.jHtmlArea .ToolBar ul li a.underline { background-position: -32px 0; }
div.jHtmlArea .ToolBar ul li a.strikethrough { background-position: -48px 0; }
div.jHtmlArea .ToolBar ul li a.link { background-position: -64px 0; }
div.jHtmlArea .ToolBar ul li a.unlink { background-position: -80px 0; }
div.jHtmlArea .ToolBar ul li a.orderedlist { background-position: -96px 0; }
div.jHtmlArea .ToolBar ul li a.unorderedlist { background-position: -112px 0; }
div.jHtmlArea .ToolBar ul li a.image { background-position: -128px 0; }
div.jHtmlArea .ToolBar ul li a.cut { background-position: -144px 0; }
div.jHtmlArea .ToolBar ul li a.copy { background-position: -160px 0; }
div.jHtmlArea .ToolBar ul li a.paste { background-position: -176px 0; }

div.jHtmlArea .ToolBar ul li a.html { background-position: -192px 0; opacity:0.6; filter:alpha(opacity=60);}
div.jHtmlArea .ToolBar ul li a.html.highlighted { opacity:1.0; filter:alpha(opacity=100);}

div.jHtmlArea .ToolBar ul li a.h1 { background-position: 0 -16px;}
div.jHtmlArea .ToolBar ul li a.h2 { background-position: -16px -16px;}
div.jHtmlArea .ToolBar ul li a.h3 { background-position: -32px -16px;}
div.jHtmlArea .ToolBar ul li a.h4 { background-position: -48px -16px;}
div.jHtmlArea .ToolBar ul li a.h5 { background-position: -64px -16px;}
div.jHtmlArea .ToolBar ul li a.h6 { background-position: -80px -16px;}
div.jHtmlArea .ToolBar ul li a.subscript   { background-position: -96px -16px;}
div.jHtmlArea .ToolBar ul li a.superscript { background-position: -112px -16px;}
div.jHtmlArea .ToolBar ul li a.indent { background-position: -128px -16px;}
div.jHtmlArea .ToolBar ul li a.outdent { background-position: -144px -16px;}
div.jHtmlArea .ToolBar ul li a.horizontalrule { background-position: -160px -16px;}
div.jHtmlArea .ToolBar ul li a.p { background-position: -176px -16px;}


div.jHtmlArea .ToolBar ul li a.justifyleft { background-position: 0 -32px;}
div.jHtmlArea .ToolBar ul li a.justifycenter { background-position: -16px -32px;}
div.jHtmlArea .ToolBar ul li a.justifyright { background-position: -32px -32px;}
div.jHtmlArea .ToolBar ul li a.increasefontsize { background-position: -48px -32px;}
div.jHtmlArea .ToolBar ul li a.decreasefontsize { background-position: -64px -32px;}
div.jHtmlArea .ToolBar ul li a.forecolor { background-position: -80px -32px;}
css css3

  • You’re using some reset?

  • only of margin and padding 0 no *{}

  • note that this error does not occur in select

  • Put the css in the question and the html, I think something with isset....

  • another detail I just noted is that on the web, you may notice, that the page is getting a little down and for the php people, this page is utf-8 without good.

  • Putting the code helps

  • ok, html is gone and css is great. Put it all?

  • hehe I actually put wrong in one is isset is inset

  • passed by, hehehe. But did not use inset no. Only in firerfox works right!

  • Bro is so much name, it had to be all English.. kkkk

  • But, seriously: noticed that there is a difference in the figure in the two shows? What on the web, it seems that there is something kind that pushing the page down? I already made sure: is not the GOOD of the UTF-8.

  • The css you have is the one inside the tags or has another?

  • You who equal which Chrome or firefox?

  • Yes, I can put everything here but it will be huge. Don’t you think you should go to the page and see the source code? But if you think better, put all the code.

  • Only the chorme does not present the error. Ready: I put everything there!

  • The question is whether you want the same as Chrome or firefox? input?

  • I want the same as what firefox presents!. Because only the chorme is different. But locally (localhost), all browsers, including Chrome, work correctly. That’s why I posted the picture in the question!

Show 12 more comments

2 answers

1


The problem is that you are not "resetting" the css correctly and each browser is using a different default value.

In case to be more specific the problem is in the box-sizing, where in Chrome is by default as border-box and in Firefox is as content-box, which changes the element size calculation.

In case you change your css by adding a default value to the content-box makes it look the same in Chrome and Firefox, not tested in another browser

* {
    font-family: 'Open Sans';
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

But I would recommend you to look for a more complete reset as there may be other cases of differences between browsers

  • got it. But it leaves me a doubt. Because it only occurs on the internet. On localhost it is not happening. See image. If the browser is the same, shouldn’t the behavior be the same? Note that on the right side the page is being pushed down relative to the left side page!

  • It’s hard to say, but I’d say there’s either some difference in what’s being returned by your development server that makes Chrome treat the page differently or it’s treating it differently simply by being on the localhost

  • the problem is that the fornte code (Ctrl+u) of both is the same!

  • One thing you can try is to open the Console in Chrome and run the command document.compatMode exactly this way, it will return you the rendering mode of the document, if they are different in your location and remote this may be the problem. And from what I saw here Chrome returned to me that is in the mode BackCompat which is also known as Quirks Mode, while Firefox is returning CSS1Compat, which would be the mode that follows, or at least tries to follow, the pattern that every browser should follow

  • worked out. Now I will read it calmly to study it well! Thank you!

0

Add that and see if it works.

input {
    background-color: #CCCCCC;
    color: #000;
    font-weight: bold;
    -webkit-box-shadow:0 0 5px #666 inset; 
    -moz-box-shadow:0 0 5px #666 inset; 
    box-shadow:0 0 5px #666 inset;
}

Browser other questions tagged css css3

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