CSS and Opera

How to remove space above <h> tags.

[Birdman]

I'm trying to figure out if there is a way to make the space above the <h> tag go away in Opera. It's not there in IE. I have a limited amout of space and that extra space above the header throws my page off in Opera. Thanks.

Birdman

[pageoneresults]

h1{font-family:"verdana", arial, helvetica, sans-serif;margin-top:0px;margin-bottom:0px;}

I believe I picked that up from Big Daddy papabaer in my travels. Opera also seems to have a problem with font declaration in heading tags, that is why I have the fonts listed.

[Nick_W]

Try this:

h1 {
  margin: 0 0 .5em 0; /*top, right, bottom, left*/
}

Nick

[Birdman]

Thanks. That solved my problem. I knew I'd feel stupid after I heard the solution. ;)

Now, I can't seem to make the <li>'s get closer together in Opera. I tried styling <li> and <ul>. I'll get it one day, but until then thanks for all the help

[tedster]

Make sure you change both margin-top and margin-bottom for <li>.

Proper margin collapsing will always keep the larger of the two margins showing, so even changing one margin to zero still leaves the space declared (or defaulted to) in the other.

[Birdman]

Man, that was fast! Thanks tedster, I would have never figured that out. I thought you couldn't even style <li>, because it never seemed to work. I have been enlightened!

[pageoneresults]

Ooh, another addict coming on board!

You can also style your <li>s and tame that left margin by doing this...

li{font-family:"verdana", arial, helvetica, sans-serif;margin-top:0px;margin-left:5px;margin-bottom:0px;}

I believe the default margin for IE is 15px.

Oh, I should have written that in shorthand but I haven't made that leap yet.

[lorax]

Oh, I should have written that in shorthand but I haven't made that leap yet.

I'm glad you didn't 'cause then I'd have to go searching for the explanation - again! ;)

[papabaer]

Hey Birdman, line-height works pretty slick when applied to ol,ul lists. Here are some CSS snippets from a test page I experimented with:

ul.f {
margin-left:20px;
border:1px solid black;
background-image: url(assets/bk_fc0456.jpg)
}
ul.g {
margin-right:20px;
margin-bottom:-15px;
border:1px solid black;
background-image: url(assets/bk_fc0456.jpg)
}
ul.h {
list-style-image:url(assets/star10.gif);
margin-right:20px;
margin-top:50px;
margin-bottom:40px;
border:1px solid black;
background-image: url(assets/bk_fc0456.jpg)
}
ul.i {
margin-left:20px;
border:1px solid black;
line-height:12px;
background-image: url(assets/bk_fc0456.jpg)
}
ul.j {
margin-left:30px;
margin-right:25px;
margin-bottom:-15px;
line-height:12px;
border:1px solid black;
background-image: url(assets/bk_fc0456.jpg)
}
ul.k {
list-style-image:url(assets/star10.gif);
margin-right:20px;
margin-top:50px;
margin-bottom:40px;
line-height:12px;
border:1px solid black;
background-image: url(assets/bk_image.jpg)
}
ul.l {
margin-left:20px;
border:1px solid black;
line-height:16px;
background-image: url(assets/bk_mine.jpg)
}
ul.m {
margin-left:30px;
margin-right:25px;
margin-bottom:-15px;
line-height:16px;
border:1px solid black;
background-image: url(assets/bk_yeah.jpg)
}
ul.n {
list-style-image:url(assets/star10.gif);
margin-right:20px;
margin-top:50px;
margin-bottom:40px;
line-height:16px;
border:1px solid black;
background-image: url(assets/can_i_get_a.gif)
}
ul.o {
margin-left:30px;
margin-right:25px;
line-height:12px;
border:1px solid black;
background-image: url(assets/some.jpg)
}

/* end css snippets */

Change the values or create new .classes to view the effects. By all means pay attention to marging-right in Opera as the browser, once again follows W3C recommendations regarding element spacing. Test using Opera and IE and compare.

[Birdman]

>>pageoneresults

Ooh, another addict coming on board!

You know it! I dig this CSS stuff. So much easier overall.

>>papabaaer

ul.h {
list-style-image:url(assets/star10.gif);
margin-right:20px;
margin-top:50px;
margin-bottom:40px;
border:1px solid black;
background-image: url(assets/bk_fc0456.jpg)
}

Ah, I like that one. A new toy to play with ;)

Thanks again!