...

View Full Version : Tab Challenge in IE



kokomokola
11-04-2009, 09:13 PM
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;
}

abduraooft
11-05-2009, 07:41 AM
Could you post a link to your page?

kokomokola
11-06-2009, 11:09 PM
The site is being developed on a test server that isn't accessible off-campus. I'll try to get it up on another site as soon as I can!

kokomokola
11-13-2009, 10:52 PM
There is now an example site to view - http://aspspider.ws/kokomokola/default.aspx
Thanks!

Excavator
11-13-2009, 11:17 PM
Hello kokomokola,
Those divs inside your unordered list should probably be li's.
Like this -

<div>

<input name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAK9gOKLDwK/sqnuBgKMkP+WCALDisTQDPXbcy6viqdIvvO24uj58G338UxA" type="hidden">
</div>

<div id="tabbar">
<ul>
<li id="pnlLive" class="tabitemLSel">
<a></a><a id="cmdLive" class="tabitemRSel" href="javascript:__doPostBack('cmdLive','')">Live Questions</a>
</li>
<li id="pnlSubmit" class="tabitemL">
<a></a><a id="cmdSubmit" class="tabitemR" href="javascript:__doPostBack('cmdSubmit','')">Ask a Question</a>
</li>
<li id="pnlAns" class="tabitemL">
<a></a><a id="cmdAns" class="tabitemR" href="javascript:__doPostBack('cmdAns','')">Answered Questions</a>
</li>
</ul>
</div>

<div id="box4" style="clear: both;">

The validator finds a few more errors that you could fix too.

Scriptet
11-14-2009, 12:39 AM
It looks the same as FF in my IE8

kokomokola
11-17-2009, 09:30 PM
Thanks for the help! The problem is solved now



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum