Strange Double Line Height when using H2 tag

Posted on 2006-05-07
Last Modified: 2010-05-18
I have just modified one of my pages slightly so that some text links are enclosed in H2 tags.  I have styled the H2 tags with the following code.

h2 {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF}
h2 a:link {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF}
h2 a:active {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF}
h2 a:visited {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF}
h2 a:hover {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; text-decoration:underline}

All of the text appears in DIV containers that are styled with the folloing CSS.

.home_links {width:145px; height:20px; background-color:#010167; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; border:1px solid color:#999999; line-height:20px}

Each DIV is in a TD - <TD align="right" height="20">

Strangely, in IE my DIV appears twice the height of the line-height, i.e 40px when I am only looking for a DIV height of 20px.

In Netscape / FF it appears Okay.

Can any body make any suggestions in relation to correcting this?

Thanks in advance,

Question by:andrewmilner
    LVL 14

    Accepted Solution

    hey, i know an 'andrew milner' ;)

    headings and paragraphs have margins by default. have you tried adding: margin-top:0;margin-bottom:0;  ?

    if that doesn't do the trick, can you post a little additional code (html & css)?

    Author Comment

    That's done the trick nltech.  Thanks for your speedy resolve.

    Perhaps you know me :-0.  Where you from?

    Thanks again.


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

    794 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now