locked
Display slightly off in IE with TabContainer RRS feed

  • Question

  • User-1466119671 posted

    I'm trying to make some changes in the tab container to increase the size of the text in the tab panels.  I have the following code.  the problem is shown in the image below.  You can see how the image is just a little off and the lines don't meet up.  I've circled the appropriate spots.  It is as if the headers have been moved a couple of pixels above where they are supposed to be.  I am guessing that this is because of the lowercase 'y' extending downward.  I'm looking for any thoughts on removing those few pixels and having things line up as they are supposed to.  TIA

    My current css:

    .MyTableStyle .ajax__tab_header:after {
        clear: both;
    }

    .MyTableStyle .ajax__tab_header:before, .MyTabStyle .ajax__tab_header:after {
        content: "";
        display: table;
    }

    .MyTabStyle .ajax__tab_header {
        font-family: "Helvetica Neue", Arial, Sans-Serif;
        font-size: 30px;
        font-weight: bold;
        display: inline-block;
    }

    .MyTableStyle .ajax__tab_tab {

    }

    .MyTabStyle .ajax__tab_header .ajax__tab_outer {
    }

    .MyTabStyle .ajax__tab_header .ajax__tab_inner {
        font-size: 15px;
    }

    .MyTabStyle .ajax__tab_hover .ajax__tab_outer {
    }

    .MyTabStyle .ajax__tab_hover .ajax__tab_inner {
    }

    .MyTabStyle .ajax__tab_active .ajax__tab_outer {
    }

    aspx layout:
               <actk:TabContainer ID="tabC" runat="server" CssClass="MyTabStyle">
                    <actk:TabPanel HeaderText="One" runat="server">
                        <ContentTemplate>One</ContentTemplate>
                    </actk:TabPanel>
                    <actk:TabPanel HeaderText="Two" runat="server">
                        <ContentTemplate>Two</ContentTemplate>
                        </actk:TabPanel>
                    <actk:TabPanel HeaderText="Testy" runat="server">
                        <ContentTemplate>Testy</ContentTemplate>
                    </actk:TabPanel>
                </actk:TabContainer>
    The result is 
     
    Tuesday, October 8, 2019 8:56 PM

Answers

  • User-719153870 posted

    Hi Wallym,

    You can see how the image is just a little off and the lines don't meet up.  I've circled the appropriate spots.  It is as if the headers have been moved a couple of pixels above where they are supposed to be.  I am guessing that this is because of the lowercase 'y' extending downward.

    I don't think it's the 'y''s problem, please remove or comment "display: inline-block;" in your ".MyTabStyle .ajax__tab_header{}", this should solve the problem.

    Please refer to below code:

    .MyTabStyle .ajax__tab_header {
                font-family: "Helvetica Neue", Arial, Sans-Serif;
                font-size: 30px;
                font-weight: bold;
                /*display: inline-block;*/
            }

    Here's the result:

    Hope this could help.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 9, 2019 7:11 AM

All replies

  • User-719153870 posted

    Hi Wallym,

    You can see how the image is just a little off and the lines don't meet up.  I've circled the appropriate spots.  It is as if the headers have been moved a couple of pixels above where they are supposed to be.  I am guessing that this is because of the lowercase 'y' extending downward.

    I don't think it's the 'y''s problem, please remove or comment "display: inline-block;" in your ".MyTabStyle .ajax__tab_header{}", this should solve the problem.

    Please refer to below code:

    .MyTabStyle .ajax__tab_header {
                font-family: "Helvetica Neue", Arial, Sans-Serif;
                font-size: 30px;
                font-weight: bold;
                /*display: inline-block;*/
            }

    Here's the result:

    Hope this could help.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 9, 2019 7:11 AM
  • User-1466119671 posted

    Perfect!  I'm not a css expert, so that was really helpful.  Thanks.

    Wednesday, October 9, 2019 1:12 PM