Padding top not working well in IE9

HTML & CSS
1

my Padding top is not working as i would like to work in IE9.
In Chorme and firefiox it works ok but in IE9 my tio navigation menu links are not center from top
I try many different things but can’t able to solve this issue.

nav{width:100%; background:#2f348d; height:48px;}
#navigattion{margin:0; padding:0;}
#navigattion ul{list-style-type:none; margin:0; padding:0; padding-top:8px;}
#navigattion ul li{display:inline; float:left; padding:0 25px 0 0;}
#navigattion ul li a{font-family: 'futura_ltcn_btlight'; color:#FFF;
text-decoration:none; font-size:14px; padding:10px 19px 0 19px; text-transform:uppercase; font-size:24px; margin:10px;}
#navigattion ul li a:hover{background:#f2192b; padding:8px 19px 10px 19px;}

For Referenace here is the live link: http://lawfirst.com.au/
any one can tell me where is wrong.

2

A good start would be to validate your code. There are a number of HTML errors, including multiple divs with the id “innercontent”. You need to change those to classes, or chamnge the names. (A class can be used multiple times on a page, but an id can only be used once.)

3

I don’t see any difference in the nav in ie9 compared to others?

As you have a fixed height to work with (you set the blue bar to 48px height) then you will need to match that with your links. This is easily done by setting the anchors to display:block and giving them a height of 48px and a line-height of 48px which will automatically vertically center them. No need for three variatons of padding as you were using on the ul, li and anchor.

Here are the modifcations.

#navigattion ul{padding:0}
#navigattion ul li a{
padding-top:0;
padding-bottom:0;
height:48px;
line-height:48px;
margin:0 10px;
display:block;
}
#navigattion ul li a:hover{padding-top:0;padding-bottom:0}

The above is extra code that should go after your existing rules as it over-rides some of the values you set. (You could of course integrate that into your existing rules as long as you make sure everything is accounted for.)

4

Thanks PaulOBAdvisor for you help
Know i have implement your code with little correction on line website
URL:http://lawfirst.com.au/

#navigattion ul{padding:0; list-style-type:none;}
#navigattion ul li{display:inline; padding:0 25px 0 0;}
#navigattion ul li a{
padding-top:0;
padding-bottom:0;
/*height:48px;*/
line-height:48px;
margin:0 10px;
padding:0 10px;
display:inline;
font-family: 'futura_ltcn_btlight'; color:#FFF;
text-decoration:none; font-size:24px; text-transform:uppercase;}
#navigattion ul li a:hover{background:#f2192b; padding:9px 10px 9px 10px;}

If you check in IE 9. On Hover link background color change to red and from top to bottom there is a little gap but if you check in Firefox and Chrome red background on hover cover from top to bottom.
I also want to do same in IE9. no gap full red background from top to bottom.
I hope you understand what i am trying to say.
How can i fix that problem. Because IE always take padding figure less.
For example if padding is 8 then in IE padding is 6 or 7

5

Did anybody check my website in IE8. Menu background is not showing and also footer background ?
Is IE8 not support NAV tag ?

6

My code was a ful working example. You didn’t need to change anything
:smile:

The changes you have made have undone the code I gave you. You cannot set padding plus font-size to equal a set height because fonts vary in height and width.

You need to not use vertical padding at all as in my example and the list needs to be floated and not displayinlne because that will also cause a gap.

In its simplest form set the height to 48px , set the line-height to 48px and then it will be exact in all browsers and vertically centred,

Here it is in its simplest form.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.nav {
    height:48px;
    background:blue;
}
.nav  ul {
    width:960px;
    margin:auto;
    padding:0;
    list-style:none;
}
.nav li {
    float:left;
    margin:0 25px 0 0
}
.nav a {
    display:block;
    height:48px;
    line-height:48px;
    padding:0 12px;
    color:#fff;
    font-weight:bold;
    text-transform:uppercase;
    text-decoration:none;
}
.nav a:visited {color:#fff}
.nav  a:hover {background:red}
</style>
</head>

<body>
<nav class="nav">
        <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
        </ul>
</nav>
</body>
</html>
7

No IE8 doesn’t support any html5 5 tags (or media queries).

For html5 elements in ie8 and below you need the html5shiv added to your pages.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
8

So this means that if we use this one in a header this will enable HTML5 tag in IE8 and HTML5 tag will start working in IE8.

Please correct me if i am wrong.

9

Correct.

10

Awesome Guys Thanks for your help
It is an excellent experience to work with your great guys.
know website is working fine http://lawfirst.com.au/

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.