Ir ao conteúdo
  • Cadastre-se
fabiano aladin

Erro no internet explore

Recommended Posts

Fiz um código e testei no ópera , mozzila , chrome e internet explore , só no internet explore apareceu o bug.Fiz o código usando Xhtml , uso versão atualizada do IE , windows 7.

Vou colocar as imagens para visualizarem melhor meu problema.Pesquisei na internet e tentei resolver de várias maneiras e até agora nada .

Alguém pode me ajudar?

o código:

<form id="formulario" action="envia.php" method="post" onsubmit="return validar(this)">                <table class="chegar">                    <tr>                    <td>                            <fieldset>                                <legend>Entre em contato conosco:</legend>                                <p>                                        <label for="nome">Nome:</label><br />                                        <input type="text" id="nome" tabindex="1" />                                </p>                                <p>                                    <label for="email">Email:</label><br />                                    <input type="text" id="email" tabindex="2" />                                </p>                                <p>                                    <label for="fone">Telefone:</label><br />                                    <input type="text" id="fone" tabindex="3" />                                </p>                                <p>                                    <label for="assunto">Assunto:</label><br />                                    <input type="text" id="assunto" tabindex="3" />                                </p>                                <p>                                    <label for="mensagem">Mensagem:</label><br />                                      <textarea name="mensagem" cols="20" rows="8" id="mensagem" tabindex="5">                                    </textarea>                                </p>                                <p>                                     <input type="reset" value="Limpar" tabindex="6" class="botao" />                                      <span class="direita">                                          <input type="submit" Value="Enviar" tabindex="7" class="botao" />                                      </span>                                   </p>                                                            </fieldset>                    </td>                        <td class="larg">                            <fieldset class="cheg">                                <legend class="titulo_formulario">Como Chegar:</legend>                                <div id="mapa">                                    <img src="imagens/mapa3.png" alt="mapa" />                                </div>                            </fieldset>                        </td>                     </tr>                </table>                <table class="dir">                        <tr>                        <td>                            <fieldset>                                <legend>Localização:</legend>                                <p>                                    Rua José Peregrino,29-Rocha Miranda.                                    Rio de Janeiro - RJ.                                    </p>                                <p>                                    Telefones de contato:                                </p>                                <p>                                    (21) 97676-1149                                </p>                                <p>                                    (21) 7867-0087                                </p>                                <p>                                    ID:24*52530                                </p>                                <p>                                    <a href="http://.blogspot.com.br" target="blank"> Blog</a>                                </p>                                <p>                                           <a href="https://pt-br.facebook.com/" target="blank">Faceboock</a>                                </p>                                <p>                                    <img src="imgagens/logobira.jpg" alt="logotipo"/>                                     </p>                                      </fieldset>                        </td>                    </tr>                </table>            </form>

post-516771-0-39130100-1436458796_thumb.

post-516771-0-33319100-1436458808_thumb.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fabiano aladin

 

Uma sugestão,  já que você não está usando o API do google maps... é só uma imagem png... coloque de background do seu DIV id = mapa com a seguinte regra:

background: url(mapa.png) no-repeat center center;background-size: cover;

fará que a imagem fique no preenchimento total do seu div ajustando a imagem.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fabiano aladin

 

Uma sugestão,  já que você não está usando o API do google maps... é só uma imagem png... coloque de background do seu DIV id = mapa com a seguinte regra:

background: url(mapa.png) no-repeat center center;background-size: cover;

fará que a imagem fique no preenchimento total do seu div ajustando a imagem.

 

@fabiano aladin

 

Uma sugestão,  já que você não está usando o API do google maps... é só uma imagem png... coloque de background do seu DIV id = mapa com a seguinte regra:

background: url(mapa.png) no-repeat center center;background-size: cover;

fará que a imagem fique no preenchimento total do seu div ajustando a imagem.

Não ficou legal! Eu uma vez vi uma pessoa com esse mesmo bug em um fórum na internet , mas não consigo lembrar qual a solução e qual fórum.Isto só tá acontecendo no IE.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fabiano aladin

Por gentileza,  posta o CSS utilizado nessa parte do mapa e do fieldset.

 

Provavelmente pode ser algum conflito de regras.   

Sobre a solução, você disse que não ficou legal, mas como ficou? posta um print, para poder dizer se dá para ajustar. se precisa de padding no container.. enfim... dê mais detalhes.

Compartilhar este post


Link para o post
Compartilhar em outros sites
fieldset{	border: #000000 solid 1px;	width: 265px;	padding: 10px;	float: left;	margin-bottom: 20 px;	margin-left: 47px;	color: #000000;}legend{	font-size: 1,4em;}label{	font-size: 1.2em;	font-weight: bold;	margin-left: 10px;	}form input, textarea{	font-size: 14px;	padding: 5px;	border: #000000 solid 1px;	width: 235px;	margin-left: 10px;	}#mapa {         overflow:scroll;     width:600px;     height:437px;}

A imagem aparece muito grande e ao tentar redimensioná-la não fica do jeito q eu quero  e mesmo assim a borda fica menor q a imagem igual antes!

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fabiano aladin

 

Ok, mas como é o jeito que você quer? ainda não entendi bem.

overflow ali é meio desnecessário, se o objetivo é deixar a imagem do tamanho do quadrado.

 

Você pode tentar outros atributos do background-size como  "contain" 

 

Posta um print de como ficou, é mais fácil de entender.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fabiano aladin

 

Ok, mas como é o jeito que você quer? ainda não entendi bem.

overflow ali é meio desnecessário, se o objetivo é deixar a imagem do tamanho do quadrado.

 

Você pode tentar outros atributos do background-size como  "contain" 

 

Posta um print de como ficou, é mais fácil de entender.

 

@fabiano aladin

 

Ok, mas como é o jeito que você quer? ainda não entendi bem.

overflow ali é meio desnecessário, se o objetivo é deixar a imagem do tamanho do quadrado.

 

Você pode tentar outros atributos do background-size como  "contain" 

 

Posta um print de como ficou, é mais fácil de entender.

no mozzila e outros navegadores ficaram perfeitos , do jeito q eu quero , mas no internet explore deu esse erro!

Eu coloquei as 2 imagens uma com erro no IE e outra perfeitra, o que eu queria era q no IE ficasse igual aos outros , alguma alteração que pudesse ser feita sem alterar para outros navegadores!

post-516771-0-24002300-1436475167_thumb.

post-516771-0-89598800-1436475182_thumb.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fabiano aladin

 

esses prints eu já vi, ta no post inicial.

eu estava falando de prints depois de alterar para usar com background. 

 

Enfim..  acredito que seja conflito nas suas regras css

 

veja este exemplo:  http://jsfiddle.net/ywseba1r/

 

foi testado no chrome, FF e IE  e funciona.  Veja os dois exemplos um usando a imagem dentro do DIV.. e outro usando a imagem como background.

Compartilhar este post


Link para o post
Compartilhar em outros sites
<div id=principal>        	<div id=banner>        	<h1>texto</h1>         </div><!--banner-->                <div id=navegação>                	<div id=menu>            	<a href="index.html">Início</a>        		<img src="imagens/separador2.gif" alt="separador"/>                <a id="ativo" href="#">Contato</a>        		            </div><!--menu-->                    </div><!--navegação-->                <div id=conteúdo>        	<form id="formulario" action="envia.php" method="post" onsubmit="return validar(this)">				<table class="chegar">                	<tr>                    <td>                        	<fieldset>                				<legend>Entre em contato conosco:</legend>                    			<p>                        				<label for="nome">Nome:</label><br />                            			<input type="text" id="nome" tabindex="1" />                        		</p>                         		<p>                        			<label for="email">Email:</label><br />                            		<input type="text" id="email" tabindex="2" />                        		</p>                        		<p>                        			<label for="fone">Telefone:</label><br />                            		<input type="text" id="fone" tabindex="3" />                        		</p>                        		<p>                        			<label for="assunto">Assunto:</label><br />                            		<input type="text" id="assunto" tabindex="3" />                        		</p>                        		<p>                        			<label for="mensagem">Mensagem:</label><br />                          			<textarea name="mensagem" cols="20" rows="8" id="mensagem" tabindex="5">                            		</textarea>                        		</p>                        		<p>                        	 		<input type="reset" value="Limpar" tabindex="6" class="botao" />                              		<span class="direita">                              			<input type="submit" Value="Enviar" tabindex="7" class="botao" />                              		</span>                       			</p>                            	                            </fieldset>                    </td>                        <td>                        	<fieldset>                            	<legend class="titulo_formulario">Como Chegar:</legend>                    			<div id="mapa">                        			<img src="imagens/mapa3.png" alt="mapa" />                        		</div>                            </fieldset>                        </td> 					</tr>                </table>				<table class="dir">						<tr>                        <td>                        	<fieldset>                            	<legend>Localização:</legend>                    			<p>                        			Rua José Peregrino,29-Rocha Miranda.                            		Rio de Janeiro - RJ.                      	  		</p>                        		<p>                        			Telefones de contato:                        		</p>                        		<p>                        			(21) 97676-1149                        		</p>								<p>                        			(21) 7867-0087                        		</p>                        		<p>                        			ID:24*52530                        		</p>                                <p>                                	<a href="http://biraomagodosfarois.blogspot.com.br" target="blank"> Blog</a>                                 </p>                                <p>                                           <a href="https://pt-br.facebook.com/magodosfarois" target="blank">Faceboock</a>                                </p>                                <p>                                	<img src="imgagens/logobira.png" alt="logotipo" class="logo"/> 	                                </p>                                      </fieldset>                        </td>                    </tr>                </table>			</form>                      </div><!--conteúdo-->                <div id=rodapé>        </div><!--rodapé-->    	    </div><!-- principal--></body></html>
fieldset{	border: #000000 solid 1px;	width: 265px;	padding: 10px;	float: left;	margin-bottom: 20 px;	margin-left: 47px;	color: #000000;}legend{	font-size: 1,4em;}label{	font-size: 1.2em;	font-weight: bold;	margin-left: 10px;	}form input, textarea{	font-size: 14px;	padding: 5px;	border: #000000 solid 1px;	width: 235px;	margin-left: 10px;	}.botao{	border: 1px solid #000000;	width: 77px;	height: 30px;	font-size: 18px;	font-style: italic;	margin: 5px 10px;	background-color: #ffff00;	color: #000000;	padding-top: 1px;}.botao:hover{	background-color: #FF0000	}#mapa {	 	 overflow:scroll;	 width:600px; 	 height:437px;	 position:relative ;}.chegar{	float: left;	width: auto;	margin-left: 95px;	clear: bottom;	padding-right: 0.01px;}.dir{	float: right;	margin-right: 102px;	.logo{	width:60px;	height:60px;}

O problema mesmo fazendo o que você falou , a borda de legend:"como chegar" fica menor que a imagem do mapa, porém isso só acontece no IE , nos outros navegadores fica perfeito.

Não gostaria de alterar todo o código e modificar  todo design nos outros navegadores , já que em todos  não teve problema nenhum.

Eu vi em um site uma vez a solução para isso , mas não me lembro qual foi o site.

Seu código deixa também a imagem do mapa  por fora da borda!

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Seu código deixa também a imagem do mapa  por fora da borda!

 

 

print-ie.PNG

 

Meu exemplo funciona.  deve ser seu navegador então.

Sinceramente não sei te ajudar.  você têm algum conflito na regra.  Sugiro que refaça, parte por parte.  teste seu código por partes.  

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fabiano aladin

 

Agora que vi no seu seu código mais acima... que você esqueceu de colocar o valor das IDs nos elementos DIV entre aspas.  e no CSS faltou fechar uma das class.

Não sei se era isto que você se referia.quando disse " algumas tags"

 

Procede?

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@fabiano aladin

 

Agora que vi no seu seu código mais acima... que você esqueceu de colocar o valor das IDs nos elementos DIV entre aspas.  e no CSS faltou fechar uma das class.

Não sei se era isto que você se referia.quando disse " algumas tags"

 

Procede?

Sim procede , um erro bobo que eu cometi e quebrei a cabeça a toa1 Muito obrigado pela ajuda!

Não conhecia esse site que você me passou onde posso colocar partes do meu código e testá-los por lá!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×