Strange display of a div

Is it a Mozilla or an Explorer thing?

[Gusgsm]

I've been using Explorer an validating my pages with W3C and WDG validators.

But yesterday I installed Mozilla 1.6 (Windows 2000, SP3) and to my surprise, a div with a picture and a caption inside showed absolutelly disadjusted in Mozilla.

An example of the code is:

<div style="width: 377px;">
<div><img class="apart" src="../imagen/Tumbletum.jpg" width="375px" height="413px" alt="" /></div>
<div class="piefot">Tumbleweed Dunes, 2000.</div>
</div>

The class "piefot" is defined as:

div.piefot {
font-family: Arial, sans-serif;
font-size: 12px; line-height: 14px;
background-color: #ccccff;
color: #000000;
padding: 10px; border-width: 0px 1px 1px 1px ;
border-style: solid; border-color: #000000;
}

The "apart" class is:

img.apart {
float: none;
border-style: solid; border-color: #000000; border-width: 1px;
}

This happens consistently in all the pages I have aplied the code: The div with the caption is always a 10% or so wider than the one eith the picture.

any idea of why or how to solve it?

Thanks in advance

[grahamstewart]

First problem - you are suffering from "div-itis" - a common but curable complaint in people who are new to CSS.

You only really need one div here, to group the caption and the image together..

<div class="photo" style="width:377px"> 
 <img src="../imagen/Tumbletum.jpg" width="375" height="413" alt="" /> 
 Tumbleweed Dunes, 2000. 
</div> 

then you can use this css..

.photo { 
  font: 12px/14px Arial, sans-serif; 
  color: #000; 
  background-color: #ccf; 
  padding: 10px; 
  border: 1px solid #000; 
  text-align:center; 
} 
.photo img { 
  border: 1px solid #000; 
  display:block; 
} 

Not sure if that is exactly the look you require, but it should be pretty close. Post some more details if you need it adjusted.

I also changed some CSS to shorthand and removed the 'px' from the image width and height as it shouldn't be used there.

[Gusgsm]

Thanks a lot,

(I'll try to find a cure for my mad-divs disease ;) )