Re: [css-d] Firefox magin bug? workaround for margin collapse doesn't work
hey Tee,
based on Philippe's response, it looks like you want that .poster li to not
have that margin...
the li.poster rule doesnt set any margins and margins in this rule do, so
hence the space:
li {margin: 0 0 0 96px; list-style:none;}
Adding following rule to his page and subtracting the content hack (which
admittingly seems hardcore so maybe i missed soemthing and he has better
idea what you want) seems to work right?
#a-fix li.poster { margin-left:5px; padding: 5px 0 5px 25px;background:#cfc;
color:#000;}
On 7/19/07, Tee G. Peng [EMAIL PROTECTED] wrote:
On Jul 19, 2007, at 6:15 PM, Philippe Wittenbergh wrote:
It is a bug in Gecko. [1]
Here is your list, simplified.
http://dev.l-c-n.com/_temp/moz-egde.html
The top one is wrong, the bottom one is fixed.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Firefox magin bug? workaround for margin collapse doesn't work
Hi, this is the first time I stumble on margin problem in Firefox
(all gecko browsers actually), although I can re-work my markup to
make it work the way I wanted, but I really like to know what the
problem is with this issue and if there is a fix for it.
First I thought it was margin collapse bug but after some testing and
and reading on articles I found from google search, I still can't
make it works.
The codes that are in question are in the comment area
http://zhujili.com/index-new.html
ol
li class=msg_left1/li
li class=posterJohn Doe on Jul 7, 11:34 AM/li
li class=msgpcomment here/p
/li
/ol
the '1' and 'John Doe on Jul 7, 11:34 AM' should stay in one line
where the '1' is floated left. Safari, Opera and IE obey the rule
however in Firefox, the John Doe... is being pushed away exactly
51px to the right.
#comments li {margin-left:96px; /* because the gray background image
is 96px wide}
#comments li.msg_left {
background:#cc8c0b;
padding:5px;
float:left;
width:30px;
margin-left:51px; /* this one is causing the problem in Firefox but
I need this declared because I wanted the the box stay 51px away from
the left */
}
I thought it was margin collapse bug and had tried adding 'border'/
padding to elements (one at a time) that are associated to the
comment area, none of them work.
Your help is greatly appreciated!
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox magin bug? workaround for margin collapse doesn't work
On Jul 20, 2007, at 7:00 AM, Tee G. Peng wrote:
Hi, this is the first time I stumble on margin problem in Firefox
(all gecko browsers actually), although I can re-work my markup to
make it work the way I wanted, but I really like to know what the
problem is with this issue and if there is a fix for it.
First I thought it was margin collapse bug
Horizontal margins never collapse.
[...]
http://zhujili.com/index-new.html
It is a bug in Gecko. [1]
Here is your list, simplified.
http://dev.l-c-n.com/_temp/moz-egde.html
The top one is wrong, the bottom one is fixed.
li.poster {-moz-float-edge:content-box;}
does all the magic.
(one could argue about the semantics of your list construction, but
css-d is not the place for that).
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=163110
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Firefox magin bug? workaround for margin collapse doesn't work
On Jul 19, 2007, at 6:15 PM, Philippe Wittenbergh wrote:
It is a bug in Gecko. [1]
Here is your list, simplified.
http://dev.l-c-n.com/_temp/moz-egde.html
The top one is wrong, the bottom one is fixed.
li.poster {-moz-float-edge:content-box;}
does all the magic.
Philippe, thanks for the timely response. Was about to give up this
and use another way to make it work by moving the margin left to 'ol'
and than hack the paddings/margins in the li classes.
See this, almost close (still need a few tweaking to make it pixel
perfect) but not very desireable for me as I needed to add an empty
div for the bottom background image. Not a pretty sight for the last
comment box also.
http://zhujili.com/index-new2.html
somthing like this:
#comments ol {margin-left:50px;}
#comments li.msg {background:#272A2B url(images/curve.jpg) no-
repeat right bottom;
margin-left:47px;}
Another way I could make it work is structure as such
li class=posterspan class=number1spanJohn Doe on Jul 7,
11:34 AM/li
li class=msgcomment here/li
Ok, for learning's sake, which one could be more desirable as far as
CSS coding concerned?
The mozilla proprietary is a quick fixed and a good trick for me to
learn but it's a hack after all isn't that? I read posts from the
bugzilla link you provided, it's an old bug still not being fixed, so
is there good to use the hack and hoping that one day it will get
fixed?
Thanks also for the comment on the list construction not being
semantic, how embarrassing for me you will say that as I just told
someone again semantic markup goes hand in hand with css coding
again, I will ask the question but can you kindly move your chair
180% degree facing the wsg list so that you can give me your thought
and opinion?
Many thanks!
tee
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
