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
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.
Member
42 Points
432 Posts
ASPInsiders
MVP
Display slightly off in IE with TabContainer
Oct 08, 2019 08:56 PM|Wallym|LINK
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 {
<div>aspx layout:</div> <div> <actk:TabContainer ID="tabC" runat="server" CssClass="MyTabStyle">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 {
}
<actk:TabPanel HeaderText="One" runat="server">
<ContentTemplate>One</
</actk:TabPanel>
<actk:TabPanel HeaderText="Two" runat="server">
<ContentTemplate>Two</
</actk:TabPanel>
<actk:TabPanel HeaderText="Testy" runat="server">
<ContentTemplate>Testy</
</actk:TabPanel>
</actk:TabContainer></div> <div></div> <div>The result is </div> <div>
Contributor
3140 Points
983 Posts
Re: Display slightly off in IE with TabContainer
Oct 09, 2019 07:11 AM|Yang Shen|LINK
Hi Wallym,
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
Member
42 Points
432 Posts
ASPInsiders
MVP
Re: Display slightly off in IE with TabContainer
Oct 09, 2019 01:12 PM|Wallym|LINK
Perfect! I'm not a css expert, so that was really helpful. Thanks.