Jump to content
Sign in to follow this  
Paradoxu

CSS float:left bug no Mozilla

Recommended Posts

Pessoal, boa tarde;

Tenho essa seguinte lista no meu html,que por algum motivo os elementos dela ficam bugados / saltando espaços no navegador Mozilla, enquanto nos outros não, como posso resolver?

CSS da li

.content_pesquisa ul li{
	width:250px;
	height:auto;
	min-height:210px;
	float:left;
	padding:5px;
	margin-left:5px;
	margin-bottom:15px;
}

Link da imagem com bug:

http://imgur.com/0qH3ano

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 ricardonews
      Olá pessoal eu tenho essa imagem de um login  que vou mostrar aqui, consegui  o css dela , porem não consegui colocar no meu login,  eu vou deixar o login em html,  em css eu estou  dificuldade. Desde já agradeço a todos
       

       então eu o css dela é esse aqui
      *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;} Aqui abaixo é o html que eu não consegui deixar no css do jeito que está na imagem.
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html>  
       
    • By egalauber
      Quero que meus links tenham marcadores e que os marcadores fiquem selecionados juntos com o link. Pra isso, coloquei o LI dentro do A. <a><li>meu link</li></a>
      Só que o link ficou muito grande. Mesmo com o mouse longe do texto, ele já ativa o link. Vejam na imagem.
       

       
      Vejam o código:
       
      CSS
      #links_uteis {
              width:482px;
              height:230px;
              float:right;
              margin-top:20px;
              margin-right:20px;
              font-size:20px;
              list-style-type:disc;
              list-style-position:inside;
          }
      #links_uteis table {
              width:420px;
              margin-left:10px;
          }
      #links_uteis td {
              width:210px;
              padding:5px 10px 5px 10px;
          }
      #links_uteis a:hover {
              text-decoration:underline;
              color:#D90000;
          }
       
       
      HTML
      <div id="links_uteis">
      Links úteis
      <div class="barra_titulo"></div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
          <a href="#" target="_blank"><li>Inmetro</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>Seplag</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Ipsemg</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>IOF-MG</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>ALMG</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>MGS</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Portal de serviços</li></a></td>
          <td>
          <a href="#" target="_blank"><li>Portal do servidor</li></a></td>
        </tr>
      </table>

      </div> <!--Fecha a div links_uteis-->
    • By guzulino
      É o seguinte no cabeçalho do meu projeto tem uma parte um link que leva a parte principal do site, nessa parte a imagem que está lá dentro redireciona o visitante pra página de destino até aí beleza, mas como eu tenho de definir um tamanho pra imagem eu faço via style na tag do link mesmo no <a style=" "></a>, mas quando tento colocar essa parte do código em uma linha dentro do arquivo CSS que contém todas as estilizações padrão, ele simplesmente não acontece. Vou postar a parte do código e como acho que deveria ser, mas pelo jeito não é essa a forma correta.
      <body> <div id="site"> <div id="cabecalho"> <div id="link_home"> <a href="index.php"> <img src="imagens/logo.png" alt="logo" style="height: 50px;"/><!--Esse style="height: 50px;" é que eu quero no CSS pra estilização padrão--> </a> </div><!--Final botão logo--> body { background-color: #131521; width: 1000px; margin: auto; font-family: Arial, Helvetica, sans-serif; } #site { background-color: #ffffff; width: 1000px; float: left; } #cabecalho{ background-color: #ffffff; float: left; width: 1000px; height: 70px; } #link_home{ float: left; height: 50px; margin-top: 5px; margin-left: 5px; } #link_home a img { height: 50px; } /* Quando eu coloco aqui no CSS e tiro do HTML ele não funciona */ A grande moral é que eu não sei como indicar pro CSS que é pra alterar somente aquela img daquele a que está dentro daquela DIV
    • By jujubeas
      Ola pessoal, alguém tem algum código javascript ou pode me dar algum link como referencia que tenha um questionario/quiz que use arrays e estruturas de repetição?
       
       
    • By MurilloCSS
      Bom dia galera venho aqui falar que to com uma duvida imensa mesmo eu criei  4 botões como na foto  e eu quero mover pro lado que ta em vermelho mas de jeito nenhun eu consigo alguem pode me ajudar?


      codigo: 
      < <div class="menubarra"> <img src="imagens/logo.png" alt="Logo" title="" width="200"> <a href="" class="btn btn-purple">Login</a> <a href="" class="btn btn-purple">Carrinnho</a> <a href="" class="btn btn-purple">Amei</a> <a href="" class="btn btn-purple">Notificacao</a> </div> > CSS: < .menubarra{ background: #1E90FF; top: 100%; margin-block-end: 0%; left: 100px; } >

×

Important Information

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