The following HTML causes the DIV tag to overlap html below
This wont happen if I remove “height:50px;” or“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">“
I know removing the DocType Tag will resolve the issue, but I don’t what to disable the standards compliance.
What should I do to make the code below standard compliant.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
<div id="Div1" style="display:block;height:25px">
DIV Line 1<BR/>
DIV Line 2<BR/>
DIV Line 3
</div>
This text is outside of the DIV
</body>
</html>
Div Tag with height in style overlaps HTML below
Raphael Pina
Prodigal Son
@_Buzz: Your code is compliant and what is now happening is IE7 now supports the overflow of content correctly. "Div1" has a height of 25px and the text within that div is broken across lines that then extend beyond the 25px. This will make the text go outside the "Div1" box that is restricted to 25px. The next line of text is then placed right at the bottom of "Div1" There for if there is content that overflows the "Div1" box it will overlap like you are seeing in your case. The best way to fix this is to not set a specific height.
--Arron Eicholz [MSFT]