Home/ Questions/Q 9205417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T23:56:44+00:00

I searched all over the web to find a solution for this issue, but

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0