Ir para conteúdo

Arquivado

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

kaayasinho

Situação complicada com navegador

Recommended Posts

eu criei uns topicos no meu site cada um com uma informação, quando um atinge o tamanho limite (HEIGHT) , dentro da div cria um SCROLL e ele nao quebra o layout.

 

mas o safari ta de brincadera

 

vejam vai ter um topico que esta fora do tamanho certo, isso apenas ocorre no safari, no firefox,chrome,opera funcionam perfeitamente, mas no safari do ipad e do mac, ele cria um expaço abaixo e quebra o layout

 

http://theoneeventos.com.br/_theone/?id=corporativo

 

caso não tenham safari essa é a imagem doque ocorre

 

print.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

CSS

#sectionEmpresa article{max-width:550px;border:solid 1px #525252;min-height:10px;border-radius:10px 10px 10px 10px;margin:15px;} #sectionEmpresa article h3{margin-bottom:5px;background:#000;border-radius:10px 10px 0px 0px;opacity:0.5;padding:3px;}#sectionEmpresa article p{padding:5px;} .zebra{background:#2b2b2b;}#sectionEmpresa div:nth-of-type(1){ float:right;max-width:50%;} #sectionEmpresa div:nth-of-type(2){float:left;width:50%;}#sectionEmpresa div img{display:block;height:100%;width:100%;}

HTML

<?php	if(isset($_GET["id"])){		$id = $_GET["id"];		}/*AQUI DEVE PUXAR DO BANCO DE DADOS QUAL TIPO DE EVENTO QUE LIBERARAO AS INFORMACOES DO TIPO DE EVENTO*/		?><section id="sectionEventos">	<article>		<header>                        <h2><?php echo "Eventos ".$id; ?></h2>        </header>        <div>       		 <p>Fusce vehicula suscipit consectetur. Pellentesque ligula augue, faucibus in felis nec, ultricies fringilla augue. Sed vulputate dui in sapien ultricies, eu dictum velit eleifend. Sed feugiat viverra metus, nec ullamcorper ante posuere et. Cras fringilla fringilla enim, non bibendum mi ornare quis. Duis consectetur sem sem, in suscipit libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum iaculis nibh, eu rhoncus sem hendrerit ac. Duis pharetra id enim at auctor. Nam turpis turpis, ullamcorper ullamcorper odio et, pulvinar convallis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis purus nibh, dapibus at viverra vel, bibendum ac nulla. Donec placerat odio ac nunc pretium, id pulvinar eros commodo.</p>                                  </div>                <div>			<img src="img/empresa.jpg">    	</div>    </article>    <article>    <header>    		<h2>Tipos de Evento</h2>	</header>    	 <div>    	<div>        	<img src="img/empresa.jpg">            <h1>Lancamento de Produto</h1>            <p>A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum</p>        </div>        <div>        	<img src="img/empresa.jpg">            <h1>Lancamento de Produto</h1>            <p>A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum</p>        </div>        <div>        	<img src="img/empresa.jpg">            <h1>Lancamento de Produto</h1>            <p>A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum</p>        </div>        <div>        	<img src="img/empresa.jpg">            <h1>Lancamento de Produto</h1>            <p>A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum</p>        </div>        <div>        	<img src="img/empresa.jpg">            <h1>Lancamento de Produto</h1>            <p>A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum</p>        </div><div>        	<img src="img/empresa.jpg">            <h1>Lancamento de Produto</h1>            <p>A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum</p>        </div><div>        	<img src="img/empresa.jpg">            <h1>Lancamento de Produto</h1>            <p>A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum</p>        </div><div>        	<img src="img/empresa.jpg">            <h1>Lancamento de Produto</h1>            <p>A t libero porttitor sed. Donec sodales sapien sit amet blandit feugiat. Sed eu tempor nisi. Ut faucibus dolor augue, vel tempus magna porttitor vitae. Curabitur fermentum</p>        </div>                 </article></section>

ta complicado de entender eu acho melhor inspecionar o elemento no link la

 

 

??? nda?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Troquei o display: inline-block; por float: left; e renderizou corretamente no Safari e no Firefox.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Troquei o display: inline-block; por float: left; e renderizou corretamente no Safari e no Firefox.

Se eu trocar o inline block para o float left, o conteúdo fica grudado na esquerda e nao centralizado como quero, e tb to fazendo responsivo, conforme diminui o tamanho do navegador vai diminuindo o numero de box e continua alinhado no centro... se vc fizer o texte de diminuir o tamano da area do navegador vai entender

 

Troquei o display: inline-block; por float: left; e renderizou corretamente no Safari e no Firefox.

existe alguma outra forma? de manter centralizado responsivo , e sem esse bug no safari?

 

pois esse codigo funciona no chrome firefox opera. so nao adaptei ainda pra IE

deveria funcionar pois safari eh o mesmo motor do chrome

 

 

ja vi q to ferrado hahaha

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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