WordPress.org

1. skateface
   Member
   Posted 3 years ago #

   I'm customizing the "Slight" theme and am trying to add a tab navigation at the top of the template. I'm pretty new with CSS and am learning as I go, but, now I'm stuck. Stupid Internet Explorer! Everything seems to work the way I want it to in Firefox (PC and mac) and Safari, but in IE, it's messed up. Here's a screen capture -click here- that I put on photobucket. As you'll see, everything gets pushed down. On Firefox and Safari it works perfect. Below is the CSS code for the tabs and the header.
   

   #header{
   padding: 25px;
   margin: 0px;
   
   }

   #tabs {
         width:720px;
         position:relative;
         margin: -35px 10px -12px 5px;
         background:#7aad37;
         font-size:93%;
         line-height:normal;
         }
       #tabs ul {
   	  margin:0;
   	  padding:15px 10px 24px 5px;
   	  list-style:none;
         }
       #tabs li {
         display:inline;
         margin:0;
         padding:0;
         }
       #tabs a {
         float:left;
         background:url("images/tableft.gif") no-repeat left top;
         margin:0;
         padding:0 0 0 4px;
         text-decoration:none;
         }
       #tabs a span {
         float:left;
         display:block;
         background:url("images/tabright.gif") no-repeat right top;
         padding:5px 15px 4px 6px;
         color:#666;
         }
       /* Commented Backslash Hack hides rule from IE5-Mac \*/
       #tabs a span {float:none;}
       /* End IE5-Mac hack */
       #tabs a:hover span {
         color:#FF9834;
         }
       #tabs a:hover {
         background-position:0% -42px;
         }
       #tabs a:hover span {
         background-position:100% -42px;
         }

   Any help with this would be appreciated.

Topic Closed

This topic has been closed to new replies.