Older Browser Issues

[chr.s]

Hi, I'm having some problems with a webpage's layout in (surprise) older version of IE.

I've tried a number of proposed solutions I found on the net but nothing seems to work - anyway, here's the code:

======THE CSS======
* {
   margin: 0px;
   padding: 0px;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
}

#navigation {
   width: 220px;
   margin-left: 20px;
   position: fixed;
   float: left;
}

#navigation ul {
   margin: 0px;
   list-style-type: none;
   padding-top: 19px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-left: 0px;
   width: 220px;
   border-top-width: 1px;
   border-top-style: solid;
   border-bottom-width: 1px;
   border-bottom-style: solid;
}

#navigation ul li {
   border-bottom-width: 1px;
   border-top-width: 1px;
   border-top-style: solid;
}

#content {
   width: 700px;
   float: left;
   margin-left: 260px;
   margin-top: 180px;
   border-top-width: 1px;
   border-top-style: solid;
   padding: 0px;
   margin-bottom: 40px;
   position: relative;
}

.contentblock {
   padding-top: 20px;
   padding-right: 0px;
   padding-bottom: 19px;
   padding-left: 0px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
}

.contentblock img {
   height: 220px;
   width: 220px;
   float: left;
   margin-top: 0px;
   margin-right: 20px;
   margin-bottom: 20px;
   margin-left: 0px;
   clear: both;
}

.contentblock .info {
   margin-bottom: 20px;
   position: relative;
   float: left;
}

.contentblock h3 {
   margin: 0px;
   padding: 0px;
   width: 100%;
   display: block;
}

p {
   margin: 0px;
   padding-top: 0px;
   padding-right: 0px;
   padding-bottom: 20px;
   padding-left: 0px;
   clear: left;
}

======THE HTML======

   <div id="navigation">
      <img />
      <ul>
         <li></li>
         <li><a></a></li>
         <li><a></a></li>
         <li><a></a></li>
         <li><a></a></li>
         <li><a></a></li>
      </ul>
   </div>

   <div id="content">

      <div class="contentblock">
         <h1></h1>
            <img src="" />
            <div class="info">
               <h3></h3>
               <h3></h3>
               <h3></h3>
               <a href="">link 1</a>
               <a href="">link 2</a>
            </div>
            <p></p>
      </div>
   </div>

Apologies if that's too much info, I thought it would be best to include too much rather than too little.

The idea is to have the navigation at the left (preferably fixed when the user scrolls) and the rest of the content just to the right of the navigation.

The problem I have varies from version to version. In IE6, the left margin on the "content" div seems to have been doubled (changing its display to inline has no effect) and is pushed over to the right. In IE7, the "content" div is in roughly the right place, but the "navigation" div has now moved from the left-hand side of the window, over to the right of the content.

Any ideas?

[bperiod]

IE has different margin and padding calculation. Maybe that's the error of double thing. Try using

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

codes. Maybe.

[diafol]

You sure you want to bother with IE6? A conditional statement should work. It's a real shame that IE exists at all. Otherwise you could use CSS3.