March 13th, 2004, 09:54 AM
IE6 inserts unexpected space below table (XHTML transitional, CSS)
I've got different CSS layout problems concerning the redesign of a website which will be dedicated to an online shop selling items for online roleplaying games.
The redesigned website is planned to be set up in valid XHTML 1.0 Transitional.
Though it at first validated unter Strict, too, I've chosen this doctype because the content (main text, items etc.) is generated automatically by a content management system (CMS: OScommerce) and pasted into the XHTML template I did. This PHP generated code seems to contain presentational markup such as layout tables. For I am not allowed to change the PHP-Scripts I thought Transitional would fit the best.
You can reach my original template here: http://www.typorism.com/clients/gameconomy/gc.html
(URI of the CSS file: http://www.typorism.com/clients/gameconomy/gc.css)
The problem now is, while beeing viewed in IE6/Win and Mozilla Firefox, the template of mine shows no mistakes concerning these browser's rendering output. After inserting the HTML code of the CMS generated content IE6 inserts about 300 pixel space between a sample table and the rest of the content. Firefox doesn't show this behaviour.
An demonstration of the final HTML containing the CMS output is available here: http://www.typorism.com/clients/game...c_testing.html
(URI of the CSS file: same as above)
As for a second, someone also sent me a screenshot he made while displaying the first of both sites in a newer Opera Browser. The layout wasn't displayed as I wanted it to do, too (spaces between or at the top of the graphics on the left caused the layout to break). I suppose the second website shows the same behaviour, I wasn't allowed to check it, yet.
I checked out different css relating websites and tried a lot, but didn't found any resolution to these problems. Would anyone help me, please? I'd be glad about responses and/or helpful css snippets!