CSS White Space - margin and padding question

Discussion in 'HTML' started by charlbury, Nov 17, 2007.

  1. charlbury

    charlbury Guest

    Hi, I'm having trouble with CSS white space. With the code at the
    bottom of this post I expect the following output:

    Search
    Your Options
    Footer

    But I get the following output:

    Search

    Your Options

    Footer

    I get a line or white space between each section. Can anyone tell me
    where I am going wrong?

    Thanks

    <pre>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/
    xhtml1-transitional.dtd">
    <html><head><title>Left Nav Bar Test</title>

    <style type="text/css">

    body {
    margin: 0px 0px 0px 0px;
    font-family: arial, verdana, tahoma, sans-serif;
    font-size: 12px;
    text-align: left;
    background-color: #efefff;
    }

    #contentleft {
    width: 162px;
    float: left;
    }

    ..frameheader {
    background-color: yellow;
    }

    ..framebody {
    background-color: white;
    }

    ..framefooter {
    background-color: red;
    }

    h1 {
    font-size: 12px;
    }
    </style>

    </head>
    <body>

    <div id="contentleft">
    <div class="frameheader">
    <h1>Search</h1>
    </div>

    <div class="framebody">
    <h1>Your Options</h1>
    </div>

    <div class="framefooter">
    <h1>footer</h1>
    </div>
    </div>

    <br clear="all" />

    </body>
    </html>
    </pre>
     
    charlbury, Nov 17, 2007
    #1
    1. Advertising

  2. charlbury

    charlbury Guest

    Sorry, the code above does not have the <pre> and </pre> tags around
    it. I though I needed this to post the unformatted html.
     
    charlbury, Nov 17, 2007
    #2
    1. Advertising

  3. charlbury

    asdf Guest

    "charlbury" <> wrote in message
    news:...
    > Hi, I'm having trouble with CSS white space. With the code at the
    > bottom of this post I expect the following output:
    >
    > Search
    > Your Options
    > Footer
    >
    > But I get the following output:
    >
    > Search
    >
    > Your Options
    >
    > Footer
    >
    > I get a line or white space between each section. Can anyone tell me
    > where I am going wrong?
    >
    > Thanks
    >
    > <pre>
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/
    > xhtml1-transitional.dtd">
    > <html><head><title>Left Nav Bar Test</title>
    >
    > <style type="text/css">
    >
    > body {
    > margin: 0px 0px 0px 0px;
    > font-family: arial, verdana, tahoma, sans-serif;
    > font-size: 12px;
    > text-align: left;
    > background-color: #efefff;
    > }
    >
    > #contentleft {
    > width: 162px;
    > float: left;
    > }
    >
    > .frameheader {
    > background-color: yellow;
    > }
    >
    > .framebody {
    > background-color: white;
    > }
    >
    > .framefooter {
    > background-color: red;
    > }
    >
    > h1 {
    > font-size: 12px;
    > }
    > </style>
    >
    > </head>
    > <body>
    >
    > <div id="contentleft">
    > <div class="frameheader">
    > <h1>Search</h1>
    > </div>
    >
    > <div class="framebody">
    > <h1>Your Options</h1>
    > </div>
    >
    > <div class="framefooter">
    > <h1>footer</h1>
    > </div>
    > </div>
    >
    > <br clear="all" />
    >
    > </body>
    > </html>
    > </pre>



    I think the space you describe has probably got more to do with the default
    rendering of h1 by browsers...

    You could try modifying your css so that:

    h1 {
    font-size: 12px;
    margin:0; <-- new bit
    }
     
    asdf, Nov 17, 2007
    #3
  4. charlbury wrote:
    > Hi, I'm having trouble with CSS white space. With the code at the
    > bottom of this post I expect the following output:


    > <div id="contentleft">
    > <div class="frameheader">
    > <h1>Search</h1>
    > </div>
    >
    > <div class="framebody">
    > <h1>Your Options</h1>
    > </div>
    >
    > <div class="framefooter">
    > <h1>footer</h1>
    > </div>
    > </div>


    It's a margins setting as you have been told, but how can your page have
    *more than one* level one header?


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 17, 2007
    #4
  5. charlbury

    a-ok-site Guest

    On Nov 16, 6:45 pm, "asdf" <> wrote:
    > "charlbury" <> wrote in message
    >
    > news:...
    >
    >
    >
    > > Hi, I'm having trouble with CSS white space. With the code at the
    > > bottom of this post I expect the following output:

    >
    > > Search
    > > Your Options
    > > Footer

    >
    > > But I get the following output:

    >
    > > Search

    >
    > > Your Options

    >
    > > Footer

    >
    > > I get a line or white space between each section. Can anyone tell me
    > > where I am going wrong?

    >
    > > Thanks

    >
    > > <pre>
    > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/
    > > xhtml1-transitional.dtd">
    > > <html><head><title>Left Nav Bar Test</title>

    >
    > > <style type="text/css">

    >
    > > body {
    > > margin: 0px 0px 0px 0px;
    > > font-family: arial, verdana, tahoma, sans-serif;
    > > font-size: 12px;
    > > text-align: left;
    > > background-color: #efefff;
    > > }

    >
    > > #contentleft {
    > > width: 162px;
    > > float: left;
    > > }

    >
    > > .frameheader {
    > > background-color: yellow;
    > > }

    >
    > > .framebody {
    > > background-color: white;
    > > }

    >
    > > .framefooter {
    > > background-color: red;
    > > }

    >
    > > h1 {
    > > font-size: 12px;
    > > }
    > > </style>

    >
    > > </head>
    > > <body>

    >
    > > <div id="contentleft">
    > > <div class="frameheader">
    > > <h1>Search</h1>
    > > </div>

    >
    > > <div class="framebody">
    > > <h1>Your Options</h1>
    > > </div>

    >
    > > <div class="framefooter">
    > > <h1>footer</h1>
    > > </div>
    > > </div>

    >
    > > <br clear="all" />

    >
    > > </body>
    > > </html>
    > > </pre>

    >
    > I think the space you describe has probably got more to do with the default
    > rendering of h1 by browsers...
    >
    > You could try modifying your css so that:
    >
    > h1 {
    > font-size: 12px;
    > margin:0; <-- new bit
    >
    >
    >
    >
    >
    > }


    Thanks a lot because I have had that little aggravation for some time,
    and I patched it with a div and background to match.

    a-ok-site
     
    a-ok-site, Nov 17, 2007
    #5
  6. charlbury

    richard Guest

    On Fri, 16 Nov 2007 20:19:33 -0500, Jonathan N. Little wrote:

    > charlbury wrote:
    >> Hi, I'm having trouble with CSS white space. With the code at the
    >> bottom of this post I expect the following output:

    >
    >> <div id="contentleft">
    >> <div class="frameheader">
    >> <h1>Search</h1>
    >> </div>
    >>
    >> <div class="framebody">
    >> <h1>Your Options</h1>
    >> </div>
    >>
    >> <div class="framefooter">
    >> <h1>footer</h1>
    >> </div>
    >> </div>

    >
    > It's a margins setting as you have been told, but how can your page have
    > *more than one* level one header?


    because I told it to, dipshit.
    The header is nothing more than a fixed font size. No rules say you can use
    it only once.
     
    richard, Nov 17, 2007
    #6
  7. richard wrote:
    > On Fri, 16 Nov 2007 20:19:33 -0500, Jonathan N. Little wrote:


    >> It's a margins setting as you have been told, but how can your page have
    >> *more than one* level one header?

    >
    > because I told it to, dipshit.
    > The header is nothing more than a fixed font size. No rules say you can use
    > it only once.



    Excuse me? No, a heading is a *heading* not a header, and it does have
    semantic meaning, I guess you had trouble with outlines when you did
    your research papers in school, eh?

    H# elements are used for the hierarchal headings in a document, and
    should not be used to format the font size of some text. That is what
    CSS is for...

    ..special { font-size: 1.5em; font-weight: bold; ... }

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 17, 2007
    #7
  8. charlbury

    Ben C Guest

    On 2007-11-17, Jonathan N. Little <> wrote:
    > richard wrote:
    >> On Fri, 16 Nov 2007 20:19:33 -0500, Jonathan N. Little wrote:

    >
    >>> It's a margins setting as you have been told, but how can your page have
    >>> *more than one* level one header?

    >>
    >> because I told it to, dipshit.
    >> The header is nothing more than a fixed font size. No rules say you can use
    >> it only once.

    >
    >
    > Excuse me? No, a heading is a *heading* not a header, and it does have
    > semantic meaning, I guess you had trouble with outlines when you did
    > your research papers in school, eh?
    >
    > H# elements are used for the hierarchal headings in a document, and
    > should not be used to format the font size of some text. That is what
    > CSS is for...
    >
    > .special { font-size: 1.5em; font-weight: bold; ... }


    Even if headings are supposed to be strictly hierarchical, you could
    still have two top level headings in a document-- just two trees of
    headings side by side. You would need another rule like XML's
    requirement of having exactly one root element per document.
     
    Ben C, Nov 17, 2007
    #8
  9. Scripsit charlbury:

    > Sorry, the code above does not have the <pre> and </pre> tags around
    > it. I though I needed this to post the unformatted html.


    <blink><font color=red size=7>What are you babbling about?</font></blink>

    You should quote or paraphrase what you are commenting on, even when you
    comment on yourself.

    You should not apologize for lack of <pre> and </pre> tags since they should
    not be included and would not help anything. You should apologize for not
    including a URL.

    <marquee><font color=red size=7>If your newsreader interprets HTML markup in
    Usenet messages, it needs to be fixed or replaced
    <i>now</i>.</font></marquee>

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Nov 17, 2007
    #9
  10. Scripsit charlbury:

    > Hi, I'm having trouble with CSS white space.


    Stop worrying about that. Learn the elements of the basics of HTML first.

    > font-family: arial, verdana, tahoma, sans-serif;
    > font-size: 12px;


    And later, read a decent tutorial on CSS before creating the usual crap of
    thoughtless CSS code. Anyone who has read such a tutorial knows from the two
    lines above that it makes little sense to try to help you with CSS issues
    before you are willing to forget what you thought you knew about it and
    start actually _learning_ how to use CSS.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Nov 17, 2007
    #10
  11. charlbury

    a-ok-site Guest

    On Nov 17, 6:07 am, "Jukka K. Korpela" <> wrote:
    > Scripsit charlbury:
    >
    > > Hi, I'm having trouble with CSS white space.

    >
    > Stop worrying about that. Learn the elements of the basics of HTML first.
    >
    > > font-family: arial, verdana, tahoma, sans-serif;
    > > font-size: 12px;

    >
    > And later, read a decent tutorial on CSS before creating the usual crap of
    > thoughtless CSS code. Anyone who has read such a tutorial knows from the two
    > lines above that it makes little sense to try to help you with CSS issues
    > before you are willing to forget what you thought you knew about it and
    > start actually _learning_ how to use CSS.
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    W3C CSS Validator Results for http://www.cs.tut.fi/~jkorpela/
     
    a-ok-site, Nov 17, 2007
    #11
  12. charlbury

    a-ok-site Guest

    On Nov 17, 6:07 am, "Jukka K. Korpela" <> wrote:
    > Scripsit charlbury:
    >
    > > Hi, I'm having trouble with CSS white space.

    >
    > Stop worrying about that. Learn the elements of the basics of HTML first.
    >
    > > font-family: arial, verdana, tahoma, sans-serif;
    > > font-size: 12px;

    >
    > And later, read a decent tutorial on CSS before creating the usual crap of
    > thoughtless CSS code. Anyone who has read such a tutorial knows from the two
    > lines above that it makes little sense to try to help you with CSS issues
    > before you are willing to forget what you thought you knew about it and
    > start actually _learning_ how to use CSS.
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    DOH.....first post link was cut off....grrrr

    W3C CSS Validator Results for

    http://www.cs.tut.fi/~jkorpela/

    > "start actually _learning_ how to use CSS."


    LMAO......Maybe, validate before making a statement like previous!!!
     
    a-ok-site, Nov 17, 2007
    #12
  13. charlbury

    a-ok-site Guest

    On Nov 17, 6:07 am, "Jukka K. Korpela" <> wrote:
    > Scripsit charlbury:
    >
    > > Hi, I'm having trouble with CSS white space.

    >
    > Stop worrying about that. Learn the elements of the basics of HTML first.
    >
    > > font-family: arial, verdana, tahoma, sans-serif;
    > > font-size: 12px;

    >
    > And later, read a decent tutorial on CSS before creating the usual crap of
    > thoughtless CSS code. Anyone who has read such a tutorial knows from the two
    > lines above that it makes little sense to try to help you with CSS issues
    > before you are willing to forget what you thought you knew about it and
    > start actually _learning_ how to use CSS.
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    DOH.....first post link was cut off....grrrr

    W3C CSS Validator Results for

    http://jigsaw.w3.org/css-validator/...warning=0&uri=http://www.cs.tut.fi/~jkorpela/

    > "start actually _learning_ how to use CSS."


    LMAO......Maybe, validate before making a statement like previous!!!
     
    a-ok-site, Nov 17, 2007
    #13
  14. Scripsit a-ok-site:

    > DOH.....first post link was cut off....grrrr


    Don't worry, you already ridiculed yourself in public. No wonder you write
    anonymously.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Nov 17, 2007
    #14
  15. charlbury

    a-ok-site Guest

    On Nov 17, 1:35 pm, "Jukka K. Korpela" <> wrote:
    > Scripsit a-ok-site:
    >
    > > DOH.....first post link was cut off....grrrr

    >
    > Don't worry, you already ridiculed yourself in public. No wonder you write
    > anonymously.
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    People like you are why I hate groups. Just because something else
    was going on and I was not paying attention DOES NOT MEAN I RIDICULED
    MYSELF: however, you did! About the anonymous crap, I am one of the
    few that actually has a real profile. Do you.... From the way people
    have acted since I joined this group, and not just towards me, I can
    live without it.
     
    a-ok-site, Nov 17, 2007
    #15
  16. a-ok-site wrote:

    > .. I am one of the few that actually has a real profile.


    That sounds like a Google Group thing...

    This isn't Google Groups, you know, it's Usenet, and all we need is a
    news reader and a news service. ;-)

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Nov 17, 2007
    #16
  17. charlbury

    Bone Ur Guest

    Well bust mah britches and call me cheeky, on Sat, 17 Nov 2007 19:41:04
    GMT a-ok-site scribed:

    >> > DOH.....first post link was cut off....grrrr

    >>
    >> Don't worry, you already ridiculed yourself in public. No wonder you
    >> write anonymously.
    >>
    >> --
    >> Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

    >
    > People like you are why I hate groups.


    Even The Doobie Brothers?

    > Just because something else
    > was going on and I was not paying attention DOES NOT MEAN I RIDICULED
    > MYSELF: however, you did! About the anonymous crap, I am one of the
    > few that actually has a real profile. Do you....


    Probably when he turns sideways to the light source....

    > From the way people
    > have acted since I joined this group, and not just towards me, I can
    > live without it.


    Whinny kids do not exactly enhance my living experience, either.

    --
    Bone Ur
    Cavemen have formidable pheromones.
     
    Bone Ur, Nov 17, 2007
    #17
  18. Ben C wrote:

    > Even if headings are supposed to be strictly hierarchical, you could
    > still have two top level headings in a document-- just two trees of
    > headings side by side.


    Something like...

    h1. Cats & Dogs
    h2. Cats
    h3. Siamese cats
    h3. Tabby cats
    h2. Dogs
    h3. Greyhounds
    h3. Beagles
    h1. Fish
    h2. Sharks
    h3. Hammerhead sharks
    h2. Cod
    h2. Sardines

    But one could argue that the two h1-level headings should in fact be h2:

    h1{display:none}. Good Pets to Keep
    h2. Cats & Dogs
    h3. Cats
    h4. Siamese cats
    h4. Tabby cats
    h3. Dogs
    h4. Greyhounds
    h4. Beagles
    h2. Fish
    h3. Sharks
    h4. Hammerhead sharks
    h3. Cod
    h3. Sardines

    That is, there can only be one <title> element for the page, so there
    should only ever be one <h1> element, which should roughly correspond with
    it. (It is often useful to include context information in the title, such
    as the name of the collection of documents to which this document belongs.)

    --
    Toby A Inkster BSc (Hons) ARCS
    [Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
    [OS: Linux 2.6.12-12mdksmp, up 11 days, 19:36.]
    [Now Playing: ./counting_crows/millers_angels_demo.ogg.]

    Belgium
    http://tobyinkster.co.uk/blog/2007/11/17/belgium/
     
    Toby A Inkster, Nov 18, 2007
    #18
  19. Toby A Inkster wrote:
    > Ben C wrote:
    >
    >> Even if headings are supposed to be strictly hierarchical, you could
    >> still have two top level headings in a document-- just two trees of
    >> headings side by side.

    >
    > Something like...
    >
    > h1. Cats & Dogs
    > h2. Cats
    > h3. Siamese cats
    > h3. Tabby cats
    > h2. Dogs
    > h3. Greyhounds
    > h3. Beagles
    > h1. Fish
    > h2. Sharks
    > h3. Hammerhead sharks
    > h2. Cod
    > h2. Sardines
    >
    > But one could argue that the two h1-level headings should in fact be h2:
    >
    > h1{display:none}. Good Pets to Keep
    > h2. Cats & Dogs
    > h3. Cats
    > h4. Siamese cats
    > h4. Tabby cats
    > h3. Dogs
    > h4. Greyhounds
    > h4. Beagles
    > h2. Fish
    > h3. Sharks
    > h4. Hammerhead sharks
    > h3. Cod
    > h3. Sardines
    >
    > That is, there can only be one <title> element for the page, so there
    > should only ever be one <h1> element, which should roughly correspond with
    > it. (It is often useful to include context information in the title, such
    > as the name of the collection of documents to which this document belongs.)
    >


    I agree with this that there should be only on H1 per page, but the HTML
    Gods will not strike you dead if you using more than one (but if you do
    it should make logical sense) What I object to is the use of H# to
    "style" with. In other words using H# where the text is not a heading
    but where the author merely wants bigger bolder text!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 18, 2007
    #19
  20. charlbury

    dorayme Guest

    In article <4812a$47405512$40cba7a3$>,
    "Jonathan N. Little" <> wrote:

    > Toby A Inkster wrote:
    > > Ben C wrote:
    > >
    > >> Even if headings are supposed to be strictly hierarchical, you could
    > >> still have two top level headings in a document-- just two trees of
    > >> headings side by side.

    > >

    <example of two h1 trees...>
    > > That is, there can only be one <title> element for the page, so there
    > > should only ever be one <h1> element, which should roughly correspond with
    > > it. (It is often useful to include context information in the title, such
    > > as the name of the collection of documents to which this document belongs.)
    > >

    >
    > I agree with this that there should be only on H1 per page, but the HTML
    > Gods will not strike you dead if you using more than one (but if you do
    > it should make logical sense) What I object to is the use of H# to
    > "style" with. In other words using H# where the text is not a heading
    > but where the author merely wants bigger bolder text!


    Yes, to use it to get the font-size you want for a bit of text is
    altogther wrong. But back to the question of the headings as
    logical structure, it depends on the material in the page whether
    you argue one way or another, to stick to 'only one h1 per page'
    is a policy decision that is good for the most part. There is the
    question whether it is always needed to use an h1, it could be
    implied by the context, it may not need to be stated, the page
    goes straight to h2s and down for different strands under the
    unstated h1. (I think that possibility is what Toby was implying
    by his h1 {display: none}".

    On the other hand, it could be that his example is a little too
    favourable to the "only one h1 per page" policy. You can be
    struck by the reference of the page itself to guide you, in which
    you will always find an h1 (stated or implied) or you can be
    guided by the material under the heading, and you want a really
    meaningful heading for it, no less than an h1 doing it justice.

    --
    dorayme
     
    dorayme, Nov 18, 2007
    #20
    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. Andreas Emmert

    margin/padding of submit button with CSS

    Andreas Emmert, Sep 28, 2003, in forum: HTML
    Replies:
    14
    Views:
    21,352
    chung
    Apr 22, 2008
  2. Replies:
    11
    Views:
    680
    =?ISO-8859-1?Q?G=E9rard_Talbot?=
    Oct 28, 2006
  3. Ben C
    Replies:
    6
    Views:
    2,188
    Leif K-Brooks
    Jan 28, 2007
  4. J055
    Replies:
    3
    Views:
    492
  5. cera
    Replies:
    1
    Views:
    1,301
    Neredbojias
    Aug 18, 2007
Loading...

Share This Page