Layout w/tables and CSS. Problem in IE

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   Yo..

I'vo got this problem with using CSS in this crappy CSS support less browser called Internet Explorer..

In Mozilla Firefox (and probably other versions and hopefully Opera) it shows EXACTLY like it should.. but in IE, which has this poor CSS Support, it looks terrible!

I have come to the solution with having an extra stylesheet for IE that corrects everything, but I can't figure out what to put in it

The HTML I use is like this:

<script language="javascript" src="<% = strRoot %>includes/default_javascript.js" type="text/javascript"></script>

  <meta name="Copyright" content="Copyright (c) Simen Arntsen 2004">

  <link href="<% = strSkinPath %>style.css" rel="stylesheet" type="text/css" /><%

  If InStr(1, BrowserType(), "IE", 1) > 0 Then Response.Write("<link href=""" & strSkinPath & "ie_x_style.css"" rel=""stylesheet"" type=""text/css"" />") %>

  </head>

 <body>

  <table id="page">

   <tr>

    <td>

     <table id="header">

      <tr>

       <td>

<!-- #include file="header_inc.asp" -->

       </td>

      </tr>

     </table>

    </td>

   </tr><%

   If blnNavigationBar = True Then %>

   <tr>

    <td>

     <table id="navigation">

      <tr>

       <td>

<!-- #include file="navigation_inc.asp" -->

       </td>

      </tr>

     </table>

    </td>

   </tr><%

   End If %>

   <tr>

    <td>

     <table id="middle" cellpadding="0" cellspacing="0">

      <tr><%

       If blnLeftColumn = True Then %>

       <td width="<% = strLeftColumnWidth %>" height="100%">

        <table id="left">

         <tr>

            <td valign="top">

<!-- #include file="left_inc.asp" -->

            </td>

         </tr>

        </table>

       </td><%

       End If %>

       <td width="<% = strContentColumnWidth %>" valign="top">

        <table id="content">

         <tr>

            <td>

            <!-- [===========================================================================] -->

            <!-- [============================ Start Page Content ===========================] -->

            <!-- [===========================================================================] --><%

             Call FormatTop("", "Innhold", "Her skal innholdet vere") %>

             <p>Dette er innholdet</p><%

             Call FormatBottom() %>

            <!-- [===========================================================================] -->

            <!-- [============================= End Page Content ============================] -->

            <!-- [===========================================================================] -->

            </td>

         </tr>

        </table>

       </td><%

       If blnRightColumn = True Then %>

       <td width="<% = strRightColumnWidth %>" height="100%">

        <table id="right">

         <tr>

            <td valign="top">

<!-- #include file="right_inc.asp" -->

            </td>

         </tr>

        </table>

       </td><%

       End If %>

      </tr>

     </table>

    </td>

   </tr>

   <tr>

    <td>

     <table id="footer">

      <tr>

       <td>

<!-- #include file="footer_inc.asp" -->

       </td>

      </tr>

     </table>

    </td>

   </tr>

  </table>

the CSS looks like this

[CODE]BODY

{

 font-family: Tahoma, 'Trebuchet MS' , Arial, Verdana;

 font-size: 12px;

 margin: 10px;

}

#page

{

 border: solid 1px black;

 padding: 10px;

 width: 100%;

}

#header

{

 border: #000000 1px solid;

 background-color: #f1f1f1;

 width: 100%;

 margin: 0px 0px 5px 0px;

}

#headercontent

{

 width: 100%;

}

#navigation

{

 border: #000000 1px solid;

 background-color: #f1f1f1;

 width: 100%;

}

#middle

{

 margin: 5px 0px 5px 0px;

 width: 100%;

 height: 100%;

}

#left

{

 border: #000000 1px solid;

 background-color: #f1f1f1;

 vertical-align: top;

 height: 100%;

 width: 100%;

 padding: 5px;

}

#content

{

 margin: 0px 10px 0px 10px;

 border: #000000 1px solid;

 background-color: #f1f1f1;

 vertical-align: top;

 width: 100%;

 padding: 5px;

}