Welcome to WebmasterWorld Guest from 107.20.54.98

Forum Moderators: not2easy

Message Too Old, No Replies

CSS and Opera

How to remove space above <h> tags.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


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 July 30, 2002 (gmt 0)

Senior Member from US 

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

joined:Apr 27, 2001
posts:12166
votes: 51


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 July 30, 2002 (gmt 0)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


Try this:

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

Nick

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


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 July 30, 2002 (gmt 0)

Senior Member

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

joined:May 26, 2000
posts:37301
votes: 0


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 July 30, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


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 July 30, 2002 (gmt 0)

Senior Member from US 

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

joined:Apr 27, 2001
posts:12166
votes: 51


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 July 31, 2002 (gmt 0)

Senior Member from US 

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

joined:Mar 31, 2002
posts:7575
votes: 0


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 July 31, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 31, 2001
posts:1238
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members