468,272 Members | 1,985 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,272 developers. It's quick & easy.

Table width 100% breaks layout in IE

Hi,

I am trying to integrate phpBB into my existing site design. I am doing
this simply by pasting fragments of my HTML into the phpBB templates.
This works fine in Firefox and Opera but the layout breaks in IE. I have
narrowed down the problem to the fact that phpBB uses tables for layout
and sets the width of those to 100%. If I change this to 80% it looks
correct in IE but not in Firefox.

Is this a bug in IE and if so how can I work around this?

The problem can be seen at:
http://www.bits.bristol.ac.uk/james/.../forum100.html
(table width set to 100%) and at:
http://www.bits.bristol.ac.uk/james/...m/forum80.html (table width
set to 80%).

My CSS is here: http://www.bits.bristol.ac.uk/james/ivsa/style.css
phpBB adds some CSS using an internal style sheet.

I also have exactly the same problem trying to do the same with Gallery
at: http://www.bits.bristol.ac.uk/james/...lery2/main.php

Any help / advice gratefully received.

James
--
James Frayne
ja*************************@yahoo.co.uk
Remove doesnotlikespam to send mail.
Feb 5 '06 #1
2 2901
James Frayne wrote:

I am trying to integrate phpBB into my existing site design. I am doing
this simply by pasting fragments of my HTML into the phpBB templates.
This works fine in Firefox and Opera but the layout breaks in IE. I have
narrowed down the problem to the fact that phpBB uses tables for layout
and sets the width of those to 100%. If I change this to 80% it looks
correct in IE but not in Firefox.
Next time explain "breaks".
Is this a bug in IE and if so how can I work around this?

Yes.
Use the HTML 4.01 Strict DTD.

The sample URL uses a partial HMTL Transitional DTD. This puts IE into
"quirks" (aka: even buggier) mode. It calculates the table width *before*
considering the floated menu. Thus the extra wideness which, you may note,
happens to be the width of the menu.
Even using the Strict DTD, the width must be reduced, say to 98% or 99%,
to allow for the extra width added by the borders.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Feb 6 '06 #2
Jim Moe wrote:
James Frayne wrote:
I am trying to integrate phpBB into my existing site design. I am doing
this simply by pasting fragments of my HTML into the phpBB templates.
This works fine in Firefox and Opera but the layout breaks in IE. I have
narrowed down the problem to the fact that phpBB uses tables for layout
and sets the width of those to 100%. If I change this to 80% it looks
correct in IE but not in Firefox.

Next time explain "breaks".

Apologies for not doing this. Will do next time.
The sample URL uses a partial HMTL Transitional DTD. This puts IE into
"quirks" (aka: even buggier) mode. It calculates the table width *before*
considering the floated menu. Thus the extra wideness which, you may note,
happens to be the width of the menu.
Even using the Strict DTD, the width must be reduced, say to 98% or 99%,
to allow for the extra width added by the borders.


Thanks for your help. I had suspected from some searching that it was to
do with quirks mode being triggered by the transitional DTD but changing
it to strict did not work so I thought I was on the wrong track.
However I had not realised the need to allow for the borders.

Thanks again, I'm off to persuade phpBB to output strict HTML.

James
--
James Frayne
ja*************************@yahoo.co.uk
Remove doesnotlikespam to send mail.
Feb 6 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Andre | last post: by
8 posts views Thread by starritt | last post: by
4 posts views Thread by Alex Meier | last post: by
2 posts views Thread by Logan | last post: by
3 posts views Thread by VK | last post: by
16 posts views Thread by Tantale | last post: by
16 posts views Thread by Charles A. Landemaine | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.