Display slightly off in IE with TabContainer [Answered]RSS

• • Reply
  Wallym

  Member

  41 Points

  426 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 {
      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 {
  }

  <div>aspx layout:</div> <div>           <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></div> <div></div> <div>The result is </div> <div> </div>
  Blog
• • Reply
  Yang Shen

  Contributor

  2860 Points

  910 Posts

  Re: Display slightly off in IE with TabContainer

  Oct 09, 2019 07:11 AM|Yang Shen|LINK

  Hi Wallym,

  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

• • Reply
  Wallym

  Member

  41 Points

  426 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.

  Blog