[SOLVED] Firefox messing up a table

[mark110384]

Hey guys I think I have a problem with my coding, the layout works fine in IE but in Firefox I have issues. The DIV table stretches beyond the page thus making the user have to scroll, but in IE  it fits perfectly in the middle of the page, it'll probaly be some kinda school boy error on my part but any comments would be apreciated.

 

 

The PHP, JS and HTML

  <div  id="brochures">

        <table width="99%" border="1" background="download_bg.bmp">

          <tr>

            <td height="16"><table width="100%" border="1" cellspacing="0" cellpadding="0">

                <tr>

                  <td height="42">Spacer</td>

                </tr>

                <tr>

                  <td height="56"><table width="100%" border="1" cellspacing="0" cellpadding="0">

                      <tr>

                        <td width="40%"><font face="lucida sans" size="2">Select

                          a <b>Brochure</b> to view</font></td>

                        <td width="60%"> </td>

                      </tr>

                      <tr>

                        <td> </td>

                        <td>

                          <?

 

$sql = "SELECT * FROM drawings ORDER BY drawing_id";

 

$result = mysql_query($sql) or die  ("Data not found");

 

while($myrow = mysql_fetch_array($result))

{

$drawingid = $myrow['drawing_id'];

 

$drawingtitle = $myrow['drawing_title'];

 

$drawingurl = $myrow['drawing_url'];

 

 

  ?>

                           <font face="Lucida sans" size="1" color="#000000">

                          <?

echo "<a class='navi_text' href=$drawingurl>$drawingid - $drawingtitle</a></br>"; ?>

                          </font></a>

                          <?

}  

?>

                        </td>

                      </tr>

                    </table></td>

                </tr>

                <tr>

                  <td></td>

                </tr>

                <tr>

                  <td height="57">Bottom Image</td>

                </tr>

              </table></td>

          </tr>

        </table>

      </div>

 

 

CSS

 

#brochures

{

 

position: absolute;

top: 55%;

left: 17%;

width: 100%;

height: 681px;

visibility: hidden;

 

}

[haku]

As IE is not a standards compliant browser, you will save yourself hours of headaches coding first in a standards compliant browser like FF, and then adjusting for IE after the fact. Trying to do it the opposite way around will just cause problems.

[mark110384]

I've found a soloution, just the spend the whole morning pulling your hair out and tweeking with the CSS.

[r-it]

and the solution was.....?

please also mark the thread as solved after you have found and explained the sln

[mark110384]

I created a class for the table as follows

 

.bg_downloads

{

position: absolute;

width: 68%;

height: 200;

top: 60%;

left: 17%;

 

}

 

 

This manipulated where the table would appear on the page