Nested boxes problem

Question

I'm trying to make nested boxes in CSS and place a picture (or a flash movie) inside the whole thing. The problem is that atleast Explorer adds a 750 x 4 sized empty space under the picture. Is there a way to get rid of that empty space? A picture of the problem may clear things up a bit: take a look

How should I change the following code?

<div style="border:solid 4px #FFFFFF; width:768px;">
<div style="border:solid 1px #E6E6E6;">
<div style="border:solid 1px #FFFFFF;">
<div style="border:solid 1px #CCCCCC;">
<div style="border:solid 1px #FFFFFF;">
<div style="border:solid 1px #E6E6E6;">
<div>
<img src="test.gif" width=750px; height: 138px;>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

<img src="test.gif" width=750px; height: 138px;>

You've got some invalid HTML on that line (the width and height parts). Try something like this:

<img src="test.gif" style="width:750px; height: 138px;">

Ofcourse, the proper way is getting rid of all inline CSS styles, by replacing them with classnames and ID's, and defining a style for classes through CSS.

Answer 2

Try:

<div style="border:solid 4px #FFFFFF; width:768px; overflow:hidden;">
<div style="border:solid 1px #E6E6E6;">
<div style="border:solid 1px #FFFFFF;">
<div style="border:solid 1px #CCCCCC;">
<div style="border:solid 1px #FFFFFF;">
<div style="border:solid 1px #E6E6E6;">
<div style="overflow:hidden;">
<img src="test.gif" width=750px; height: 138px;>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

Make your code valid:

<img src="test.gif" width="750" height="138" />

The image tag supports width and height, but doesn't need pixels just the value.

Try to use a stylesheet, inline styles are bad practice.