Spent 8 hours.. works in FF, not in IE. 1

[jpo245]

Im new to CSS, and designed a page from scratch.

http://old.rathernifty.com/nustyle.html

In FF, it looks reasonable, with the exception of the little tiled boxes on the lower half of the screen. How does one put a really long word inside with out it spilling out of the box?


In IE, it looks terrible. Scrolling up and down causes some boxes to disappear!! The tiled boxes also aren't contained properly, they spill out over the boundary container.

I sent in my css and html thru the w3 validators, and it gives errors, but it doesnt seem like they are the cause of the problem.

Could any kind soul point me in the right direction to fix this?

Sigh...

Many thanks!

 

[Vragabond]

Ok, lets go over this. First, the page does not differ that much when I use my Mozilla or IE6. Only the expected misaligning of the boxes in IE.

That happens because Geckos treat widths and heights as sacred (whatever you restrict your box to, it will stay that size) while IE chooses to expand boxes to accomodate the content.

Geckos have no ability to handle text that is too long. In CSS3 there are some properties that will control breaking long words, but they are not supported yet. However, the question is, will you be using such long words?

IE has a proprietary css attribute called word-wrap which can be set to break-word and can be used in your example. If you are really expecting such long words in boxes, I would suggest you use it, because it will help you preserve the alignment on your page, since boxes will no longer expand in size.

 

[tgreer]

You also need a valid "doctype", which helps minimize cross-browser issues.

Thomas D. Greer

http://www.tgreer.com