Welcome to WebmasterWorld Guest from 184.73.3.107

Forum Moderators: not2easy

CSS and Opera

How to remove space above <h> tags.

   
8:59 pm on Jul 30, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

9:05 pm on Jul 30, 2002 (gmt 0)

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



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.

9:07 pm on Jul 30, 2002 (gmt 0)

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



Try this:

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

Nick

9:57 pm on Jul 30, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

10:01 pm on Jul 30, 2002 (gmt 0)

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



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.

10:06 pm on Jul 30, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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!
11:51 pm on Jul 30, 2002 (gmt 0)

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



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.

1:39 am on Jul 31, 2002 (gmt 0)

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

2:30 am on Jul 31, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

9:19 pm on Aug 1, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month