Home/ Questions/Q 129021
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T05:43:40+00:00

I’ve got a layout bug that shows up in IE6, and I’m trying to

  • 0

I’ve got a layout bug that shows up in IE6, and I’m trying to come up with a way to give some clues to this content in our content area so that it won’t drop down below the navigation menu. Sadly, while this would probably be relatively easy to fix if I could redesign the whole page, I can’t do that…it’s a live site that hosts many, many content pages…and it only breaks in in a couple places, in IE6, in some somewhat unusual circumstances…so taking the risk of a major layout change for the content holder isn’t really reasonable.

The layout is supposed to look something like this:

+-------+ +-------------------+ | Menu  | | Content chunk 1   | |       | +-------------------+ |       | +-------------------+ +-------+ | Content chunk 2   |           +-------------------+             Footer

But in IE 6, it looks like:

+-------+  | Menu  |  |       |  |       |  +-------+  +-------------------+  | Content chunk 1   | +-------------------+ +-------------------+  | Content chunk 2   | +-------------------+             Footer

I’ve been looking at trying to fix this and am going through some of the references suggested here, but I’m hoping a css guru might be able to easily see some light that I am not.

The code looks like this:

<!DOCTYPE html PUBLIC '-//W3C//Dtd Xhtml 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'> <body> <div style='margin: 11px auto; width: 775px'>      <!-- Menu -->     <div style='width:160px; float:left; clear:left; border:#999 1px dashed;'>         Menu Item 1<br />         Menu Item 2<br />     </div>      <!-- Main content area -->     <div style='position: relative; width: 565px; float: left; margin-right: -222px'>          <!-- I'm able to start modifying here. -->         <!-- Content chunk 1 -->         <table border='1'>             <tr>                 <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>                 <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>                 <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>                 <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>                 <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>             </tr>         </table>          <!-- I'd like to be able to stop modifying here. -->          <!-- Content chunk 2 -->         <table border='1'>             <tr>                 <td>This is data chunk 1</td>                 <td>This is data chunk 2</td>                 <td>This is data chunk 3</td>                 <td>This is data chunk 4</td>                 <td>This is data chunk 5</td>             </tr>         </table>          <!-- I have to stop modifying here. -->      <!-- Footer -->     <div style='float: clear; text-align: center;'>         Here's a footer of some kind.  I don't want to be overlapped.     </div>  </div>  </body> </html>

As an aside, I know the css style statements in the areas surrounding the content area aren’t ideal. I didn’t code them, I just have to deal with them.

I haven’t had much luck yet…but I also know that css is not where my expertise resides.

Suggestions? Or is it hopeless?

EDIT: I’ve made some modifications to this question to try to improve clarity…hopefully get rid of a downvote or two. Many thanks to those of you that have already responded…I’m going to start going through those responses now to evaluate them.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. I can’t see any way of correcting this using only CSS. IE6’s wrapping calculation is going to be preformed in such a way that unless the main content area is expanded, the content will be moved under the menu. I don’t know if this will work within your constraints, but a bit of code like this will correct it visually.

    function resize_content ( ) {      var main = document.getElementById ( 'main' );      var content = document.getElementById ( 'content' );      if ( main && content )           main.style['width'] = ( content.clientWidth + 160 ) + 'px'; }

    I used IDs for clarity, but if you couldn’t modify the markup, you could get the elements using relatives.

    • 0