Thanks for the screenshot. I tried all possible combinations of collapse & expand, but the bug did not show up on my computer. My advice would be to remove this unnecessary <a> node (selected in following screenshot: http://remydamour.com/Screenshot.jpg) and apply collapse/expanded directly to your div and attach javascript click event on your div. If you needed <a> node to have a clickable-like icon with the mouse, consider using css property 'cursor:pointer;'. If you do want to keep <a> node for IE6 compatibility, then do not put a <div>/<table> inside it. Simply put your node before your <div> (but close it) and within each <th>.
This should help solve your problem. What you might think of being a firebug issue could simply be the browser modifying your html internally trying to 'correct' it. All firebug do is allow you to browse live DOM (and not simply static source html as you see doing /view/source). As a general rule, try to have your file w3c valid (or with few errors you fully understand and agree to ignore) using http://validator.w3.org. Without a valid page, when you start to add javascript, it can become a huge mess to debug. Regarding html, basically not all nodes are equals and you cannot nest whatever node you want within whaterver other node you want. To make it short, you have two big families of nodes: block (h1, h2, div, p, ul, li, dl...) and inline (a, img, span, strong, em...). And one of the rules is not to put a block within an inline (but you can put inline within block). Feel free to use the validator, and if you do not fully understand all the errors, these pages might help you: http://www.w3.org/TR/html401/ and http://www.w3.org/TR/xhtml1/ I hope that helps. Regards, Remy On Sat, Jun 20, 2009 at 9:12 PM, Michael Hincke<[email protected]> wrote: > > Do you have any recommendations? I'm fairly new to web design and I > can't figure out a way to make it collapsible without being in the > current format. > > Here is a screen shot of the root of the problem - > http://i39.tinypic.com/t53ic9.jpg > Firebug 1.2.1 and firefox 3.0.11 here > > Thanks, > Michael > > On Jun 20, 11:28 am, Remy Damour <[email protected]> wrote: >> I got a look at it and I did not find your error (firebug 1.3.3 + >> FF3.0.11) although I'm not sure to have understood it well. >> Anyway <div> and <table> within a <a> node is the best way to run into >> problems. >> >> http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbookscrooge.... >> >> Regards, >> Remy >> >> On Sat, Jun 20, 2009 at 10:45 AM, Michael >> >> Hincke<[email protected]> wrote: >> >> > I am getting a weird error on my page where extra "expandable lists" >> > show up. When inspecting with firebug it is clear that this is caused >> > by extra code in the html. However, when I view page source the >> > offending code is not there and everything is lined up and nice and >> > neat. To verify which is correct I checked my PHP and its is >> > definitely not outputting any extra code. (page works fine in IE and >> > Safari) >> >> > Webpage >> > -http://bookscrooge.com/response.php?select=spring09&CRN1=2&CRN2=3&CRN... >> >> > Recap: >> > Firebug / actual page show the error >> > Page source / PHP show no errors >> >> > What Firebug shows >> > [CODE] >> > <a class="expanded" href="#"> </a> >> > <div class="subheader"> >> > ... >> > </div> >> > <a class="collapsed" href="#"> </a> >> > <ul style="display: none;"> >> > .... >> > </ul> >> > [/CODE] >> >> > What page source shows and what it should be: >> > [CODE] >> > <a class="collapsed" href="#"> </a> >> > <ul style="display: none;"> >> > .... >> > </ul> >> > [/CODE] > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Firebug" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/firebug?hl=en -~----------~----~----~----~------~----~------~--~---
