Welcome to WebmasterWorld Guest from 54.234.8.146

Forum Moderators: not2easy

Message Too Old, No Replies

avoid extra line after h2 h3 etc?

Maybe with css?

     

louponne

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

WebmasterWorld Senior Member 10+ Year Member



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?

Nick_W

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

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



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

seindal

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

10+ Year Member



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

louponne

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

WebmasterWorld Senior Member 10+ Year Member



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.

Nick_W

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

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



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

louponne

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

WebmasterWorld Senior Member 10+ Year Member



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.

louponne

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

WebmasterWorld Senior Member 10+ Year Member



btw, why margin *and* padding? What's the difference? Do you need to set both?

seindal

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

10+ Year Member



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

René.

Longhaired Genius

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

10+ Year Member



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

louponne

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

WebmasterWorld Senior Member 10+ Year Member



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?

stever

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

WebmasterWorld Senior Member 10+ Year Member



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

seindal

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

10+ Year Member



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

Nick_W

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

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



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

louponne

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

WebmasterWorld Senior Member 10+ Year Member



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

louponne

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

WebmasterWorld Senior Member 10+ Year Member



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

Nick_W

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

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



<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

louponne

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

WebmasterWorld Senior Member 10+ Year Member



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>

tedster

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

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



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month