Nick_W
msg:1176017 | 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
msg:1176018 | 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
msg:1176019 | 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
msg:1176020 | 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
msg:1176021 | 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
msg:1176022 | 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
msg:1176023 | 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
msg:1176024 | 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
msg:1176025 | 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
msg:1176026 | 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
msg:1176027 | 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
msg:1176028 | 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
msg:1176029 | 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
msg:1176030 | 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
msg:1176031 | 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
msg:1176032 | 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
msg:1176033 | 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.
|
|
