287402 - Background picture displayed on the top of other elements

Status: RESOLVED INVALID

(SeaMonkey :: General, defect)

Description

[Vlad]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; ru-RU; rv:1.7.2) Gecko/20040808
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; ru-RU; rv:1.7.2) Gecko/20040808

/* MAIN MENU begin */
a.mainlevel:link, a.mainlevel:visited {
    display: block;
    font-family: Verdana, Arial, sans-serif;
    background: url(images/menu_bg.png) no-repeat;
    vertical-align: middle;
    text-align: left;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;

    padding: 5px 5px 0px 18px;
    height: 19px !important;
    height: 24px;
    /*width: 158px;*/
    width: 100%;
    text-decoration: none;
    white-space: nowrap;
}

a.mainlevel:hover {
    background-position: 0px -25px;
    text-decoration: none;
    color: #ffffff;
}
/* MAIN MENU end */




<!-- Menu //-->

<table width="162" border="0" cellpadding="0" cellspacing="0">
    <tr align="left"><td><a href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>"
        class="mainlevel" ><?php echo TAB_OUR_DB; ?></a></td></tr>
    <tr align="left"><td><a href="<?php echo tep_href_link(FILENAME_ADD_OBJECT); ?>"
        class="mainlevel" ><?php echo BOX_PERSONAL_ADD_OBJECT; ?></a></td></tr>
    <!-- cutted //-->
</table>
<!-- Menu end //-->

Reproducible: Always

Steps to Reproduce:
1.Create sample page or ask me. Saving from site don't get result.
2.View in Mozilla.
3.

Actual Results:  
You will see wrong result.


Expected Results:  
ForeFox 0.8 displays correct.
And Previous versions of Mozilla displays right.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Please attach a complete page showing the problem to this bug using
https://bugzilla.mozilla.org/attachment.cgi?bugid=287402&action=enter

Comment 2

[Vlad]

Attachment: Picture of bug

This is picture of part of the page with wrong displayed html+css

Comment 3

[Vlad]

Attachment: Picture of how must be

From FireFox 0.8

Comment 4

[Vlad]

Attachment: The saving from site with wrong view. HTML+CSS+graphics.

Saved from Mozilla

Comment 5

[Boris Zbarsky [:bzbarsky]]

With the CSS on that page, there should be 23px of overlap, since the width is
100% and there are 23px of horizontal padding.

To see why, see section 4.1.2 of the CSS1 spec
(http://www.w3.org/TR/REC-CSS1#horizontal-formatting):

   The horizontal position and size of a non-floating, block-level
   element is determined by seven properties: 'margin-left',
   'border-left', 'padding-left', 'width', 'padding-right',
   'border-right' and 'margin-right'.

thus implying that "width" does not include border, padding, or
margin.  Further, CSS2 (at
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width) explicitly
says:

     This property specifies the content width of boxes generated by block-level
     and replaced elements.

And at http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions the
specification pretty clearly says that "content width" means "not
including margin/border/padding".

Furthermore, see http://www.tantek.com/CSS/Examples/boxmodelhack.html.
This page was created by one of the members of the CSS working group,
who also happens to be the technical lead of the Mac IE team.  The
page describes what the correct behavior is and further illustrates a
hack to get IE5/Windows and IE5.5/Windows to do the right thing
(basically, by giving them rules that actually set the wrong width).
IE6, like Mozilla and MacIE, has two rendering modes -- your page
triggers the "BackCompat" mode in which its rendering is broken.  In
its "CSS1Compat" mode it will render your page just like Mozilla does.
See
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/compatmode.asp
for more information on that.