I’ve got a really frustrating problem with a web application I work on (I didn’t originally write it). It uses frames for the layout scarily enough. The problem I’m having is that all elements with a background colour and border set via CSS default to 100% width. I’ve just tested div elements, paragraph elements etc.
I removed the stylesheet completely and then tested it and I had the same problem, so it’s not the stylesheet causing the problem.
I wrote a quick test to make sure it wasn’t conflicting code and used the same doctype and xmlns as ours – I get the same problem. Here’s the example code.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'> <html xmlns='http://www.w3.org/1999/xhtml'> <head> <style type='text/css'> #test { border:1px solid #ccc; background-color:#ddd; } </style> </head> <body> <div id='test'> Test information! </div> </body> </html>
Any ideas?
I think this is required by HTML/CSS. Block elements extend the full width unless there is something to stop them.
(FF has the same behaviour.)