homepage Welcome to WebmasterWorld Guest from 23.23.12.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
avoid extra line after h2 h3 etc?
Maybe with css?
louponne

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 1:25 pm on Nov 9, 2002 (gmt 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?

 

Nick_W

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



 
Msg#: 385 posted 1:34 pm on Nov 9, 2002 (gmt 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

seindal

10+ Year Member



 
Msg#: 385 posted 1:56 pm on Nov 9, 2002 (gmt 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é.

louponne

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 3:25 pm on Nov 9, 2002 (gmt 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.

Nick_W

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



 
Msg#: 385 posted 3:47 pm on Nov 9, 2002 (gmt 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

louponne

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 3:57 pm on Nov 9, 2002 (gmt 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.

louponne

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 4:00 pm on Nov 9, 2002 (gmt 0)

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

seindal

10+ Year Member



 
Msg#: 385 posted 4:12 pm on Nov 9, 2002 (gmt 0)

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

René.

Longhaired Genius

10+ Year Member



 
Msg#: 385 posted 4:15 pm on Nov 9, 2002 (gmt 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...]

louponne

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 4:29 pm on Nov 9, 2002 (gmt 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?

stever

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 4:39 pm on Nov 9, 2002 (gmt 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...

seindal

10+ Year Member



 
Msg#: 385 posted 4:43 pm on Nov 9, 2002 (gmt 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é.

Nick_W

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



 
Msg#: 385 posted 4:45 pm on Nov 9, 2002 (gmt 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

louponne

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 5:15 pm on Nov 9, 2002 (gmt 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!

louponne

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 5:26 pm on Nov 9, 2002 (gmt 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!)

Nick_W

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



 
Msg#: 385 posted 5:40 pm on Nov 9, 2002 (gmt 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

louponne

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 385 posted 11:39 pm on Nov 9, 2002 (gmt 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>

tedster

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



 
Msg#: 385 posted 6:29 am on Nov 30, 2002 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved