Table replaced with divs. Works perfectly with Firefox, but IE bugs

[Peanut84]

Hi everyone !

Yesterday I tried to replaced a table which contains a small form and I succeeded. It works fine with Firefox, however, there is a bug with MSIE : the left column in the middle part is 28px away from left when it should be at 0px... I "solved" the problem by putting "#left:-28px;". Firefox ignores it, MSIE reads it and puts the column at the good place, BUT that does not respect W3C standards !

Any help would be greatly appreciated ! I'll write in comments which DIV is not displayed correctly...

<form id="form_aGb7DutNRdm2esNFddFlnLUmvzj4O32l3TzdDjhuk" action="/be7295dbbc75f1b3c9eb4cbc46722d95.php" method="post" style="margin:0px;padding:0px;">
<div style="position:relative;width:700px;background-color:#005E85;overflow:hidden;margin-left:auto;margin-right:auto;">
<input name="lIzAGzmmokT7Uku7tkQG8wsYk5aQsJQr8QiKYcJnlbXjrbH7RKqMZ" value="aGb7DutNRdm2esNFddFlnLUmvzj4O32l3TzdDjhuk" type="hidden" />
   <div style="position:relative;left:0px;top:0px;width:100%;height:28px;background-image:url(/images/formulaires_haut.gif);">
      <div style="position:absolute;left:0px;top:0px;width:28px;height:28px;background-image:url(/images/formulaires_haut_gauche.gif);z-index:3;">
      </div>

      <div style="position:absolute;right:0px;top:0px;width:28px;height:28px;background-image:url(/images/formulaires_haut_droite.gif);z-index:3;">
      </div>
   </div>
   <div style="position:relative;">
<!-- THIS IS THE ONE !!! --->
      <div style="position:absolute;left:0px;top:0px;width:28px;height:10000px;background-image:url(/images/formulaires_gauche.gif);z-index:2;">
      </div>
<!--- END OF THIS IS THE ONE --->
      <div style="position:absolute;right:0px;top:0px;width:28px;height:10000px;background-image:url(/images/formulaires_droite.gif);z-index:2;">
      </div>
      <div style="position:relative;left:0px;right:0px;top:0px;margin-left:28px;margin-right:28px;margin-top:0px;z-index:3;">

         <div class="FML_T">
            IDENTIFICATION REQUISE
         </div>
         <div class="FML_C_T">
            Nom d&apos;utilisateur
         </div>
         <div class="FML_C">
            <input id="input_6VsML1RbTnqRoNC8Ch6KzEbJ1xLmcLPwfLOWTRNktbxKHHEUTTmwncju8he7" name="6VsML1RbTnqRoNC8Ch6KzEbJ1xLmcLPwfLOWTRNktbxKHHEUTTmwncju8he7" value="" type="text" />
         </div>

         <div class="FML_C_T">
            Mot de passe
         </div>
         <div class="FML_C">
            <input id="input_Cdlc4HZylgmhHQ785ck78rQzsDNcJJJJvDRwdXUqxMgspHjLjPr9" name="Cdlc4HZylgmhHQ785ck78rQzsDNcJJJJvDRwdXUqxMgspHjLjPr9" value="" type="password" />
         </div>
         <div class="FML_C_S">
            <input value="Connexion" type="submit" class="FML_Submit" style="margin:0px;" />
         </div>

      </div>
   </div>
   <div style="position:relative;width:100%;height:28px;background-image:url(/images/formulaires_bas.gif);">
      <div style="position:absolute;left:0px;top:0px;width:28px;height:28px;background-image:url(/images/formulaires_bas_gauche.gif);z-index:3;">
      </div>
      <div style="position:absolute;right:0px;top:0px;width:28px;height:28px;background-image:url(/images/formulaires_bas_droite.gif);z-index:3;">
      </div>
   </div>
</div>

Thanks for your help, really appreciate it

 

[BillyRayPreachersSon]

What DOCTYPE are you using? Do you have any other CSS included anywhere on the page? Do you have a URL we can see the whole page at?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

If you change this:

<div style="position:relative; left:0px; right:0px; top:0px; margin-left:28px; margin-right:28px; margin-top:0px; z-index:3;">

to this:

<div style="position:relative; left:0px; right:0px; top:0px; [!]padding[/!]-left:28px; margin-right:28px; margin-top:0px; z-index:3;">

Then all works as expected.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Peanut84]

Yep that works perfectly on both browsers ! Thanks for your help ! Do you know why IE does such a thing ??? Why only the left one, why not the right one too ?

 

[chrissie1]

btw if you tsand on the identification requise box and scroll down weird things happen in FF. din't try it in IE.

Christiaan Baes
Belgium

"My new site" - Me

 

[Peanut84]

Haven't noticed anything wrong with FF, and believe me, I loaded and reloaded the page again, again and again, but thanks a lot for the advice, I'll have a look