IE shows more space between paragraph

[mukeshrasm]

Hi

I have written some code which works fine as I intend to work in Mozilla but not in IE. In IE it shows more space between two lines "Franchise Support" "Store Environment".

so what is wrong in this code. here is code

 
<div id="mainNav">
        <ul>
            <li><a href="about.html" class="on">About Jamba</a></li>
            <li><a href="support.html">Franchise Support</a></li>
            <li><a href="store.html">Store Environment</a></li>
            <li><a href="products.html">Jamba Products</a></li>
            <li><a href="brands.html">Jamba Brands</a></li>
        </ul>
    </div>
 
 

 
#mainNav{
    width: 181px;
    height: 130px;
    float: left;
    background:url(../images/mainNavBg.gif) left bottom no-repeat;
}
 
#mainNav ul{
    color: #572600;
    list-style: none;
    height:10px;
}
#mainNav li{
    font-size: 10px;
 
}
#mainNav ul li a{ padding-left: 30px; color: #572600; text-decoration: none;}
#mainNav ul li a:hover{color: #ffffff;}
#mainNav ul li a.on{color: #ffffff;}
 
 

[prabirchoudhury]

hey..

you could use line height in #mainNav class

 
#mainNav{
width: 181px;
height: 130px;
float: left;
/*change your height you need*/
line-height: 20pt;
background:url(../images/mainNavBg.gif) left bottom no-repeat;
}
 
 

[mukeshrasm]

@prabirchoudhury
Thanks! It works fine but I wanted to ask that why do I need to give line-height for IE which works for other browser as well. why don't it works without line-height as it works fine in Mozilla and Chrome.

[drhowarddrfine]

@mukeshrasm
I'm too lazy to look at why this fixes it but always remember that IE is the worst browser on the planet. 11 years behind all others in modern standards and practices, it should never be trusted to do anything correctly.

[prabirchoudhury]

drhowarddrfine is right .. IE sucks man .. good that is fixed ... :)

[omerbutt]

@mukeshrasm
some times you donot have a valid argument for such things so donot get yourself stucked into y it works like this , just make your mind that it works like this and yes IE is like :S

[vacvac]

IE is garbage, because is MICROSOFT. Do you listen music in Windows Media Player or in Winamp, same with IE and Mozilla. Even IE don't support transparent *.png, don't suport some CSS codes. IE not works with the Web strandarts

[Stomme poes]

I would assume the line-height works because IE is always paying attention to line heights and font sizes (why when you are trying to make a 0 height div, in IE there's always a bit of height unless you explicitly state font-size: 0).

IE6 used to believe line-height = height. I know IE7 doesn't have this exact bug but it might have had something similar (esp if the original bug had anything to do with Haslayout).

If IE8 did not need the fix then I would def. be leaning more towards a "Haslayout affected it" scenario. I'm not sure if I ever read anywhere where the font/line-height bug came from.

[JamieHowarth0]

A quick tip - a standard-compliant way of getting IE6 elements to render using IE6-specific styling (and yes, it is to do with some elements not correctly having hasLayout set) is to use the * html selector.
Weird, but IE6 believes that there is an "invisible" element wrapping the root HTML element in any document - so * html body div.yourelementid will only work in IE6.

line-height forces hasLayout in IE6, as does height - I can't remember the rest right now. PositionIsEverything has a bunch of stuff on how to get standards-compliant CSS to work in most browsers.

codegecko

[Stomme poes]

Line-height does not trigger Haslayout, though yes height does-- IE6's confusing between height and line-height apparently doesn't extend to setting Haslayout: http://www.satzansatz.de/cssd/onhavinglayout.html

[tpeck]

The line-height fix doesn't seem to work on the spacing between the paragraphs. It just squashes everything (except the space we want to make equal in all browsers).

The solution that seems to work perfectly is:

p {margin: 0px 0 20px;}

..though someone else provided it, not me!