Ir para conteúdo

POWERED BY:

Arquivado

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

Biano

[Resolvido] erro no compartamento em formulario - css/html

Por , em Desenvolvimento frontend

Recommended Posts

Biano    0

Biano
Postado

Estou desenvolvendo um formulario aparentemente simples mas que no navegador ie esta me dando dor de cabeça e nao estou conseguindo resolver.

 

Caso alguem saiba o antidoto ou o nome da hack pra eu buscar no google fico grato.

 

Visual pretendido:

 

chrome.jpg

 

(esta funcionando corretamente no Opera, Firefox e Chrome.)

 

 

Visual com erro:

ie.jpg

(Este erro so ocorre no ie.)

 

Agradeço atenção de todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

já tentou um display: inline-block ? nos labels ali dos campos ?

 

tipo.. mesmo vendo as imagens, é bacana que você explique qual é o problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biano    0

Biano
Postado

Segue o codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">

<link href="/css/painel1a.css"    rel="stylesheet" type="text/css" />
<link href="/css/menu_interno.css"    rel="stylesheet" type="text/css" />
<link href="/css/jquery-ui.css"  rel="stylesheet" type="text/css" />

<!--[if IE]>
 <script src="/RGRAPH/excanvas/excanvas.original.js"></script>
<![endif]-->

<script src="/js/jquery.min.js" ></script>

<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/jquery.accordion.js"></script>  
<script type="text/javascript" src="/js/jquery.corner.js"></script>
<title>Documento sem título</title>

<style>
body{
font-family:Arial, Helvetica, sans-serif;
size:9px;}
</style>


</head>

<body>

<!-- RECORTAR E COLAR NO HTML -->

<form name="" action="" method="">
<table width="521" height="594" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td colspan="2">ESTRUTURA OPERACIONAL:</td>
  </tr>
 <tr>
   <td height="34" colspan="2"> </td>
 </tr>
   <tr>
   <td height="29px" colspan="2"  style="margin-top:0px; border-bottom: 2px solid #9CF;" align="left">
    <div id="tabela" style="width:auto; background-image:url(images/centro.jpg); background-repeat:repeat-x; float:left;">
    <div id="esq" style="width:25px; height:29px; background-image:url(images/esq.jpg); background-repeat:no-repeat; margin-left:0; float:left;"></div>
    <div id="centro" style="width:auto; float:left; padding:3px;">Nivél</div>
    <div id="dir" style="width:25px; height:29px; background-image:url(images/dir.jpg); background-repeat:no-repeat; float:right;"></div>
    </div></td>
 </tr>
 <tr>
   <td>    <select name="jumpMenu" id="jumpMenu" class="select">
   <option>LOJAS</option>
   <option>Loja 1 - Centro</option>
   <option>Loja 2 - Centro</option>
  </select></td>
   <td>   <select name="jumpMenu" id="jumpMenu" class="select">
   <option> MATRIZ</option>
   <option> MATRIZ 1 - Centro</option>
   <option> MATRIZ 2 - Centro</option>
   </select>  Analitico:
     <input type="checkbox" name="checkbox" id="checkbox" />
     <label for="checkbox"></label></td>
 </tr>
 <tr>
   <td colspan="2"> </td>
 </tr>
 <tr>
   <td height="29" colspan="2" style="background-image:url(images/bk_form.png); background-repeat:no-repeat; margin-top:0px; border-bottom: 2px solid #9CF;">
        <div id="tabela" style="width:auto; background-image:url(images/centro.jpg); background-repeat:repeat-x; float:left;">
    <div id="esq" style="width:25px; height:29px; background-image:url(images/esq.jpg); background-repeat:no-repeat; margin-left:0; float:left;"></div>
    <div id="centro" style="width:auto; float:left; padding:3px;">Período</div>
    <div id="dir" style="width:25px; height:29px; background-image:url(images/dir.jpg); background-repeat:no-repeat; float:right;"></div>
    </div></td>
 </tr>
 <tr>
   <td width="229">    Inicio:<input name="" type="text" size="20" /></td>
   <td width="280"> Fim:<input name="" type="text" size="20" /></td>
 </tr>
 <tr>
   <td colspan="2"> </td>
 </tr>
 <tr>
   <td height="29" colspan="2" style="margin-top:0px; border-bottom: 2px solid #9CF;">
        <div id="tabela" style="width:auto; background-image:url(images/centro.jpg); background-repeat:repeat-x; float:left;">
    <div id="esq" style="width:25px; height:29px; background-image:url(images/esq.jpg); background-repeat:no-repeat; margin-left:0; float:left;"></div>
    <div id="centro" style="width:auto; float:left; padding:3px;">Data Fixa</div>
    <div id="dir" style="width:25px; height:29px; background-image:url(images/dir.jpg); background-repeat:no-repeat; float:right;"></div>
    </div>    </td>
 </tr>
 <tr>
   <td>    Inicio:<select name="DataInicial" id="DataInicial" class="select">
   <option>Data inicial</option>
   <option>00/00/0000</option>
   <option>00/00/0000</option>
  </select></td>
   <td> Fim:   <select name="DataFinal" id="DataFinal" class="select">
   <option>Data inicial</option>
   <option>00/00/0000</option>
   <option>00/00/0000</option>
  </select></td>
 </tr>
 <tr>
   <td colspan="2"> </td>
 </tr>
 <tr>
   <td height="29" colspan="2" style="margin-top:0px; border-bottom: 2px solid #9CF;">
        <div id="tabela" style="width:auto; background-image:url(images/centro.jpg); background-repeat:repeat-x; float:left;">
    <div id="esq" style="width:25px; height:29px; background-image:url(images/esq.jpg); background-repeat:no-repeat; margin-left:0; float:left;"></div>
    <div id="centro" style="width:auto; float:left; padding:3px;">Tipo de indicador</div>
    <div id="dir" style="width:25px; height:29px; background-image:url(images/dir.jpg); background-repeat:no-repeat; float:right;"></div>
    </div>    </td>
 </tr>
 <tr>
   <td>    <select name="jumpMenu" id="jumpMenu" class="select">
   <option>LOJAS</option>
   <option>Loja 1 - Centro</option>
   <option>Loja 2 - Centro</option>
  </select></td>
   <td>   <select name="jumpMenu" id="jumpMenu" class="select">
   <option> MATRIZ</option>
   <option> MATRIZ 1 - Centro</option>
   <option> MATRIZ 2 - Centro</option>
   </select></td>
 </tr>
 <tr>
   <td colspan="2"> </td>
 </tr>
 <tr>
   <td height="29" colspan="2" style="border-bottom: 2px solid #9CF;">
        <div id="tabela" style="width:auto; background-image:url(images/centro.jpg); background-repeat:repeat-x; float:left;">
    <div id="esq" style="width:25px; height:29px; background-image:url(images/esq.jpg); background-repeat:no-repeat; margin-left:0; float:left;"></div>
    <div id="centro" style="width:auto; float:left; padding:3px;">Eixo</div>
    <div id="dir" style="width:25px; height:29px; background-image:url(images/dir.jpg); background-repeat:no-repeat; float:right;"></div>
    </div>    </td>
 </tr>
 <tr>
 <td>    <select name="EIXOX"  id="EIXOX">
   <option> Mes Ano</option>
   <option> Setores</option>
   <option> Processos</option>
  </select>
  </td>
   <td>Mostrar Meta:<input name="" type="radio" value="" />  Comparar Metas:<input name="" type="radio" value="" /></td>
 </tr>
 <tr>
   <td colspan="2"> </td>
 </tr>
 <tr>
   <td style="border-bottom: 2px solid #9CF;"><div id="tabela" style="width:auto; background-image:url(images/centro.jpg); background-repeat:repeat-x; float:left;">
    <div id="esq" style="width:25px; height:29px; background-image:url(images/esq.jpg); background-repeat:no-repeat; margin-left:0; float:left;"></div>
    <div id="centro" style="width:auto; float:left; padding:3px;">Tipo Gráfico</div>
    <div id="dir" style="width:25px; height:29px; background-image:url(images/dir.jpg); background-repeat:no-repeat; float:right;"></div>
    </div></td>
   <td style="border-bottom: 2px solid #9CF;">
        <div id="tabela" style="width:auto; background-image:url(images/centro.jpg); background-repeat:repeat-x; float:left;">
    <div id="esq" style="width:25px; height:29px; background-image:url(images/esq.jpg); background-repeat:no-repeat; margin-left:0; float:left;"></div>
    <div id="centro" style="width:auto; float:left; padding:4px;">Tamanho do Gráfico</div>
    <div id="dir" style="width:25px; height:29px; background-image:url(images/dir.jpg); background-repeat:no-repeat; float:right;"></div>
    </div>    </td>
 </tr>
 <tr>
   <td>    <select name="jumpMenu"  id="jumpMenu">
   <option>Colunas</option>
   <option> Graficos</option>
   <option> velocimetros</option>
  </select>
  </td>
   <td>    <select name="jumpMenu" id="jumpMenu">
   <option>Grafico Pequeno</option>
   <option>Grafico Médio</option>
   <option>Grafico Grande</option>
  </select>
 </td>
 </tr>
 <tr>
   <td colspan="2"> </td>
 </tr>
 <tr>
   <td colspan="2" align="center">
   <input type="image" src="images/btn_ggraficos.png" alt="Submit button">
  <!--input name="GERAR GRAFICO" type="button" value="GERAR GRAFICO" /-->
   </td>
 </tr>
</table>

</form>

<!-- fIM DO RECORTE -->

</body>
</html>

 

 

O problema esta na imagem background que coloquei nos titulos, (Imagem az.)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Aaaai... meus olhos... tabelas, tabelas e mais tabelas... Divs dentro de células de tabela... Ohh, meu Deeeeus, nãaaaaaaaao!

 

Hehe, brincadeiras à parte, cara, você já ouviu falar sobre Tableless? Se não dê uma pesquisada.

Se já ouviu falar, sabe o que é ou depois de pesquisar, dê uma olhada aqui:

http://henriquebarcelos.in/blog/2011/12/03/construindo-um-formulario-semantico-em-html/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biano    0

Biano
Postado

Meu amigo muito obrigado, agradeço ter me apresentado esse tutorial.

Sinceramente eu desconhecia as regras css para criação de formularios.

 

Vou literalmente comer esse tutorial em seguida apresnto o resultado.

 

Att

 

Fim do Post!!!

 

Aaaai... meus olhos... tabelas, tabelas e mais tabelas... Divs dentro de células de tabela... Ohh, meu Deeeeus, nãaaaaaaaao!

 

Hehe, brincadeiras à parte, cara, você já ouviu falar sobre Tableless? Se não dê uma pesquisada.

Se já ouviu falar, sabe o que é ou depois de pesquisar, dê uma olhada aqui:

http://henriquebarcelos.in/blog/2011/12/03/construindo-um-formulario-semantico-em-html/

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