On 4/6/06, Tom Dell'Aringa <[EMAIL PROTECTED]> wrote:
> Hi everyone,
>
> I'm working on a somewhat complex application where a UL is generated
> dynamically. It has the following structure:
>
> <ul>
> <li class="down"><a href="/help.html" class="neg" onclick="viewPost();
> return false;">APPL</a> <span class="sources" onclick="alert('edit')">N
> <span>N</span> B <span>B</span> G</span></li>
>
> etc.
>
> The CSS that controls the bullet:
>
> #activity .down {
> background: #000 url("images/quotes_down.gif") 0px 6px no-repeat; }
>
> Now, when these LI are generated, the bullet is missing. I checked the CSS
> over and over, but all seemed fine. When I went to use the Edit CSS in
> FireFox (part of the web developer extension) - the moment I open the edit
> css window - pop! They immediately appear! When I close the edit window -
> pop! They are gone!
>
> This is a new one on me. Exploring the window with the DOM inspector shows
> the right classname and everthing seems in order. You can see this lovely
> behavior at:
> http://monitor.pixelmech.com/activity.html
> http://monitor.pixelmech.com/css/monitor.cssClick the "add ticker" link to
> get a couple of dynamically generated lines. If you have the web developer
> extension in FF, open the edit css panel, and watch the arrows pop in.
>
> Any ideas? The class is there, the style rule is there...I'm baffled.
>
> Tom
Hi,
For one, I've never seen the shorthand for background used in that
particular order. I'm pretty sure the syntax is:
background url(../img/fun.gif) #fff top left no-repeat;
This is actually a direct quote from Cascading Style Sheets:
Seperating Content from Presentation (Glasshaus, 2002) That being
said, never believe everything that's in a book, but also, I've been
using this particular syntax for the past 3 years and it has always
worked. It might also be a firefox specific bug. Have you tested in
another browser? (Opera, IE, Amaya...) Testing in another browser can
tell you if it's just browser quirks or not, which can help you narrow
down how to fix it.
Off the top of my head, the only thing I can figure from that code is
that the browser may be interpreting 0px 6px as height and width
values and therefore you would get an invisible image. You might want
to try top left and use a margin of 6px instead. It would help your
debugging.
Hope this helps,
René
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
