Web Design Discussion - Layout w/tables and CSS. Problem in IE

Print Page | Close Window

Layout w/tables and CSS. Problem in IE

Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: Web Design Discussion
Forum Description: Discussion on web design and development subjects.
URL: https://forums.webwiz.net/forum_posts.asp?TID=11072
Printed Date: 29 March 2026 at 12:00pm
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com

Topic: Layout w/tables and CSS. Problem in IE

Posted By: Semikolon
Subject: Layout w/tables and CSS. Problem in IE
Date Posted: 02 July 2004 at 11:22am

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) http://64.156.223.151/ff.png - it shows EXACTLY like it should .. but in IE, which has this poor CSS Support, http://64.156.223.151/ie.png - 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;
}

Replies:

Posted By: dpyers
Date Posted: 02 July 2004 at 1:00pm

In # middle, add a

clear:both;

-------------

Lead me not into temptation... I know the short cut, follow me.

Posted By: Semikolon
Date Posted: 02 July 2004 at 1:06pm

hmmm.. didn't notice any difference

Posted By: Semikolon
Date Posted: 02 July 2004 at 1:12pm

I know the problem occurs when using width: 100% together with padding and margins, but how do I avoid it?

Posted By: Semikolon
Date Posted: 02 July 2004 at 1:18pm

I have updated CSS in #page, #header, #navigation, #middle and #footer..

#page

{

 border: solid 1px black;

 padding: 5px;

 width: 100%;

}

#header

{

 border: #000000 1px solid;

 background-color: #f1f1f1;

 width: 100%;

 margin: 5px 5px 5px 5px;

}

#navigation

{

 border: #000000 1px solid;

 background-color: #f1f1f1;

 width: 100%;

 margin: 0px 5px 0px 5px;

}

#middle

{

 margin: 5px 5px 5px 5px;

 width: 100%;

 height: 100%;

}

#footer

{

 border: #000000 1px solid;

 background-color: #f1f1f1;

 width: 100%;

 margin: 0px 5px 5px 5px;

}

the firefox version looks the same, but the IE version now looks like http://64.156.223.151/ie2.png - this

all I need is now to get space after the right side of the boxes

Posted By: dpyers
Date Posted: 02 July 2004 at 1:47pm

This is actually easier with div's than with tables because you don't have to deal with browser glitches with table handling as well a css handling. Perhaps try cell padding ? or wrap the contents of the center td in a div, apply the border style to the dive, and use padding on the td instead of a margin.

-------------

Lead me not into temptation... I know the short cut, follow me.

Posted By: Semikolon
Date Posted: 02 July 2004 at 6:20pm

If you can show me how to do it with Divs, that's no problem, but to be honest, I have no idea how to do it.. I have tried several things, but everything fails..

but I will try what you added after posting tomorrow..

thank you

Posted By: Shimpi06
Date Posted: 03 July 2004 at 5:23pm

I believe there is a bug in IE that misimpliments CSS box models as prescribed by the W3C.

This website explains 3 work arounds to fix that problem.

http://glish.com/css/hacks.asp - http://glish.com/css/hacks.asp