Stylesheets - h1 tag problem? why?

Author

h1 tag problem? why?

Simon

2003-12-17, 9:41 am

Hi,

Can anybody tell me how I stop the extra space my heading tags produce under
the text.
The space the tag is producing is throwing my layout out alot and I cant
figure how to remove it. If I change the line height ..the top of the text
is cut off...how do I do this?

Any advice is much appreciated

Sy

Fabian Neumann

2003-12-17, 9:41 am

Am 16.12.2003 23:28 schrieb Simon:

quote:

> Hi,
>
> Can anybody tell me how I stop the extra space my heading tags produce under
> the text.

This should solve your problem:

h1 {
margin-bottom:0;
}

To remove any default whitespace use:

h1 {
padding:0;
margin:0;
}

Fabian

Arne

2003-12-17, 9:41 am

"Simon" <simon@digink.co.uk> skrev i meddelandet
news:2GLDb.2207$2r4.1066@newsfep3-gui.server.ntli.net...

quote:

> Hi,
>
> Can anybody tell me how I stop the extra space my heading tags produce

under

quote:

> the text.
> The space the tag is producing is throwing my layout out alot and I

cant

quote:

> figure how to remove it. If I change the line height ..the top of the

text

quote:

> is cut off...how do I do this?
>
> Any advice is much appreciated
>

Try <H1 style="-5px;"> (negativ value)
But I don't know for sure how it validates or works in all browsers.

--
/Arne

brucie

2003-12-17, 9:41 am

in post <news:2GLDb.2207$2r4.1066@newsfep3-gui.server.ntli.net>
Simon said:

quote:

> Can anybody tell me how I stop the extra space my heading tags produce under
> the text.

margin-bottom:0;

--
brucie
17/December/2003 08:46:05 am kilo

Arne

2003-12-17, 9:41 am

"brucie" <brucie01@bruciesusenetshit.info> skrev i meddelandet
news:bro251$5l0k6$1@ID-117621.news.uni-berlin.de...

quote:

> in post <news:2GLDb.2207$2r4.1066@newsfep3-gui.server.ntli.net>
> Simon said:
>
produce under[QUOTE][color=darkred]
>
> margin-bottom:0;
>

I belive you must use a negative value to get it realy "tight", i.e
margin-bottom:-5px;

--
/Arne

Anne van Kesteren

2003-12-17, 9:41 am

Arne wrote:

quote:

> I belive you must use a negative value to get it realy "tight", i.e
> margin-bottom:-5px;

No, that is stupid, since you could pull the element below over the H1
element. You should only use negative margins to 'design' not to remove
whitespace.

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

Anne van Kesteren

2003-12-17, 9:41 am

Arne wrote:

quote:

> Try <H1 style="-5px;"> (negativ value)
> But I don't know for sure how it validates or works in all browsers.

This isn't the way to do it.

h1{
margin:0;
padding:0;
}

Is the way to go, as explained in other mails.

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

Arne

2003-12-17, 9:41 am

"Anne van Kesteren" <mail@annevankesteren.nl> skrev i meddelandet
news:brp1ba$7hd$1@reader08.wxs.nl...

quote:

> Arne wrote:
>
> No, that is stupid, since you could pull the element below over the H1
> element. You should only use negative margins to 'design' not to

remove

quote:

> whitespace.
>
>

I don't say you are wrong, but at least it works fine for me, tested
with IE 6.xx and Netscape 7.xx
Don't know about Opera and other.
--
/Arne

Simon

2003-12-17, 9:41 am

"Anne van Kesteren" <mail@annevankesteren.nl> wrote in message
news:brp1d7$7hd$2@reader08.wxs.nl...

quote:

> Arne wrote:
>
> This isn't the way to do it.
>
> h1{
> margin:0;
> padding:0;
> }
>
> Is the way to go, as explained in other mails.
>
>
> --
> Anne van Kesteren
> <http://www.annevankesteren.nl/>

Thankyou Everyone :)

Sy

Jukka K. Korpela

2003-12-18, 8:46 pm

"Arne" <arne.luras@telia.com> wrote:

quote:

>
> I don't say you are wrong, but at least it works fine for me,
> tested with IE 6.xx and Netscape 7.xx

It depends on your definition of "works". A negative bottom margin
means that the elements will partly overprint each other, if the next
element's top margin is zero. What this means depends on the context.
Making text lines touch (or even overprint) is usually not a good idea.

But maybe you mean that the next element has a nonzero margin. Then
that's the issue you should consider. Negative margins are a somewhat
clumsy way of addressing that problem.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Neal

2003-12-19, 9:45 pm

"Arne" <arne.luras@telia.com> wrote in message
news:1eMDb.38711$mU6.139382@newsb.telia.net...

quote:

> produce under
>
> I belive you must use a negative value to get it realy "tight", i.e
> margin-bottom:-5px;

Corect me if I'm wrong. Please.

But doesn't the UA only use the largest margin of the two when vertically
aligning block elements? So as long as you have a margin of 0, the margin
that occurs will be the one set or default for the other element (in this
case, a p seemingly)?

Jukka K. Korpela

2003-12-19, 9:45 pm

"Neal" <neal@spamrcn.com> wrote:

quote:

> But doesn't the UA only use the largest margin of the two when
> vertically aligning block elements?

Not always. When a bottom margin is -5px and the next element's top
margin is 15px, the effective margin is 10px.

quote:

> So as long as you have a margin
> of 0, the margin that occurs will be the one set or default for the
> other element (in this case, a p seemingly)?

Yes, if is zero or positive. But not when it is negative.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Neal

2003-12-19, 9:45 pm

"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote in message
news:Xns9456CAB913D5Bjkorpelacstutfi@193.229.0.31...

quote:

> "Neal" <neal@spamrcn.com> wrote:
>
>
> Not always. When a bottom margin is -5px and the next element's top
> margin is 15px, the effective margin is 10px.
>
>
> Yes, if is zero or positive. But not when it is negative.

Wow. That's a little counter-intuitive. But thanks.