Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:

    <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;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is now an example site to view - http://aspspider.ws/kokomokola/default.aspx
    Thanks!

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello kokomokola,
    Those divs inside your unordered list should probably be li's.
    Like this -
    Code:
    <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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    It looks the same as FF in my IE8

  • #7
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help! The problem is solved now


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •