Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

SnakeX

Problema em Ul Li no Chrome

Por , em Desenvolvimento frontend

Recommended Posts

SnakeX    1

SnakeX
Postado

Boasssss

 

Estou a precisar de ajuda, eu estou a desenvolver um site e como sabe entre browsers existe infelizmente sempre aquelas diferenças, uma div fica mais para cima a outra mais para o lado, etc...

 

O meu problema é este:

 

Firefox 5

51ff.th.png

 

Google Chrome:

35chrome.th.png

 

No firefox está como pretendo, mas no google chrome fica com espaçamento entre as li's como é que resolvo isso?

 

CSS

#servicos li { width: 100%; display:block; margin: 5px 0 5px -2px; color: #fff; height: 100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#servicos li.cpanel { background: url('../images/panel/servicos/cpanel.png') no-repeat center center #000; }
#servicos li.teamspeak3 { background: url('../images/panel/servicos/teamspeak3.png') no-repeat center center #000; }
#servicos li.dominios { background: url('../images/panel/servicos/dominios.png') no-repeat center center #000; }
#servicos li .overlayText { width: 245px; position: relative; top: 0px; z-index: 4; font-size: 11px; padding: 8px 10px 10px 10px; float: right; color: #fff; background: #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: none; height: 82px; overflow: hidden; }
   	#servicos li .overlayText .loading { text-align: center; padding: 20px; }
   	#servicos li .overlaytext ul { list-style-type:none; }
   	#servicos li .overlayText ul li { line-height:90% color: #fff; padding: 0; margin: 0; display: block; height: auto; }

 

 

HTML ( não tem o html todo )

                            	<ul class="servico-info">
                               	<li class="diskusage">Espaço em Disco:<span class="right"><span>0</span> MB/ <?php echo ( ( $s['servico']['config_07_opt'] == '-1') ? '∞' : $s['servico']['config_07']); ?> MB</span></li>
                               	<li class="bandwidthusage">Tráfego Usado:<span class="right"><span>0</span> MB/ <?php echo ( ( $s['servico']['config_22_opt'] == '-1') ? '∞' : $s['servico']['config_22']); ?> MB</span></li>
                               	<li class="emailaccounts">Contas de Email:<span class="right"><span>0</span>/<?php echo ( ( $s['servico']['config_17_opt'] == '-1') ? '∞' : $s['servico']['config_17']); ?></span></span></li>
                               	<li class="ftpaccounts">Contas de FTP:<span class="right"><span>0</span>/<?php echo ( ( $s['servico']['config_16_opt'] == '-1') ? '∞' : $s['servico']['config_16']); ?></span></span></li>
                               	<li class="sqldatabases">Bases de Dados MySQL:<span class="right"><span>0</span>/<?php echo ( ( $s['servico']['config_15_opt'] == '-1') ? '∞' : $s['servico']['config_15']); ?></span></span></li>
                               	<li class="subdomains">Sub-Domínios:<span class="right"><span>0</span>/<?php echo ( ( $s['servico']['config_19_opt'] == '-1') ? '∞' : $s['servico']['config_19']); ?></span></li>
                           	</ul>

 

 

A class servico-info no ul é simplesmente para uso de jQuer.

 

 

Obrigado!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunosk2    0

brunosk2
Postado

Tenta isso:

.servico-info li, .servico-info span{

margin:0;

padding:0;

}

Se você puder postar o código completo (ou o site mesmo seria até melhor), ajudaria.

Compartilhar este post

Link para o post
Compartilhar em outros sites

SnakeX    1

SnakeX
Postado

Infelizmente não deu, eu coloquei tambem background: red e notei que o que fica maior é talvez o height do li.

 

HTML

            	<ul id="servicos">
				<a onclick="loadingBox();" href="<?php echo my_site_url('clientes/servicos/ver/' . $s['id']); ?>" style="font-weight:normal;">
                   	<li class="<?php if($s['estado'] == 1): ?>servico-sync<?php endif; ?> cpanel" id="<?php echo $s['id']; ?>">
                       	<div class="overlayText">
                           	<?php if($s['estado'] == 3): ?>
                           	<center>
                               	<br /><br />
                               	Serviço <strong style="color: red;">Desactivado</strong>!
                           	</center>
                           	<?php elseif($s['estado'] == 2): ?>
                           	<center>
                               	<br /><br />
                               	Serviço <strong style="color: orange;">Suspenso</strong>!
                           	</center>
                           	<?php else: ?>
                           	<ul class="servico-info">
                               	<li class="diskusage">Espaço em Disco:<span class="right"><span>0</span> MB/ <?php echo ( ( $s['servico']['config_07_opt'] == '-1') ? '∞' : $s['servico']['config_07']); ?> MB</span></li>
                               	<li class="bandwidthusage">Tráfego Usado:<span class="right"><span>0</span> MB/ <?php echo ( ( $s['servico']['config_22_opt'] == '-1') ? '∞' : $s['servico']['config_22']); ?> MB</span></li>
                               	<li class="emailaccounts">Contas de Email:<span class="right"><span>0</span>/<?php echo ( ( $s['servico']['config_17_opt'] == '-1') ? '∞' : $s['servico']['config_17']); ?></span></span></li>
                               	<li class="ftpaccounts">Contas de FTP:<span class="right"><span>0</span>/<?php echo ( ( $s['servico']['config_16_opt'] == '-1') ? '∞' : $s['servico']['config_16']); ?></span></span></li>
                               	<li class="sqldatabases">Bases de Dados MySQL:<span class="right"><span>0</span>/<?php echo ( ( $s['servico']['config_15_opt'] == '-1') ? '∞' : $s['servico']['config_15']); ?></span></span></li>
                               	<li class="subdomains">Sub-Domínios:<span class="right"><span>0</span>/<?php echo ( ( $s['servico']['config_19_opt'] == '-1') ? '∞' : $s['servico']['config_19']); ?></span></li>
                           	</ul>
                           	<?php endif; ?>
                       	</div>

                       	<div class="informacao">
                       		<div class="infoMain">
                               	<h2><?php echo $s['nome']; ?></h2>
                               	<p>
                                   	<?php echo $s['servico']['plano']; ?><br />
                                   	<?php echo $s['servico']['config_02']; ?>
                               	</p>
                           	</div>

                           	<div class="infoRight">
                           		<p>
                                   	<?php if($s['estado'] == 3): ?>
                                   	<center>
                                       	<br />
                                       	Serviço <strong style="color: red;">Desactivado</strong>!
                                   	</center>
                                   	<?php elseif($s['estado'] == 2): ?>
                                   	<center>
                                       	<br />
                                       	Serviço <strong style="color: orange;">Suspenso</strong>!
                                   	</center>
                                   	<?php else: ?>
                                   	<ul>
                                       	<li>Expira dentro de: <span class="right"><b><?php echo $s['expira']; ?></b> dias</span></li>
                                       	<li>Próximo Pagamento:<span class="right"><?php echo mdate('%d.%m.%Y', $s['prox_pagamento']); ?></span></li>
                                       	<li>Estado do Serviço: <span class="right"><?php echo ServicosEstado($s['estado']); ?></span></li>
                                   	</ul>
                                   	<?php endif; ?>
                               	</p>
                           	</div>
                       	</div>
                   	</li>
               	</a>
			</ul>

 

 

CSS

#servicos li { width: 100%; display:block; margin: 5px 0 5px -2px; color: #fff; height: 100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#servicos li.cpanel { background: url('../images/panel/servicos/cpanel.png') no-repeat center center #000; }
#servicos li.teamspeak3 { background: url('../images/panel/servicos/teamspeak3.png') no-repeat center center #000; }
#servicos li.dominios { background: url('../images/panel/servicos/dominios.png') no-repeat center center #000; }
#servicos li .overlayText { width: 245px; position: relative; top: 0px; z-index: 4; font-size: 11px; padding: 8px 10px 10px 10px; float: right; color: #fff; background: #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: none; height: 82px; overflow: hidden; }
   	#servicos li .overlayText .loading { text-align: center; padding: 20px; }
   	#servicos li .overlaytext ul { list-style-type:none; }
   	#servicos li .overlayText ul li { line-height:90% color: #fff; padding: 0; margin: 0; display: block; height: auto; }
       	.servico-info li, .servico-info span { padding: 0; margin: 0; }
       	#servicos li .overlayText ul li.gestao { padding: 15px 0 0 0; }
           	#servicos li .overlayText ul li.gestao img { padding: 0 0 0 5px; }
#servicos li .informacao { padding: 10px; }
   	#servicos li .informacao .infoMain { border-radius: 5px; float:left; background: rgba(0, 0, 0, 0.4); height: 80px; padding: 0 5px 0 5px; width: 500px; }
       	#servicos li .informacao .infoMain h2 { color: #fff;  }
       	#servicos li .informacao .infoMain p { color: #efefef;text-shadow: 1px 1px 1px #000; font-size: 12px; }
   	#servicos li .informacao .infoRight { width: 245px;  float:right; }
       	#servicos li .informacao .infoRight p { color: #efefef; text-shadow: 1px 1px 1px #000; font-size: 12px; position:relative; top: 8px; }
       	#servicos li .informacao .infoRight ul li { font-size: 12px; margin: 2px; display: block; height: auto; }

 

 

Está ai tudo =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunosk2    0

brunosk2
Postado

Bom, ta meio dificil, com php, pq eu n sei o que vai ter ali, então eu fiz um aki, e está funcionando no Firefox, Chrome, IE até a versão 7.

#conteudo{

background-color: #000000;

height: 130px;

margin-left: 100px;

width: 500px;

}

#esquerda{

float:left;

width:auto;

height:auto;

margin-left:10px;

}

#direita{

float:right;

width:auto;

height:auto;

margin-right:10px;

}

#conteudo ul li, #conteudo ul{

color: #CCC;

list-style-type:none;

margin:0;

padding:0;

}

 

HTML

 

<div id="conteudo">

<div id="esquerda">

<ul>

<li>Teste</li>

<li>Teste</li>

<li>Teste</li>

<li>Teste</li>

<li>Teste</li>

<li>Teste</li>

</ul>

</div>

<div id="direita">

<ul>

<li>Teste</li>

<li>Teste</li>

<li>Teste</li>

<li>Teste</li>

<li>Teste</li>

<li>Teste</li>

</ul>

</div>

</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito