homepage Welcome to WebmasterWorld Guest from 204.236.255.69
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS and Opera
How to remove space above <h> tags.
Birdman




msg:1221299
 8:59 pm on Jul 30, 2002 (gmt 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

 

pageoneresults




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

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




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

Try this:

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

Nick

Birdman




msg:1221302
 9:57 pm on Jul 30, 2002 (gmt 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

tedster




msg:1221303
 10:01 pm on Jul 30, 2002 (gmt 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.

Birdman




msg:1221304
 10:06 pm on Jul 30, 2002 (gmt 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!

pageoneresults




msg:1221305
 11:51 pm on Jul 30, 2002 (gmt 0)

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




msg:1221306
 1:39 am on Jul 31, 2002 (gmt 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! ;)

papabaer




msg:1221307
 2:30 am on Jul 31, 2002 (gmt 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.

Birdman




msg:1221308
 9:19 pm on Aug 1, 2002 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved