Erro no internet explore

fabiano aladin · 9 de julho de 2015

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>

DiF · 9 de julho de 2015

@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 · 9 de julho de 2015

@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.

DiF · 9 de julho de 2015

@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.

fabiano aladin · 9 de julho de 2015

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!

DiF · 9 de julho de 2015

@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 · 9 de julho de 2015

@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!

DiF · 9 de julho de 2015

@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.

fabiano aladin · 10 de julho de 2015

<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!

DiF · 10 de julho de 2015

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

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.

fabiano aladin · 21 de setembro de 2015

pode fechar tópico q já resolvi esqueci de fechar umas tags!

DiF · 21 de setembro de 2015

@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?

fabiano aladin · 21 de setembro de 2015

@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á!