|
|
Posted by jezaustin on 11/27/51 11:59
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.
Navigation:
[Reply to this message]
|