352829 - Wrong understanding and swoing HTML tags and CSS

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[volgot]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

FIELDSET and DIV tags ALLWAYS breaking into different lines even if they are enclosed into another tags, and the CSS sizes of simple html tags like STRONG allways ingnoring, the IE and Opera don't do it, so it's complitly stupid. 

Reproducible: Always

Steps to Reproduce:
1. <fieldset style="width:158px;border:0;padding-bottom:20px"><legend style="padding-bottom:3px">$rescat[title]</legend><div style="background-image:url($cat_img);background-position: center center; background-repeat: no-repeat;width:110px;height:90;margin-left:9px;margin-top:20px;border: white 1px solid" bgcolor=white><img src=/inc/img/blank.gif width=110 height=90 alt="$rescat[title]" border=0></a></div></fieldset>
2. <strong style="width:158px;border:0;padding-bottom:20px"><legend style="padding-bottom:3px">$rescat[title]</legend><fieldset style="background-image:url($cat_img);background-position: center center; background-repeat: no-repeat;width:110px;height:90;margin-left:9px;margin-top:20px;border: white 1px solid" bgcolor=white><img src=/inc/img/blank.gif width=110 height=90 alt="$rescat[title]" border=0></a></fieldset></strong>
3. <strong style="width:158px;border:0;padding-bottom:20px"><legend style="padding-bottom:3px">$rescat[title]</legend><fieldset style="background-image:url($cat_img);background-position: center center; background-repeat: no-repeat;width:110px;height:90;margin-left:9px;margin-top:20px;border: white 1px solid" bgcolor=white><img src=/inc/img/blank.gif width=110 height=90 alt="$rescat[title]" border=0></a></strong></strong>
4. <strong style="width:158px;border:0;padding-bottom:20px"><legend style="padding-bottom:3px">$rescat[title]</legend><div style="background-image:url($cat_img);background-position: center center; background-repeat: no-repeat;width:110px;height:90;margin-left:9px;margin-top:20px;border: white 1px solid" bgcolor=white><img src=/inc/img/blank.gif width=110 height=90 alt="$rescat[title]" border=0></a></div></strong>
Actual Results:  
Look up

Expected Results:  
Look on Opera and IE

Learn more HTML and CSS, go to W3Schools.

Comment 1

[Steve England [:stevee]]

Reporter, can you attach testcases here please? ("Create a New Attachment") Thanks.

Comment 2

[volgot]

Attachment: HTML example

Comment 3

[Brian Polidoro]

The example doesn't pass validation as an HTML document.  Can you correct the validation errors in the example?  That's likely the issue here.  

Some problems with validation that I've found:
Each fieldset must contain a legend.
That legend must be the first child of the fieldset.
The strong tag is an inline tag and cannot contain non-inline tags like fieldsets and divs.  

Comment 4

[Phil Ringnalda (:philor)]

CSS width does not apply to inline elements: see http://www.w3.org/TR/CSS21/visudet.html#the-width-property

FIELDSET and DIV are block-level elements, whether or not they are contained in other elements, and thus start on new lines. If you want a block-level element to act like an inline element, you need to give it "display: inline" (and expect unexpected results).

There are many fine resources online for learning how CSS and HTML are supposed to work. W3Schools doesn't happen to be among them.