CSS White Space - margin and padding question

C

charlbury

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>
 
C

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.
 
A

asdf

charlbury said:
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>
Click to expand...


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
}
 
J

Jonathan N. Little

charlbury said:
Hi, I'm having trouble with CSS white space. With the code at the
bottom of this post I expect the following output:
Click to expand...
<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>
Click to expand...

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

a-ok-site

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





}
Click to expand...

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
 
R

richard

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

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.
 
J

Jonathan N. Little

richard said:
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.
Click to expand...


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; ... }
 
B

Ben C

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; ... }
Click to expand...

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.
 
J

Jukka K. Korpela

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.
Click to expand...

<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>
 
J

Jukka K. Korpela

Scripsit charlbury:
Hi, I'm having trouble with CSS white space.
Click to expand...

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

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.
 
A

a-ok-site

Scripsit charlbury:


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


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.
Click to expand...

W3C CSS Validator Results for http://www.cs.tut.fi/~jkorpela/
 
A

a-ok-site

Scripsit charlbury:


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


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.
Click to expand...

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."
Click to expand...

LMAO......Maybe, validate before making a statement like previous!!!
 
A

a-ok-site

Scripsit charlbury:


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


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.
Click to expand...

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."
Click to expand...

LMAO......Maybe, validate before making a statement like previous!!!
 
J

Jukka K. Korpela

Scripsit a-ok-site:
DOH.....first post link was cut off....grrrr
Click to expand...

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

a-ok-site

Scripsit a-ok-site:


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

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.
 
B

Beauregard T. Shagnasty

a-ok-site said:
.. I am one of the few that actually has a real profile.
Click to expand...

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. ;-)
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Sat, 17 Nov 2007 19:41:04
GMT a-ok-site scribed:
People like you are why I hate groups.
Click to expand...

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....
Click to expand...

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.
Click to expand...

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

Toby A Inkster

Ben said:
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.
Click to expand...

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/
 
J

Jonathan N. Little

Toby said:
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.)
Click to expand...

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!
 
D

dorayme

"Jonathan N. Little said:
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!
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Justify-content not working 1
Interfering CSS 1
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Help with Visual Lightbox: Scripts 2
Positioning CSS components 1
Working on mobile css menu with plenty of frustration! 2
Help with my responsive home page 2
Dropdown menu in a fixed navbar 2

Members online

No members online now.
Total: 38 (members: 0, guests: 38)
Robots: 193

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top