Answered by:
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 isTuesday, 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