Jump to content

Tabs Overlap In Ff, Underlap In Ie


Recommended Posts

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:tabs-ff.gifAnd in IE, they underlap (don't reach the gray line):tabs-ie.gifHere is my HTML:

<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 the CSS it uses:

/* $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 appreciate any help you can provide,

Link to post
Share on other sites

Try adding vertical-align: middle to the <a> elements in the list.Since they are within an inline element, they probably are not going below the text baseline:

ul.tabbernav li a {vertical-align: middle;......}

Link to post
Share on other sites
Try adding vertical-align: middle to the <a> elements in the list.Since they are within an inline element, they probably are not going below the text baseline:
ul.tabbernav li a {vertical-align: middle;......}

That didn't change the look at all... I'm stumped here. Any other suggestions?
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...