Wide elements truncated in IE

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi guys,
Fairly new to web development, getting super-frustrated at
cross-browser issues. I hope someone can help.

I'm working with a template with a navigation column on the right and a
nice blank margin on the right. The content div therefore has 200px
margins on the left and right.
Inside it, I'm drawing a nice big table. This is often wider than the
content div. Normally the browser allows it to overflow, which is what
I want, but IE truncates it losing up to 200px (I guess not a
coincidence!) of the right-hand-side of my table. Even when the window
is small enough to force a horizontal scroll bar, it doesn't scroll all
the way to the edge of the table!

The situation is like this:

<div id="linkscontent">
<div id="links">
navigation list...
<div id="content">
some content
nice big wide table
some more content

The css arrangement is this:
#linkscontent has the margin-right: 200px;. and #content has the
margin-left: 200px;

I'd like to leave that arrangement as it is because the site is large
and I don't know that it wouldn't break things elsewhere to monkey with

What should I do? I've tried a number of approaches: floats, absolute
position etc. but I don't seem to be making any progress, just
uncovering more odd IE behaviours.

The closest I've got to what I want was positioning the table
absolutely (perhaps inside another div) which at least displays the
full width of the table, but then I had the problem of putting content
beneath the table. I'm not opposed to javascript, but even so I haven't
been able to prize the height of the table from the browser.

Maybe that's the wrong approach anyway.

Let me know if there are any ideas out there.

Jez Austin.

Re: Wide elements truncated in IE

jezaustin@gmail.com wrote:

Quoted text here. Click to load it

Super-frustration is typically caused by attempts at pixel-exact control and
complex layout.

Quoted text here. Click to load it

I don't see anything nice with that, and 200px is surely a wrong approach.
It is most probably coupled with setting the font size in px, which is much
more destructive.

Just redesign it. Make it simple. Very simple. Actually, users don't even
need a navigation column; a link to the main page is enough, when the main
page itself contains suitable navigation, and just a little else.

If symptoms recur, please post the URL.

Jukka K. Korpela ("Yucca")

Re: Wide elements truncated in IE

Jukka K. Korpela wrote:
Quoted text here. Click to load it

What's the alternative? To use percentages? They can obviously break at
extreme viewport sizes, I'd rather prompt the browser to use a
horizontal scroll bar. I suppose em's are fairly sensible, but I'm
working with the client's organisation-wide stylesheets, so I'd rather
not mess it all around.

Quoted text here. Click to load it

Just grepped through the style-sheets for fonts set in pixels, and
there are a couple of rarely used classes which are defined like that
but in general, no the font size is left free or set proportionally.

Quoted text here. Click to load it

I'd love to but my job is to work with someone else's design...


Site Timeline