285935 - Rendering of auto-sized <SPAN> elemets containing auto-sized <IMG> and/or <P> is incorrect

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Pete Stensones]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.5) Gecko/20041110 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.7.5) Gecko/20041110 Firefox/1.0

In the page http://www.stensones.com/diving/dive_photos_sharm_oct2004.asp a
series of <span> elements are listed these contain either an <img> element or an
<img> element and an <p> element.  The styltsheet applied adds a background
colour and margin to the <spans>s and a border to the embedded <img> elements,
these shoudl be rendered (if my and IE 6's understanding of CSS is correct) as a
series of boxes that stack left-to-right then top-to bottom as browser space
allows.  Mozilla seems to ignore the space of the <span> elements contents when
evaluating teh size fo the spans resulting in all <span> elemetns and contents
being "stacked up" mor or less on top of each other.

page code snippet:
  <link rel="stylesheet" type="text/css" href="../style/dive_pages.css"
title="stensones"> 

...

   <span class="photosection">
    <a href="../photos/photos_big_picture.asp?diving/sharm/oct_2004/dunraven
Blotched hawkfish (Cirrhitichthys aprinus).jpg" title="Link to a large hi-res
version of this image">
     <img src="../images/diving/sharm/oct_2004/dunraven Blotched hawkfish
(Cirrhitichthys aprinus)_thumb.jpg" alt="dunraven Blotched hawkfish
(Cirrhitichthys aprinus)">
    </a>
   </span> 

   <span class="photosection">
    <a href="../photos/photos_big_picture.asp?diving/sharm/oct_2004/dive_1.jpg"
title="Link to a large hi-res version of this image">
     <img src="../images/diving/sharm/oct_2004/dive_1_thumb.jpg"
alt="dive_1_thumb.jpg">
    </a>
   </span> 

...

stylesheet extract:

span.photosection
{
 margin : 1em;
 padding : 6px;
 width : 306px;
 background-color : white;
 border-top-color : white;
 border-left-color : white;
 border-right-color : rgb(200,200,200);
 border-bottom-color : rgb(200,200,200);

 vertical-align : top;
 color : inherit;
 border-style : solid;
 border-width : 1px;
 text-align : justify;
}

span.photosection a img 
{
 border-style : solid;
 border-color : black;
 border-width : 3px;
}

This page renders as I would expect with IE 5.5 and 6, but not Firefox.
These span sections are simply repeated.

Reproducible: Always

Steps to Reproduce:
1.start Mozilla
2.browse to http://www.stensones.com/diving/dive_photos_sharm_oct2004.asp
3.marvel at the mess.
4.start IE
6.browse to http://www.stensones.com/diving/dive_photos_sharm_oct2004.asp
7.see what it should look like.
3.

Actual Results:  
images are stacked on top of each other in manner suggesting rendering engine
thinks each span has almost no content, resulting in a visual mess.

Expected Results:  
images should tessalate on an orderly pattern being large enough to acommodate
there embedded <img> and <p> tags (in other words it should look like it does in IE)

I only have the default theme loaded

Comment 1

[José Jeria]

You have width on spans, which is a inline element. Inline element cannot have
width/height values. 

Try floating the spans. Ask in CSS forums for help with the CSS. Bugzilla is to
report browser bugs.

Comment 2

[Pete Stensones]

The <spans> are not, and SHOULD not be floated, they are inline elments, and 
should size to fit their content and then render in-line, the CSS is valid, so 
is the HTML, its the rendering engine in mozilla that is at fault here.

Comment 3

[:Gavin Sharp [email: [e-mail]]]

Inline elements should not expand to contents in that way, per CSS spec. See
http://www.w3.org/TR/REC-CSS2/visudet.html and bug 45819.