CODEWITHSUNDEEP
htmlcss
Che Jug
Che Jug

Reputation: 417

padding not working in IE7 and IE8

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>

Upvotes: 0

Views: 2597

Answers (1)

Mr_Green
Mr_Green

Reputation: 41832

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

Upvotes: 2

Related Questions