Tab Challenge!
Posted: 04 November 2009 11:07 PM   [ Ignore ]
Newbie
Rank
Total Posts:  5
Joined  2009-11-04

I’m having a problem with CSS in IE8. I’m designing a page in C# that I want to have tabs, and found a template that I made compatible with ASP.NET (albeit a bit messily). I need this to look good in Firefox 3, IE8, and Safari, and while it looks great in FF3 and Safari, IE8 is having some problems. Is there a quick hack to make it IE quality that anyone can figure out? I’ve been trying for awhile but I’m stumped…

The HTML/ASP.NET is:

<div id=“tabbar”>
      <ul>
        <asp:Panel ID=“Panel1” runat=“server” CssClass=“tabitemLSel”><a><asp:LinkButton ID=“LinkButton1” OnClick=“ChangeView” CssClass=“tabitemRSel” runat=“server” Text=“Live Questions” /></a></asp:Panel>
        <asp:Panel ID=“Panel2” runat=“server” CssClass=“tabitemL”><a><asp:LinkButton ID=“LinkButton2” OnClick=“ChangeView” CssClass=“tabitemR” runat=“server” Text=“Ask a Question” /></a></asp:Panel>
        <asp:Panel ID=“Panel3” runat=“server” CssClass=“tabitemL”><a><asp:LinkButton ID=“LinkButton3” OnClick=“ChangeView” CssClass=“tabitemR” runat=“server” Text=“Answered Questions” /></a></asp:Panel>
      </ul>
  </div>

and the CSS is:

#tabbar {
  float:left;
  width:100%;
  /*background:#DAE0D2 url(“bg.gif”) repeat-x bottom;*/
  background: url(“bg2.gif”) repeat-x bottom;
  font-size:14px;
  line-height:normal;
}

#tabbar ul
{
  padding:10px 10px 0;
  list-style:none;
}

#tabbar a:hover {
  color:#333;
}

.tabitemL {
  float:left;
  background:url(“left.gif”) no-repeat left top;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 9px;
}

.tabitemR {
  float:left;
  display:block;
  background:url(“right.gif”) no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
}

.tabitemLSel {
  float:left;
  background:url(“left_on.gif”) no-repeat left top;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 9px;
  border-bottom: solid 1px white;
}

.tabitemRSel {
  float:left;
  display:block;
  background:url(“right_on.gif”) no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color: #333;
}

Profile
 
 
Posted: 14 November 2009 12:51 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  5
Joined  2009-11-04

There is now an example site to view - http://aspspider.ws/kokomokola/default.aspx
Thanks!

Profile
 
 
Posted: 17 November 2009 11:29 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  5
Joined  2009-11-04

problem is now solved

Profile