[CSS] margin-* does not work




14 years ago
13 years ago


(Reporter: chakkit, Unassigned)


1.7 Branch
Windows XP

Firefox Tracking Flags

(Not tracked)




14 years ago
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:


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 

Reproducible: Always

Expected Results:  
know all of currently css styles

Comment 1

14 years ago
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.
Component: General → Layout
Product: Firefox → Core
Summary: do not know some general css styles → [CSS] margin-* does not work
Whiteboard: DUPEME
Version: unspecified → 1.7 Branch

Comment 2

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


Comment 3

14 years ago
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

14 years ago
Please refer to below Information and URLs

Margin problem, with IE it will be placed on middle (3 px from top)

CSS style does not render, even style "width" for File input form (compare to Text 


Comment 5

14 years ago

lengths require units try:

margin-top: 3px


width: 180px

Comment 6

14 years ago
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.
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).
Last Resolved: 14 years ago
Resolution: --- → INVALID

Comment 8

14 years ago
well, I've fixed margin by adding "px", margin-top: 3 px, it still shows the same 
result. (with IE it shows correctly)

For File Input elment, I've adding "px" as well, but still the same.

Resolution: INVALID → ---
    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
Last Resolved: 14 years ago14 years ago
Resolution: --- → INVALID
Whiteboard: DUPEME

Comment 10

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

Please refer to above URLs

Resolution: INVALID → ---
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.
You need to log in before you can comment on or make changes to this bug.