Welcome to WebmasterWorld Guest from 23.22.231.22

Forum Moderators: not2easy

Message Too Old, No Replies

avoid extra line after h2 h3 etc?

Maybe with css?

     
1:25 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2000
posts:663
votes: 0


When I use a <h2> or <h3> tag, I invariably get an extra empty line after the closing tag. Is there any way to avoid this?
1:34 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


Yes, first up let me tell you that there is no 'extra line'. It's just margin/padding for a block level element.

With that in mind, you need to adjust the margins and padding with CSS. Here's how you do it:

With just an h1

h1 {
margin-bottom: 0;
padding-bottom: 0;
}

You can play with all kinds of variations of cours.

Now if you want to do it for h1's and h2's

h1, h2 {
margin-bottom: 0;
padding-bottom: 0;
}

And if you just want to select certain hx's to do this with:

<h1 class="nomargin">blah blah</h1>

.nomargin {
margin-bottom: 0;
padding-bottom: 0;
}

You can alter the complet appearance of an h1 also, try this:

h1 {
font: bold 1.5em arial, verdana, sans-serif;
padding: .4em;
border: 2px solid #000000;
color: #CC0000;
background-color: #F5F5F5;
margin: 0 0 20px 0; /* top right bottom left */
}

Fun isnt' it?

Nick

1:56 pm on Nov 9, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Oct 28, 2002
posts:492
votes: 0


Hi,

When trying to find out which elements generate what spaces, I put in a brigthly coloured border, like

H1 { border: 1px solid red; }

When I have found the offending element, I then adjust the margin and padding of it.

I obviously remove the border afterwards :-)

René.

3:25 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2000
posts:663
votes: 0


Are margins and padding in css pretty reliable (I mean in css-supporting browsers, of course)? I thought that NN had real trouble with those.
3:47 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


NN4 has real trouble but then nn4 has real trouble with everything! There's no equivalent way to handle it in pure html anyhow so you're stuck using CSS

Good news is, this kind of simple stuff is very reliable across most browsers...

Nick

3:57 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2000
posts:663
votes: 0


hmm, right - I just opened up the page in NN4 and it seems to add the declared css pixels on to that "extra line" padding that's there by default. harrumph.
4:00 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2000
posts:663
votes: 0


btw, why margin *and* padding? What's the difference? Do you need to set both?
4:12 pm on Nov 9, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Oct 28, 2002
posts:492
votes: 0


Padding is inside the element and margin is outside the element. The border, strangely enough, sits inbetween them :-)

René.

4:15 pm on Nov 9, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 28, 2002
posts:564
votes: 0


Yes, css margins in Netscape 4 can give wierd and distressing results. But css in Netscape 4 is broken in lots of ways, it is best to serve it its own content with browser sniffing or the @import hack.

THE @import HACK

<link rel="stylesheet" href="netscape-styles.css" type="text/css"> <!-- stylesheet for netscape only -->
<style type="text/css">
@import url(proper-styles.css); <!-- stylesheet for css enabled browsers -->
</style>

For the differences between margin and padding see the CSS2 box-model specifications:

[w3.org...]

4:29 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2000
posts:663
votes: 0


ok, if I understand right, if I don't use a border, there's no concrete difference between margin and padding!

I'm using DW to make my site - if I use "browser-sniffing" or the "@import hack", isn't that going to make my nifty WYSISWG designing mode all ugly?

4:39 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 27, 2001
posts:1138
votes: 0


>I'm using DW to make my site - if I use "browser-sniffing" or the "@import hack", isn't that going to make my nifty WYSISWG designing mode all ugly?

...not when you preview it in the relevant browser. It does mean you won't be able to edit the CSS for 4+ browsers from the original document but all you have to do is just open up the CSS document as well and change it about in code view...

4:43 pm on Nov 9, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Oct 28, 2002
posts:492
votes: 0


There is a difference between margin and padding, at least vertically.

If you have two elements, one above the other, the distance between their borders will be the maximum of the margin-bottom of the upper element and the margin-top of the lower element. They do not add up. Rather vertical margin gives a minimum required margin.

So if you have

H1 { margin-bottom: 3ex; }
H2 { margin-bottom: .5ex; }
P { margin-top: 1ex; }

You will have 3ex of vertical space between a H1 and a P, while you will have 1ex vertical space between a H2 and a P.

Padding, on the other hand, is inside the elements, and is added before the relative positions of the elements are decided. So if H1 had padding-bottom of 1ex and P had padding-top of 2ex, then there will be 3ex of vertical space between them, in addition to the margins as described above.

Padding and margin is not interchangeable vertically, not even if there is no border.

René.

4:45 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


if I understand right, if I don't use a border, there's no concrete difference between margin and padding!

Wrong. Check the link longhairedgenius gave earliet. The border just helps you see the difference.

Nick

5:15 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2000
posts:663
votes: 0


> Wrong. Check the link longhairedgenius gave

Yes, of course I read through that before posting. But it wasn't nearly as clear as seindal's explanation. Many thanks!

5:26 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2000
posts:663
votes: 0


ok, I have another css question for you folks.
I have been trying to figure out how the left-side navigation works on
this page [nationaltrust.org]
Specifically, how they get that hover color to fill the table cell, and how the table cell becomes entirely "clickable".
It seems that they do that by having the css of those links with, among other things :
WIDTH: 100%
How reliable is *that*?

(I know that they sniff out NN and serve up a much simpler css - I checked!)

5:40 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


<td><a href="somelink.html">Some text</a></td>

in your css:

td a {
width: 100%;
display: block;
}

or a class for those links of course. There's a better way with divs though. Table layouts are graceless...

Nick

11:39 pm on Nov 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2000
posts:663
votes: 0


In the "answering my own question" department:

I'm using DW to make my site - if I use the "@import hack", isn't that going to make my nifty WYSISWG designing mode all ugly?

copied straight from a macromedia.com page :

To accomplish this, you first attach the style sheet for the older browsers using the link method. Then, select import to attach the style sheet for newer browsers. The resulting code will look similar to this:

<link href="oldbrowsers.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("newbrowsers.css");
-->
</style>

6:29 am on Nov 30, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


Seindal's explanation of the border collapsing rule is spot on. And it's here, in the border collapsing rule, that NN4 fouls up with H tags.

So, when I want the same effect NN4, I apply a NEGATIVE margin-top to the following <p> tag in the NN4 stylesheet. I can bring in the NN4 specialties with a javascript sniff for document.layers and I get the same effect on the old-timer browser.