Question

Been trying my hardest to remove the extra line space (or padding, margin, whatever it is) from this page in firefox:

http://emctalk.com.au/

See the menu? compare that to chrome, and you’ll notice the menu sits too far below the background, making the layout seem broken.

Anyway I tried adding line-height: 1px to the UL item and then taking out the height on the LI elements, making them as small as they can possibly be.

This actually makes it look normal, but this way, I feel is a hack. I’m interested to know what the actual problem is so that I can solve it in the future.

If anyway has some advice on how to fix it, that would be greatly appreciated. I am using FF5, and the latest Google Chrome.

Thanks.

Answer 1

Change the following in your CSS:

/* http://emctalk.com.au/site/assets/template/css/base.css?v2( line: 375 )*/

.home a {
    display: block;
    height: 150px;
    text-indent: -2000em;
}

to

/* http://emctalk.com.au/site/assets/template/css/base.css?v2( line: 375 )*/

.home a {
    display: block;
    height: 140px; /*The height 150px causes the problem*/
    text-indent: -2000em;
}

This should fix the issue.