Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    54
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Tabs overlap in FF, underlap in IE

    I am creating a custom tab menu that replicates this tabber here.

    My problem is getting the five tabs to align on the gray line. In Firefox, the tabs overlap the line:



    And in IE, they underlap (don't reach the gray line):



    Here is my HTML:

    Code:
    <div class="tabber">
    
      <div class="tabbertab">
        <h3>How it works</h3>
        <div style="padding:15px 45px 0 20px;">
        <strong>We handle the tedious payroll details - to alleviate your hassles</strong><br />
        With SurePayroll, you simply go online and enter payroll hours.  We handle allt he time-consuming, tedious details.
        <div style="margin: 10px 0 0 35px;">
        <ul>
        <li>Instantly calculate your wages and deductions</li>
        <li>Make regular tax deposits according to your deposit frequency</li>
        <li>File Form 941, your Employer's Quarterly Federal Tax Return, on your behalf</li>
        <li>File Form 940, the form used to report your annual federal unemployment tax liability, on your behalf</li>
        </ul>
        </div>
        </div>
      </div>
    
      <div class="tabbertab">
        <h3>Products and Services</h3>
        <div style="padding:15px 0 0 5px;">
        <strong>We stay on top of regulations - to keep you penalty-free</strong><br />
        Most people would agree that payroll would be a cinch, if it weren't for staying knowledgeable about rules and regulations.
        When you use SurePayroll, we make sure you stay in compliance.
        <div style="margin: 10px 0 0 35px;">
        <ul>
        <li>Make timely and accurate local, the state and federal tax deposits and filings</li>
        <li>Automatically report new hires to the state agency as federal and state laws mandates</li>
        <li>Provide you with updated, customized labor posters</li>
        </ul>
        </div>
        </div>
      </div>
    
      <div class="tabbertab">
        <h3>Features</h3>
        <div style="padding:15px 0 0 5px;">
        <strong>We remove administrative burdens - so you can get back to business</strong><br />
        With SurePayroll, you don't have to be in the office on payday or spend time administering data.  With our convenient online
        system, you really can have a paperless office.
        <div style="margin: 10px 0 0 35px;">
        <ul>
        <li>Provide direct deposit and email notifications letting employees know they've been paid</li>
        <li>Give employees online access to their pay stub, pay history and other payroll information</li>
        <li>Provide online W@s for employees and online 1099s for your contract workers</li>
        </ul>
        </div>
        </div>
      </div>
      
      <div class="tabbertab">
        <h3>FAQs</h3>
        <div style="padding:15px 0 0 5px;">
        <strong>We provide customer support - so you will never have to go at it alone</strong><br />
        At SurePayroll, we like to say, "We've got your back!"
        <div style="margin: 10px 0 0 35px;">
        <ul>
        <li>Work with State agency or IRS on any issues that arise</li>
        <li>Provide unlimited access to live customer support for processing questions</li>
        <li>Walk you through our online enrollment process, or complete it for you</li>
        <li>Walk you through your first payroll</li>
        </ul>
        </div>
        </div>
        <br /><div align="center"><a href="/Include/video/pop_compare.asp?keepThis=true&TB_iframe=true&height=345&width=313" title="Payroll Service Video" caption="Find out what makes SurePayroll the easiest, most comprehensive online experience" class="thickbox"><IMG SRC="/images/v1_1/video/sp_comparePages.gif" border="0"/></a></div>
      </div>
      
        <div class="tabbertab">
        <h3>Compare Us</h3>
        <div style="padding:15px 0 0 5px;">
        <strong>We give you HR tools and resources - so you can run your office more efficiently</strong><br />
        Included with your SurePayroll payroll service, you receive easy access to a variety of tools right from your payroll account.
        <div style="margin: 10px 0 0 35px;">
        <ul>
        <li>Business forms like I9s and W4s that can be automatically pre-populated with information from your payroll account</li>
        <li>Alerts and reminders service that will keep you on top of important dates</li>
        <li>Dozens of how-to guides on HR topics relevant to small businesses</li>
        </ul>
        </div>
        </div>
        </div>
      <img src="/images/v1_1/surechoice/tabber-bottom.gif" />
    And my CSS:

    Code:
    /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
    
    /*--------------------------------------------------
      REQUIRED to hide the non-active tab content.
      But do not hide them in the print stylesheet!
      --------------------------------------------------*/
    .tabberlive .tabbertabhide {
    display:none;
    }
    
    /*--------------------------------------------------
      .tabber = before the tabber interface is set up
      .tabberlive = after the tabber interface is set up
      --------------------------------------------------*/
    .tabber
    {
    }
    .tabberlive {
    margin-top:1em;
    }
    
    /*--------------------------------------------------
      ul.tabbernav = the tab navigation list
      li.tabberactive = the active tab
      --------------------------------------------------*/
    ul.tabbernav
    {
    margin:0;
    padding: 18px 0 0 0;
    height: 20px;
    background-image: url('/images/v1_1/surechoice/tabber-top1.gif');
    background-repeat: no-repeat;
    background-position: 0 17px;
    width:625px;
    font: 12px Arial, sans-serif;
    }
    
    ul.tabbernav li
    {
    list-style: none;
    margin: 0;
    display: inline;
    }
    
    ul.tabbernav li a
    {
    padding: 10px 15px;
    margin-left: 20px;
    margin-right: -20px;
    color:#747474;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #ededed;
    text-decoration: none;
    }
    
    ul.tabbernav li a:link { color: #65523f; }
    ul.tabbernav li a:visited { color: #667; }
    
    ul.tabbernav li a:hover
    {
    border-color: #227;
    text-decoration: none;
    }
    
    ul.tabbernav li.tabberactive a
    {
        text-decoration: none;
    }
    
    ul.tabbernav li.tabberactive a:hover
    {
        text-decoration: none;
    }
    
    /*--------------------------------------------------
      .tabbertab = the tab content
      Add style only after the tabber interface is set up (.tabberlive)
      --------------------------------------------------*/
    .tabberlive .tabbertab
    {width:625px;
    padding:5px;
    background-image: url(/images/v1_1/surechoice/tabber-bckground.gif);
    background-repeat: repeat-y;
    border-top:0;
    
    /* If you don't want the tab size changing whenever a tab is changed
        you can set a fixed height */
    
    /* height:200px; */
    
    /* If you set a fix height set overflow to auto and you will get a
        scrollbar when necessary */
    
    /* overflow:auto; */
    }
    
    /* If desired, hide the heading since a heading is provided by the tab */
    .tabberlive .tabbertab h2 {
    display:none;
    }
    .tabberlive .tabbertab h3 {
    display:none;
    }
    
    /* Example of using an ID to set different styles for the tabs on the page */
    .tabberlive#tab1 {
    }
    .tabberlive#tab2 {
    }
    .tabberlive#tab2 .tabbertab {
    height:200px;
    overflow:auto;
    }
    I've presented this problem on another popular forum and wasn't able to find any help. Any ideas?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Hi wuzhannanan

    It looks like the problem is with the css around the ul/li elements - the height of the ul is insufficient for its contents. Sorting this resolves the problem for everything except IE. The IE issue looks like a hasLayout problem - resolved here by floating the <a> element. This requires a further increase in the height of the <ul>. Hence:

    Code:
    ul.tabbernav
    {
    margin:0;
    padding: 18px 0 0 0;
    height: 36px;
    background-image: url('/images/v1_1/surechoice/tabber-top1.gif');
    background-repeat: no-repeat;
    background-position: 0 17px;
    width:625px;
    font: 12px Arial, sans-serif;
    }
    
    ul.tabbernav li
    {
    list-style: none;
    margin: 0;
    display: inline;
    }
    
    ul.tabbernav li a
    {
    padding: 10px 15px;
    margin-left: 20px;
    margin-right: -20px;
    color:#747474;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #ededed;
    text-decoration: none;
    float:left
    }
    I dare say there might be a few different solutions...

  • #3
    New Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    54
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you for your help, but I'm afraid its not that easy. After adding the height and float declarations, this is what I see in both browsers:

    In FF:


    In IE:


    Again, any suggestions are very much appreciated.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Change the line in red to padding:18px 0;
    Code:
    ul.tabbernav
    {
    margin:0;
    padding: 18px 0 0 0;
    height: 20px;
    background-image: url('/images/v1_1/surechoice/tabber-top1.gif');
    background-repeat: no-repeat;
    background-position: 0 17px;
    width:625px;
    font: 12px Arial, sans-serif;
    }
    I can't see the line so don't know if it's above or on it, but the row is in the same position in IE6 and FF3.5

    Also, in the code you posted, you're missing a closing div tag.
    Last edited by Fisher; 09-08-2009 at 03:54 PM.

  • #5
    New Coder
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    54
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you for your help, now the IE and FF look similar... I just now want to push the top image down about 15-20 pixels so that the line reaches the very bottom of the tabs. With the change in padding to "18px 0;", here's what I see:

    In FF:



    In IE:



  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •