Wide elements truncated in IE

J

jezaustin

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>
<div id="content">
some content
<table>
nice big wide table
</table>
some more content
</div>
</div>


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
it.

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.

thanks,
Jez Austin.
 
J

Jukka K. Korpela

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

Super-frustration is typically caused by attempts at pixel-exact control and
complex layout.
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.

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.
 
J

jezaustin

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

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.
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 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.
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.

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

Thanks,
Jez.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top