...

View Full Version : Shrinking Divs in IE6 (fine in FF)



Kirsehn
07-18-2007, 04:20 PM
I am working on a "blog"-type project for different committees of the University I am working for. The "blog" allows the various committees to post updates on the status of their committee. All the posts for a particular academic year are listed on one page. (The actual posts are stored in a MySQL database and retrieved with PHP).

The project is nearly complete except for a disturbing visual problem in IE6. On pages that have multiple posts on them, the div container that holds posts is repeated for each post. In Firefox these containers appear correctly. In IE6, the containers get thinner (ie: the width seems to shrink) with each repetition, until the text begins to bleed out of the container on both sides. Obviously since a decent number of people still use IE6 this is unacceptable.

I have run W3C validators on both my XHTML and CSS and both validate. I have visually checked my XHTML, CSS, PHP, and even the contents of my database multiple times to look for errors and can't find anything that would cause this.

At this point I do not know what else to check. If anyone could give me any suggestions it would be GREATLY appreciated.

You can see an example of the problem here: https://webapptst.lasalle.edu/stu_affairs/tbae/archive.php?id=1&year=2004&m=1

_Aerospace_Eng_
07-18-2007, 06:24 PM
Hmm remove any whitespace before your doctype including blank lines. Anything above the doctype will cause IE6 to go into quirks mode causing it to render some things incorrectly. If that doesn't work then look into the box model problem.
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Using an XHTML Strict doctype seems to fix the problem.

Kirsehn
07-18-2007, 07:02 PM
Thanks for the reply :)

I actually came back to post that I have found a solution to the problem.

After doing some reading I realized that the problem could be related to the "hasLayout" property in Internet Explorer. The "post" DIV I was using had no width or height defined so might "have a layout." To set "hasLayout" to true I set a height: 1% on the post DIV and the problem disappeared. :)

More information can be found here:

http://www.satzansatz.de/cssd/onhavinglayout.html

_Aerospace_Eng_
07-18-2007, 07:12 PM
Rather than use a hack you can use a strict doctype and the problem is also fixed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum