SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firebug 'unclosed tags'

    Hey guys I have taken notice that firebug automatically closes tags for you when inspecting an element. Also, I noticed when sometimes a tag is not closed an extra white space is added e.g.

    Code:
    <a href="#">Unclosed Tag
    will look like this: <a href="#">Unclosed Tag </a>
    Notice that after the 'Tag' there is an extra white space.

    Here is where my pattern all goes to 'crayons'

    Code:
    <a href"#">
    Unclosed Tag
    Here is the output of this:
    <a href="#"> Unclosed Tag </a>

    But also, this looks the same when there is a closed tag like so:

    Code:
    <a href="#">
    Closed Tag
    </a>
    So my question is, is there something I can do to my firebug settings to see where there is an unclosed html tag?

    Help would be much appreciated

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firebug probably doesn't work with the source code, but with the DOM tree. There are no tags in the DOM tree, only nodes. Use the HTML validator to find missing required end tags.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast stakes's Avatar
    Join Date
    Sep 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like AutisticCuckoo said, firebug attempts to fix your bad code in order to get a proper DOM tree structure and to work properly, otherwise it would seriously screw things up.

    You should use the W3C validation service to locate your invalid markup, firebug wasn't made for that purpose. If you have web developer toolbar installed you can instantly validate your page using the keyboard shortcut:

    ctrl + shift + a
    webcloud.se - Articles on web development

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not that it's attempts to 'fix' bad code. What you see in Firebug is the resulting DOM tree after the source code has been parsed. Any 'fixes' happen in the HTML parser when it generates the DOM tree.

    Firefox displays tags as a way to visualise the DOM tree. It simply writes start tag + content + end tag for each node, no matter what the original source code looked like.

    It's the same with Opera's Dragonfly and any other DOM-based tool.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I wish there was a 'tool' where I could insert 'messy' source code and it would output 'properly' indented clean source code.

    Is there a such 'tool'?

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep! HTML Tidy.

    Any decent text editor should be able to re-indent the code for you, but they generally cannot clean up bad markup.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Yep! HTML Tidy.

    Any decent text editor should be able to re-indent the code for you, but they generally cannot clean up bad markup.

    I just realized that 'cleanup' command for the html validator has an option that allows you to indent element content

    Thank you for leading me in the right direction


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •