padding not working in IE7 and IE8

Question

I searched all over the web to find a solution for this issue, but I was not lucky. I know when it comes to styling web pages for IE is worse than watching grass grow.

So, I have a problem with the padding. It works just fine in IE9 and all other browsers, but it fails in IE7 and IE8. Probably lower versions too (I will check on that later)

Th e UL suppose to be in-line with a back-ground thanks

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
 /TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Document sans nom</title>

  <style type="text/css">
   a{font-weight:bold;color:#369;}
   a:link{text-decoration:none;}
   a:visited{color:#936;text-decoration:none;}
    a:hover{text-decoration:underline;}

   .manubar a:link{color: #FFFFFF;}
   .manubar a:visited{color: #DFFFDF;}
   .manubar{
    padding:10px 0 0 0;
    height:26px;
    text-transform:uppercase;
     background-color:#FF8C00;}
    .manubar ul{list-style-type:none;padding:0;margin:0;}
    .manubar ul li{text-align:center;border-left:1px solid 
     #999;display:block;float:left;}
     .manubar ul li:first-child{border:0;}
     .manubar ul li.insert{width:191px;}



     .home{width:94px;}
     .insert{width:94px;}
     .offer{width:94px;}
     .search{width:114px;}
      </style>
      </head>
     <body>

      <div style="height:30px; width:100%;">

      <nav class="manubar">
      <ul >
      <li class="home"  >
        <a href="index.php">Home</a>
    </li>
    <li class="insert">
        <a href="insert.php">Post</a>
    </li>
    <li class="offer">

    <a  href="offer.php">Offer</a>
    </li>
    <li class="search">

        <a  href="searching.php">Search</a>
    </li>


    </ul>
     </nav>
      </div>

      </body>
       </html>

Your HTML is invalid (look where the `body` tags are), don't blame IE. — Wesley Murch, Jan 27 '13 at 18:21
https://www.google.com/search?q=html5+shiv&oq=html5+shiv&aqs=chrome.0.57j65j59l2j61l2.4380&sourceid=chrome&ie=UTF-8 — subhaze, Jan 27 '13 at 18:27
It was just a typo mistake. That didn't solve the problem. Thanks for pointing that. — Che Jug, Jan 27 '13 at 18:37

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

The nav tag is introduced in HTML5. So obviously it will not support in older browsers. Replace nav tag with div tag to make it work. (Check browser compatibility section in the provided link)

Fiddle (Replaced nav with div)

or else

Stick the below code in the Head tag

<!--[if lt IE 9]>
  <script>
      document.createElement('nav');
  </script>
<![endif]-->

<style type="text/css">
  nav{ 
       display: block;
  }
</style>

Source

Working Fiddle

edited May 23 '17 at 11:49

Community

1
1

answered Jan 27 '13 at 18:23

Mr_Green

40,727
45
159
271

Or add an html5 shiv to create the elements needed via JS to allow older IEs to style them. https://www.google.com/search?q=html5+shiv&oq=html5+shiv&aqs=chrome.0.57j65j59l2j61l2.4380&sourceid=chrome&ie=UTF-8 – subhaze Jan 27 '13 at 18:28
in my opinion, dont use nav element, until 2015. if you do, dont style it, put a div inside it too and style it instead. why would you need it anyway. – user1721135 Jan 27 '13 at 19:05
@user1721135 - I've used those elements in every website I've ever created… – Rich Bradshaw Jan 27 '13 at 19:23
@Rich Bradshaw that just means youre pretty new :P – user1721135 Jan 27 '13 at 21:26
I did back port things, but yeah, in the scale of things I'm new, only been doing it about 7 years. – Rich Bradshaw Jan 27 '13 at 21:47

padding not working in IE7 and IE8

1 Answers1