Tab Challenge in IE!
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 (without front angle brackets so it shows here):
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;
}
webwiz posted this at 18:58 — 5th November 2009.
He has: 629 posts
Joined: May 2007
Do you have a link to a real Web page?
kokomokola posted this at 23:08 — 6th November 2009.
They have: 8 posts
Joined: Nov 2009
Its being developed on a test server that can't be accessed outside of campus. I'll try to get it on another site as soon as I can.
kokomokola posted this at 22:51 — 13th November 2009.
They have: 8 posts
Joined: Nov 2009
There is now an example site to view - http://aspspider.ws/kokomokola/default.aspx
Thanks!
webwiz posted this at 21:14 — 16th November 2009.
He has: 629 posts
Joined: May 2007
Sorry about the delay- I'm having software problems of my own.
I'll look at your example again soon. In the meantime, you may like to fix the markup errors:
W3C Validator results
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
webwiz posted this at 23:05 — 16th November 2009.
He has: 629 posts
Joined: May 2007
Okay. I had time to fire up Windows, download your files, and put the HTML through Tidy to correct the markup. Looking at the result in IE 8 and side-by-side with IE 6, and IE 8 in "standards" and "compatibility" modes, I can see that they all look identical.
The tidied code for #tabbar now looks like this:
<div id="tabbar">
<div style="margin-left: 2em">
<div id="pnlLive" class="tabitemLSel">
<a id="cmdLive" class="tabitemRSel" href="javascript:__doPostBack('cmdLive','')">Live Questions</a>
</div>
<div id="pnlSubmit" class="tabitemL">
<a id="cmdSubmit" class="tabitemR" href="javascript:__doPostBack('cmdSubmit','')">Ask a Question</a>
</div>
<div id="pnlAns" class="tabitemL">
<a id="cmdAns" class="tabitemR" href="javascript:__doPostBack('cmdAns','')">Answered Questions</a>
</div>
</div>
Hope this helps.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
kokomokola posted this at 21:30 — 17th November 2009.
They have: 8 posts
Joined: Nov 2009
Thanks for all the help! The problem is solved now
msolution posted this at 11:50 — 25th November 2009.
They have: 11 posts
Joined: Nov 2009
good you got it solved, do share with the community how u solved it!
kokomokola posted this at 20:49 — 26th January 2010.
They have: 8 posts
Joined: Nov 2009
The fix was:
Under #tabbar in the css added:
*background: url("") repeat-x bottom; /*IE only hack*/
margin-bottom:-1px;
*margin-bottom:-30px; /*IE only hack*/
In the head of my master page added (in angle brackets):
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.