Member Avatar for fedegrafo

Hi everyone, my name is fedegrafo and this is my first post here.

I have a problem with a table in a liquid layout. It is ok in FF but It does'nt work in IE6/7.

The layout is made by a left column (200px) and a right liquid colum. Body is floating left and has a margin (left-right 5%) to ensure the liquidity. Inside the right column I have a div containing a table. When the table is rich of data and so it grows in width, It breaks the layout. So it'is no more contained in the box.
Is it possible that table enlarges the right-column also in ie? and on the other side when I resize the viewport the table remains inside its box and scroll appears?

here is the code:

Thanks in advance for help

fedegrafo

  • 2 Contributors
  • 4 Replies
  • 99 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by fedegrafo

Dani AI

Generated

Short summary and practical fixes for the symptom described (table inside the fluid/right column growing and breaking the layout). Old IE versions handle table intrinsic width and overflow differently: unbreakable content or large cells can force the table wider than its container, and IE6/7 sometimes needs "hasLayout" set on the container before overflow will clip or show scrollbars.

Try these steps (small, incremental):

  • Wrap the table in a block-level container and force scrollbars when needed; also trigger hasLayout in IE6/7:
.table-wrap {
  overflow: auto; /* cross-browser scrollbar */
  zoom: 1;        /* triggers hasLayout in IE6/7 */
}
  • Make the table respect the container width and allow cell content to break:
.table-wrap table {
  width: 100%;
  table-layout: fixed;
}
.table-wrap td {
  word-wrap: break-word;
  white-space: normal;
}

Notes and troubleshooting:

  • table-layout: fixed changes how column widths are computed; set explicit widths with a colgroup if you need precise columns.
  • word-wrap: break-word helps break long strings or long URLs that would otherwise expand the table.
  • If only IE6 is misbehaving, keep the zoom:1 rule scoped to an IE-only stylesheet (conditional comments).
  • To diagnose, temporarily add background colors and outline widths to the wrapper and table to see which element grows; also check for oversized images or very long unbroken strings in cells.

Further reading: CSS table-layout and word-wrap on MDN for behavior details (table-layout, word-wrap).

Recommended Answers

All 4 Replies

Member Avatar for MelechM

For me it looks...the same.

Member Avatar for fedegrafo

For me it looks...the same.

Excuse me for the english conprehension, but your phrase means:
I have the same problem or I see the layout working good also in ie6/7?!:-O

Bye

Member Avatar for MelechM

It looks the same on both ie 7 and FF 2. I dont have ie6 to compare with. sorry. I phrased it wrong :)

Member Avatar for fedegrafo

Hi MelechM,


but if you resise window for example to 800x600 ..... can you see the scrollbars also in ie7?

thanks for help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.