297691 - [CSS] margin-* does not work

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Chakkit]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Media Center PC 3.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.8) Gecko/20050511 Firefox/1.0.4

Please refer to my snap shorts:

http://www.ibiznetwork.com/file/bugs_report/firefox01a.gif
http://www.ibiznetwork.com/file/bugs_report/firefox01b.gif

The first one is when opened my page on Firefox, for "A", I used CSS "margin-
top: 3;" for text but it's not seem to work, with IE it's working properly.

The second "B" I coded "<input type=file name=image class=inputth size=18 
style=width:180>" and the result showed that Firefox skips using style ( it 
only uses 18 charactors width not 180 pixels.

If these bugs are fixed is very appreciated.

If you need further information please do not hestitate to contact me at 
[e-mail]

Reproducible: Always



Expected Results:  
know all of currently css styles

Comment 1

[Thomas K. (:tom)]

Please click "Create a New Attachment" and attach a copy of the .html file which
demonstrates the problem.  If you're using an external stylesheet, please place
it in the head of the document so that it may be posted properly, OR give us a
link to where this page can be seen.

(As well, feel free to post screenshots as attachments, so that they may be
viewed in the distant future while your website may have dissipated)

I believe you have to use padding for gecko (hao2lian informed me on this one),
as gecko for some reason doesn't do margin-*.

I can't find things to dupe it too (printing things come up for just 'margin',
nothing appropriate comes up with 'margin padding'), but I'm pretty sure this
would have come up before so adding DUPEME.

Comment 2

[Chakkit]

not only margin.
please check css style on "file input" form, it not render any css on it. (refer to "B")

Thanks

Comment 3

[Thomas K. (:tom)]

Please post a link or links to the html pages with the CSS showing this problem.
 We cannot fix a bug if we don't know the circumstances causing it.  Thanks

Comment 4

[Chakkit]

Please refer to below Information and URLs

Margin problem, with IE it will be placed on middle (3 px from top)
http://www.ibiznetwork.com/file/bugs_report/firefox01.html

CSS style does not render, even style "width" for File input form (compare to Text 
input)
http://www.ibiznetwork.com/file/bugs_report/firefox02.html

Thanks

Comment 5

[John P Baker]

INVALID?

lengths require units try:

margin-top: 3px

and

width: 180px

Comment 6

[Thomas K. (:tom)]

i would beg to differ

the site which i was referring to as receiving help from hao2lian was not
showing up right as i was using margin-left: 3px; and it didn't seem to
recognize it at all in firefox, giving it a much larger margin-left.  I had to
add padding-left to get it to work in firefox, and this code fixed it for me:

margin-left: 3px;  /* IE and Opera */
padding-left: 3px; /* Gecko */

so, maybe that's just <ul>s that it happens to (with margin being ignored and
padding not), but i've noticed the problem before.

Comment 7

[Tuukka Tolvanen (sp3000)]

invalid as noted in comment 5, see
http://www.w3.org/TR/CSS21/box.html#margin-properties for valid values for
margin-* in css: <margin-width> or inherit; <margin-width> defined as <length>,
<percentage>, or auto, none of which are a plain number; see
http://www.w3.org/TR/CSS21/syndata.html#value-def-length for definition of <length>.

Tom, file another, if necessary, for the site which you were referring to as
receiving help from hao2lian; it's doesn't sound like it's this.

File input styling issues are reported as bug 52500 and bug 132565 (and others).

Comment 8

[Chakkit]

well, I've fixed margin by adding "px", margin-top: 3 px, it still shows the same 
result. (with IE it shows correctly)
http://www.ibiznetwork.com/file/bugs_report/firefox01.html

For File Input elment, I've adding "px" as well, but still the same.
http://www.ibiznetwork.com/file/bugs_report/firefox02.html

Thanks

Comment 9

[Tuukka Tolvanen (sp3000)]

http://www.w3.org/TR/CSS21/syndata.html#value-def-length
    The format of a length value (denoted by <length> in this specification) is a
    <number> (with or without a decimal point) immediately followed by a unit
                                               ^^^^^^^^^^^

Comment 10

[Chakkit]

Well, i've try too but it still the same.

Please refer to above URLs

Thanks

Comment 11

[Thomas K. (:tom)]

Funny how neither page is valid.  If you can reproduce with a validating page,
then re-open.  Otherwise...

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ibiznetwork.com%2Ffile%2Fbugs_report%2Ffirefox01.html
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.ibiznetwork.com%2Ffile%2Fbugs_report%2Ffirefox01.html&usermedium=all

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ibiznetwork.com%2Ffile%2Fbugs_report%2Ffirefox02.html
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.ibiznetwork.com%2Ffile%2Fbugs_report%2Ffirefox02.html&usermedium=all

Re-marking invalid

Comment 12

[Boris Zbarsky [:bzbarsky]]

Oh, man.  OK, repeat after me:  A page being invalid doesn't make a _bug_
reported against that page invalid.

The next person I see making that argument, I shall be most wroth with.

This bug is indeed invalid, but it has nothing to do with page validity.  The
indent on a list comes from a margin in IE and from a padding in Mozilla; we
chose padding because it plays nicer with backgrounds on lists.  So if you only
change the margin it'll change IE's rendering and Mozilla's rendering in a
different way, which is what you were seeing.