DOCTYPE STRICT

[shane18]

ok, i used nested DIVs to make my rounded corner box... but if I don't add font-size: 0px; to the the div that had the corner img in it........ it would have too high of a height and would create space not needed causing background color to show up past the corners making it look crappy.... This only happens when I have the strict DOCTYPE. can someone explain why strict doc type does this... or atleast how i get around it? btw im using Firefox(Latest Version)

[trq]

Have you validated your markup against the strict doctype?

[shane18]

<div style="margin: auto; background-color: #222222; color: #FFFFFF; width: 500px;">
<div style="background: url(images/top_right_corner.bmp) no-repeat top right; font-size: 0px;"><img src="images/top_left_corner.bmp" style="width: 13px; height: 13px;"></div>
<div style="height: 400px;">BLAH BLAH BLAH</div>
<div style="background: url(images/bottom_right_corner.bmp) no-repeat top right; font-size: 0px;"><img src="images/bottom_left_corner.bmp" style="width: 13px; height: 13px;"></div>
</div>

 

without the font-size: 0px; .... theres a couple pixels of space and that screws it up.... this problem only happens with STRICT DOCTYPE

[shane18]

wtf, i added display: block; to my img tag and now the extra space doesn't show up... OH I KNO the images were seen as inline text... haha im such noob at css.. haha

[trq]

You really shouldn't style your divs with inline style like that. Put your css in a separate file.

 

And you still didn't answer the question, have you validated your markup?