Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Please help to understand -extra space-using Firebug

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #39016
    chickentulip
    Member

    Using Firebug I was looking how the form
    http://www.skyrocket.be/lab/semantic_horizontal_form.html
    was made. I was wondering if someone on this forum, also could look at this form using Firebug and tell me
    where the extra space comes from between the legend and h3 in the fieldset id=”pt1″
    ??
    h3 has a height of 4em plus top and bottom margin: 1em.
    legend has a computed height of 72px;
    when i move the firebug arrow from legend to h3. There is still a space that does not belong as padding or margin to any of these elements.
    I would really love to know where it is coming from. If someone would be interested to have a look, I will appreciate it very much

    #106585
    Mottie
    Member

    Hi chickentulip!

    I see a top and bottom margin on the h3. If you modify the css as follows, it should fix it:

    #theform fieldset h3 {
    font-size: 1em;
    height: 4em;
    margin: 0 0 1em;
    }

    If you look in Firebug on the right side, the default tab is Style. Switch to the Layout tab to see any set margin, border, padding, dimensions and other useful information :)

    #106586
    chickentulip
    Member

    Hi Mottie,
    you see, margins are highlighted in yellow in Firebug. when i point the firebug arrow on the h3 element, i see margin on the top and margin at the bottom. then i point to the legend and see the height of it. you can see that aside the margin on the top of h3 element, there is some more space between these two elements. i want to know what part of the existing code creates it.

    #106589
    TheDoc
    Member

    All fieldsets have a padding of 1em, perhaps that’s simply what you’re seeing?

    Other than that, it appears that the h3’s margin butts right up against the form.

    #106594
    Senff
    Participant

    I guess you’re trying to figure out why there’s a space between the legend and the H3 if both of them would even have zero margin….? Meaning, there already is a space between them two because H3 has some top margin, but even without it, there would be more space.

    The reason is a little tricky. The fieldset has a padding over 1em (all sides), but the TOP padding is not applied right away at the top because of the LEGEND element, which is kinda “special”. By default, the LEGEND is placed ON the border of the fieldset, and so standard positioning rules don’t apply here.

    (I’m sure there’s a more scientific explanation to it, but I’m lost on that one).

    So, the 1em top padding that the fieldset has, is not applied until AFTER the LEGEND (which, in this case, is being ignored, or rather, skipped). Which explains the spacing between the LEGEND and the H3. If you’ll remove the (top) padding from the fieldset through Firebug, you’ll see the spacing disappear.

    Hope that makes sense!

    #106596
    wolfcry911
    Participant

    // edit – too slow again :(

    #106657
    chickentulip
    Member

    Thank you so much for all who replied to my post.
    special thanks to Senff

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.