Display slightly off in IE with TabContainer

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 

 

Answer 1

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

Answer 2

User-1466119671 posted

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