Re: Header problem

Discussion in 'HTML' started by Tim Streater, Nov 12, 2013.

  1. Tim Streater

    Tim Streater Guest

    In article <>, Bob H
    <> wrote:

    > Just recently, well more so during the time I have been
    > building/creating a new website, when I insert a header to contain text
    > or a menu, the header drops down the page a bit.
    >
    > Without any text in or on the header, the header stays at the top of the
    > page, but as soon as I add text, and move the text down from the top,
    > the header also moves down from the top of the page. Consequently I have
    > a small gap at the top as though there is padding.
    >
    > Any ideas why this happens please and how to stop it happening.


    Please post the minimum set of html that makes this happen. Otherwise I
    shall just stand here nodding and saying: "Fascinating, Captain".

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Nov 12, 2013
    #1
    1. Advertising

  2. Tim Streater

    richard Guest

    On Tue, 12 Nov 2013 17:45:26 +0000, Bob H wrote:

    > On 12/11/2013 17:18, Tim Streater wrote:
    >> In article <>, Bob H
    >> <> wrote:
    >>
    >>> Just recently, well more so during the time I have been
    >>> building/creating a new website, when I insert a header to contain
    >>> text or a menu, the header drops down the page a bit.
    >>>
    >>> Without any text in or on the header, the header stays at the top of
    >>> the page, but as soon as I add text, and move the text down from the
    >>> top, the header also moves down from the top of the page. Consequently
    >>> I have a small gap at the top as though there is padding.
    >>>
    >>> Any ideas why this happens please and how to stop it happening.

    >>
    >> Please post the minimum set of html that makes this happen. Otherwise I
    >> shall just stand here nodding and saying: "Fascinating, Captain".
    >>

    >
    > Well this is the minimum, and all it takes:
    >
    > <div align="center"><p>The different types of beds we can do</p> </div>
    >
    > If I remove the <p> tags there's no problem, but the text stays at the
    > top edge of the page.


    You are not saying if this happens on the published web site page, or
    strictly within the editor.
    If the editor, then trash it and use something without these hiccups.
    I use notepad++.

    If it's showing up on the published page, then you have a syntax error.
    I'd be looking for things like <div and /div>.
    that is, missing < and >, some times even missing quotes when they need to
    be paired will do it.

    This will cause certain text to appear above anything else.
    richard, Nov 12, 2013
    #2
    1. Advertising

  3. Tim Streater

    Tim Streater Guest

    In article <>, Bob H
    <> wrote:

    > On 12/11/2013 17:18, Tim Streater wrote:
    > > In article <>, Bob H
    > > <> wrote:
    > >
    > >> Just recently, well more so during the time I have been
    > >> building/creating a new website, when I insert a header to contain
    > >> text or a menu, the header drops down the page a bit.
    > >>
    > >> Without any text in or on the header, the header stays at the top of
    > >> the page, but as soon as I add text, and move the text down from the
    > >> top, the header also moves down from the top of the page. Consequently
    > >> I have a small gap at the top as though there is padding.
    > >>
    > >> Any ideas why this happens please and how to stop it happening.

    > >
    > > Please post the minimum set of html that makes this happen. Otherwise I
    > > shall just stand here nodding and saying: "Fascinating, Captain".

    >
    > Well this is the minimum, and all it takes:
    >
    > <div align="center"><p>The different types of beds we can do</p> </div>
    >
    > If I remove the <p> tags there's no problem, but the text stays at the
    > top edge of the page.


    Hmmm, I suppose I meant the minimum *complete* set of html that I can
    copy/paste and open in a browser to see what it does, since I don't
    know what you mean by "header" in this context, as what you've posted
    is just a <div>.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Nov 12, 2013
    #3
  4. Bob H wrote:
    > On 12/11/2013 17:18, Tim Streater wrote:
    >> In article <>, Bob H
    >> <> wrote:
    >>
    >>> Just recently, well more so during the time I have been
    >>> building/creating a new website, when I insert a header to contain
    >>> text or a menu, the header drops down the page a bit.
    >>>
    >>> Without any text in or on the header, the header stays at the top of
    >>> the page, but as soon as I add text, and move the text down from the
    >>> top, the header also moves down from the top of the page. Consequently
    >>> I have a small gap at the top as though there is padding.
    >>>
    >>> Any ideas why this happens please and how to stop it happening.

    >>
    >> Please post the minimum set of html that makes this happen. Otherwise I
    >> shall just stand here nodding and saying: "Fascinating, Captain".
    >>

    >
    > Well this is the minimum, and all it takes:
    >
    > <div align="center"><p>The different types of beds we can do</p> </div>
    >
    > If I remove the <p> tags there's no problem, but the text stays at the
    > top edge of the page.


    "Fascinating, Captain"

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 12, 2013
    #4
  5. Bob H <> writes:

    > On 12/11/2013 17:18, Tim Streater wrote:
    >> In article <>, Bob H
    >> <> wrote:
    >>
    >>> Just recently, well more so during the time I have been
    >>> building/creating a new website, when I insert a header to contain
    >>> text or a menu, the header drops down the page a bit.
    >>>
    >>> Without any text in or on the header, the header stays at the top of
    >>> the page, but as soon as I add text, and move the text down from the
    >>> top, the header also moves down from the top of the page. Consequently
    >>> I have a small gap at the top as though there is padding.
    >>>
    >>> Any ideas why this happens please and how to stop it happening.

    >>
    >> Please post the minimum set of html that makes this happen. Otherwise I
    >> shall just stand here nodding and saying: "Fascinating, Captain".
    >>

    >
    > Well this is the minimum, and all it takes:
    >
    > <div align="center"><p>The different types of beds we can do</p> </div>
    >
    > If I remove the <p> tags there's no problem, but the text stays at the
    > top edge of the page.


    Do you mean that the text appears in slightly different places depending
    on whether the <p> element is there or not? If so it will, most likely,
    be because paragraphs have a top margin, though it could be because of
    some other style setting like padding or relative positioning.

    --
    Ben.
    Ben Bacarisse, Nov 12, 2013
    #5
  6. On Tue, 12 Nov 2013 17:45:26 +0000, Bob H wrote:

    > Well this is the minimum, and all it takes:
    >
    > <div align="center"><p>The different types of beds we can do</p> </div>
    >
    > If I remove the <p> tags there's no problem, but the text stays at the
    > top edge of the page.


    It's probably the default styling for the paragraph element.

    Try:

    <div align="center"><p style="margin-top:0;padding-top:0">The different
    types of beds we can do</p></div>

    --
    Denis McMahon,
    Denis McMahon, Nov 12, 2013
    #6
  7. Tim Streater

    Gus Richter Guest

    On 11/12/2013 12:45 PM, Bob H wrote:
    > Well this is the minimum, and all it takes:
    >
    > <div align="center"><p>The different types of beds we can do</p> </div>
    >
    > If I remove the <p> tags there's no problem, but the text stays at the
    > top edge of the page.



    This is due to "Collapsing Margins". Read up here:
    <http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
    <http://www.w3.org/TR/CSS21/box.html#mpb-examples>

    Explanation here:
    <http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php>
    <http://www.complexspiral.com/publications/uncollapsing-margins/>

    An easy way to confirm if a problem is due to collapsing margins is to
    include this temporarily in your stylesheet:
    * {margin:0 !important;}

    Simplified rules:
    An element that has had clearance applied to it never collapses its top
    margin with its parent block's bottom margin.

    The CSS statement on collapsing margins is simple: any adjacent margins
    collapse. This means that margins collapse in the following ways:
    * bottom-margin of one element with top-margin of its sibling
    * top(bottom)-margin of parent and top(bottom)-margin of first(last) child
    * top-margin and bottom-margin of empty element (or element with only
    out-of-flow children)
    * combinations of the above

    --
    Gus



    ---
    This email is free from viruses and malware because avast! Antivirus protection is active.
    http://www.avast.com
    Gus Richter, Nov 12, 2013
    #7
  8. Tim Streater

    Ben C Guest

    On 2013-11-12, Bob H <> wrote:
    > On 12/11/2013 17:18, Tim Streater wrote:
    >> In article <>, Bob H
    >> <> wrote:
    >>
    >>> Just recently, well more so during the time I have been
    >>> building/creating a new website, when I insert a header to contain
    >>> text or a menu, the header drops down the page a bit.
    >>>
    >>> Without any text in or on the header, the header stays at the top of
    >>> the page, but as soon as I add text, and move the text down from the
    >>> top, the header also moves down from the top of the page. Consequently
    >>> I have a small gap at the top as though there is padding.
    >>>
    >>> Any ideas why this happens please and how to stop it happening.

    >>
    >> Please post the minimum set of html that makes this happen. Otherwise I
    >> shall just stand here nodding and saying: "Fascinating, Captain".
    >>

    >
    > Well this is the minimum, and all it takes:
    >
    ><div align="center"><p>The different types of beds we can do</p> </div>
    >
    > If I remove the <p> tags there's no problem, but the text stays at the
    > top edge of the page.


    What you're describing sounds like "margin collapsing". The p has a
    default margin of about 1.12em, which ends up effectively on the div by
    the strange rules of margin collapsing. This means the top edge of the
    div moves down by 1.12em.

    I'm guessing you'd like the top edge of the div at the top, and then the
    1.12em gap _inside_ the div above the p.

    The easiest way to do that if you aren't fussed about one pixel here or
    there is to add padding-top: 1px to the styles for the div. This stops
    the p's top margin and the div's top margin being what the spec calls
    "adjacent" and prevents the collapsing.
    Ben C, Nov 22, 2013
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Newsgroup - Ann
    Replies:
    4
    Views:
    702
    lilburne
    Nov 2, 2003
  2. John Smith

    Header files included in header files

    John Smith, Jul 21, 2004, in forum: C Programming
    Replies:
    18
    Views:
    604
    Jack Klein
    Jul 24, 2004
  3. Replies:
    3
    Views:
    1,298
    Walter Roberson
    May 1, 2006
  4. Bit byte
    Replies:
    1
    Views:
    652
    benben
    Apr 19, 2006
  5. mlt
    Replies:
    2
    Views:
    832
    Jean-Marc Bourguet
    Jan 31, 2009
Loading...

Share This Page