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 to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    menu tabs not centering in ie6 or ie7

    Okay, so I have a lot of divs inside of divs inside of divs... and I'm ultra confused. For some reason the menu text is not centering in ie6 or ie7, but works fine otherwise and works fine on all other browsers.

    Here is the wordpress header file:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <?php
    
    ?>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    
    	<head profile="http://gmpg.org/xfn/11">
        <meta name="description" content="Kilowatt Community Credit Union is a nonprofit financial cooperative, owned, controlled, and operated for the benefit of its members." />
    <meta name="keywords" content="Kilowatt Community Credit Union, Credit Union, Jefferson City, Bank" />
    
    
    		<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    		<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    		<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    		<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    		<?php wp_head(); ?>
            
          
        
    	</head>
    	
    	<body>
    		
    		<body>
    <div id="container">
       <div id="header"><img src="http://www.kilowattcu.com/wp-content/themes/Kilowatt/style/images/header2.jpg" width="794" height="209" alt="Kilowatt Community Credit Union" /></div>
       
      <div id="top_nav">
         <div id="menu">
    <ul class="tabs">
    <li><a href="http://www.kilowattcu.com"><span>Home</span></a></li>
    		<li class="hasmore"><a href="#"><span>About</span></a>
    		<ul class="dropdown">
    			<li><a href="http://kilowattcu.com/history">History</a></li>
    			<li><a href="http://kilowattcu.com/staff">Staff</a></li>
                <li><a href="http://kilowattcu.com/locationhours">Location/Hours</a></li>
    			<li class="last"><a href="http://kilowattcu.com/membership-eligibility">Member Eligibility</a></li>
    
    		</ul>
    	</li>
    	<li class="hasmore"><a href="#"><span>Services</span></a>
    		<ul class="dropdown">
    			<li><a href="http://kilowattcu.com/accounts">Accounts</a></li>
    
    			<li><a href="http://kilowattcu.com/loans">Loans</a></li>
    			<li><a href="http://kilowattcu.com/cds">CDs</a></li>
    			<li class="last"><a href="http://kilowattcu.com/member-benefits">Member Benefits</a></li>
    		</ul>
    	</li>
    	
    		<li class="hasmore"><a href="#"><span>Resources</span></a>
    		<ul class="dropdown">
    			<li><a href="http://kilowattcu.com/forms">Forms</a></li>
    			<li><a href="http://kilowattcu.com/disclosure">Disclosure</a></li>
    
    			<li><a href="http://kilowattcu.com/links">Links</a></li>
                <li><a href="http://kilowattcu.com/loan-calculator">Loan Calculator</a>
    			<li class="last"><a href="http://kilowattcu.com/for-kids">For Kids</a></li>
    		</ul>
    	</li>
    	<li><a href="https://accountaccess.kilowattcu.com/txapi.cgi?cual" target="_blank"><span>Online Banking</span></a></li>
    </ul>
    </div>
    <script type="text/javascript" src="http://www.kilowattcu.com/fancydropdown.js"></script>
    
    </div>
    <div id="mainContent">
    Here is the css file:
    Code:
    @charset "utf-8";
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background:url(style/images/graybg.jpg);
    	margin: 0; 
    	padding: 0;
    	text-align: center; 
    	color: #000000;
    }
    
    #container {
    	width: 794px;  
    	margin: 0 auto; 
    	text-align: left; 
    	padding: 0;
    }
    
    #header {
    	padding: 0; 
    	margin: 0 auto;
    	text-aign: center;
    	}
    
    #mainContent {
    	background:url(style/images/mainbg.jpg);
    	margin: 0 auto;
    	padding: 10px;
    }
    
    
    .clear {
       height: 0;
       font-size: 1px;
       margin: 0;
       padding: 0;
       line-height: 0;
       clear: both;
    }
    
    
    #left {
    	float: left;
    	width: 450px;
    	padding-top: 10px;
    	padding-left: 10px;
    	border: none;
    	background: none;
    	
    }
    #right {
    		float: right;
    		width: 275px;
    		padding:5px;
    				
    		
    }
    
    #footer { 
    	height: 10px;
    	margin: 0 auto;
    	padding: 0px;
    } 
    
    #top_nav {
    	background:url(style/images/navigation.jpg);
    	width: 794px;
    	height: 48px;
    	margin: 0 auto;
    	position: relative;
    	font-family: Arial, Helvetica, sans-serif;
    	text-transform: uppercase;
    	
    }
    
    .post {width: 450px;
    		padding: 0px;
    		margin: 0px 0px 20px 0px;
    		background: none;
    }
    /*NAV */
    
    ul.tabs
    {
    	display: table;
    	padding: 0;
    	list-style: none;
    	position: relative;
    	
    }
    
    ul.tabs li
    {
    	margin: 0 auto;
    	padding: 0;
    	list-style: none;
    	display: table-cell;
    	float: left;
    	position: relative;
    }
    
    ul.tabs a
    {
    	position: relative;
    	display: block;
    }
    
    /* dropdowns
    *************************/
    
    ul.dropdown
    {
    	margin: 0;
    	padding: 0;
    	display: block;
    	position: absolute;
    	z-index: 999;
    	top: 100%;
    	display: none;
    	left: 0;
    }
    
    ul.dropdown ul.dropdown
    {
    	top: 0;
    	left: 95%;
    }
    
    ul.dropdown li
    {
    	margin: 0;
    	padding: 0;
    	float: none;
    	position: relative;
    	list-style: none;
    	display: block;
    }
    
    ul.dropdown li a
    {
    	display: block;
    	color: #255f9c;
    }
    
    
    /* menu-specifc
    *************************/
    
    #menu
    {
    	width: 794px;
    	margin: 0 auto;
    	height: 40px;
    	line-height: 40px;
    	background-color:#F93;
    	background:url(style/images/navigation.jpg);
    	}
    
    #menu ul
    {
    	margin: 0 auto;
    	}
    
    #menu ul li.hasmore
    {
    	
    }
    
    #menu ul li h4
    {
    	margin: 0 auto;
    }
    
    #menu ul li h4 a
    {
    	font-size: 14px;
    	color: #ffffff;
    	padding: 0 10px;
    	font-weight:normal;
    	
    }
    
    #menu ul li a
    {
    	color: #ffffff;
    	font-size: 16px;
    	padding-left: 4px;
    	font-weight:normal;
    }
    
    #menu ul li a img
    {
    	vertical-align: middle;
    }
    
    #menu ul li a:hover
    {
    	background: url(style/images/topselectionleft.png) top left no-repeat;
    }
    
    #menu ul li a span
    {
    	display: block;
    	text-align: center;
    	padding: 0 10px 0 10px;
    }
    
    #menu ul li a:hover span
    {
    	background: url(style/images/topselectionright.png) top right;
    	height: 42px;
    }
    
    #menu ul.dropdown
    {
    	padding: 10px;
    	background-image: url(style/images/dropdown.png);
    	overflow:hidden;
    	border-bottom: 1px solid #dda43d;
    	border-top: 1px solid #dda43d;
    	width: 150px;
    }
    
    #menu ul.dropdown li a
    {
    	border-bottom: 1px solid #ffffff;
    	line-height: 30px;
    	overflow: hidden;
    	height: 30px;
    	font-size: 12px;
    	color: #255f9c;
    	font-weight: normal;
    }
    
    #menu ul.dropdown li.last a
    {
    	border-bottom-width: 0;
    }
    
    #menu ul.dropdown li a:hover
    {
    	background: url(style/images/menuarrow.png) no-repeat left center;
    }
    
    #menu ul li h4 a:hover
    {
    	background-image: none;
    }
    
    
    /* TYPOGRAPHY */
    
    p, ul, li {
    	font-family:Verdana, Geneva, sans-serif;
    	color: #666;
    	font-size: 12px;
    	margin: 2px;
    	
    	
    }
    
    p.special {
    	font-family:Verdana, Geneva, sans-serif;
    	color: #666;
    	font-size: 12px;
    	padding: 0px;
    	margin: 0px;
    	text-align: right;
    	
    	
    }
    
    p.footer {
    	font-family:Verdana, Geneva, sans-serif;
    	color: #666;
    	font-size: 10px;
    	text-transform: uppercase;
    	padding: 0px;
    	margin-top: 20px;
    	text-align: center;
    	
    	
    }
    
    h1 {
    	font-family: Verdana, Geneva, sans-serif;
    	color: #666;
    	font-size: 16px;
    	font-weight: bold;
    	text-transform: uppercase;
    		
    }
    
    h1.special {
    	font-family: Verdana, Geneva, sans-serif;
    	color: #666;
    	font-size: 16px;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin-bottom: 0px;	
    }
    
    h2 {
    	font-family: Verdana, Geneva, sans-serif;
    	color: #666;
    	font-size: 16px;
    	font-weight: normal;
    	text-transform: uppercase;
    	padding-bottom: 0px;
    	margin-bottom: 0px;
    }
    
    h3 {
    	font-family: Verdana, Geneva, sans-serif;
    	color: #666;
    	font-size: 12px;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin: 5px 0px 0px 0px;
    	text-align: left;
    	
    }
    
    h3.special {
    	font-family: Verdana, Geneva, sans-serif;
    	color: #666;
    	font-size: 12px;
    	font-weight: bold;
    	text-transform: uppercase;
    	margin: 10px 0px 0px 0px;
    	text-align: right;
    	
    }
    
    h4 {
    	font-family: Verdana, Geneva, sans-serif;
    	color: #888a8c;
    	font-size: 16px;
    	font-weight: normal;
    	font-style: italic;
    	margin-bottom: 0px;
    	padding-top: 10px;
    	
    	
    	}
    	
    	img.special {
    		float: right;
    		margin: 5px,5px,20px,5px;
    	}
    	
    	a:link { 
    	color: #255f9c;
    	text-decoration: none;
    	font-weight: bold;
    	}
    	
    a:visited { 
    	color: #255f9c;
    	text-decoration: none;
    	font-weight: bold;
    	
    		}
    		
    a:hover { 
    	color: #999;
    	text-decoration: none;
    	font-weight: bold;
    	
    		}
    		
    a:active { 
    	color: #255f9c;
    	text-decoration: none;
    	font-weight: bold;
    	
    		
    	}
    I appreciate any help... I don't do web-design super often but I don't usually have centering issues.. ah!

  • #2
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    you did not post all of your html code, if you DID post all of it, make sure you're closing tags that need to be closed, the ones i saw at a glance were ur div tag, body tag, and html tag.

    j-

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just posted the header.php file... here is the index.php:

    Code:
    <?php
    
    
    get_header(); ?>
     
     <div id="left">
    <!-- Start the Loop. -->
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    <?php static $count = 0;
    if ($count == "2") { break; }
    else { ?>
    
               <div class="post">
     <?php } ?>
    
     <!-- Display the Title as a link to the Post's permalink. -->
     <h1 class="special"><a class="blog" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
    
    
     <!-- Display the Post's Content in a div box. -->
     <div class="entry">
       <?php the_content('... (read more)'); ?>
       
     </div>
    
     </div> <!-- closes the first div box -->
     <!-- Stop The Loop (but note the "else:" - see next line). -->
     
    <?php $count++; ?>
    
     <?php endwhile; else: ?>
    
     <!-- The very first "if" tested to see if there were any Posts to -->
     <!-- display.  This "else" part tells what do if there weren't any. -->
     <p>Sorry, no posts matched your criteria.</p>
    
     <!-- REALLY stop The Loop. -->
     <?php endif; ?>
     
     
    <p>&nbsp; </p>
    <p style="text-align: right"><a href="http://www.kilowattcu.com/feed">Subscribe to RSS</a></p>
    
    </div>
       <div id="right">
          <p><img class="special" src="http://www.kilowattcu.com/wp-content/themes/Kilowatt/style/images/ad.jpg" alt="Conact us for your loan needs!" width="250" height="396" /></p>
          
          <h3 class="special">Kilowatt Community Credit Union</h3>
          <p class="special">2422 Hyde Park, Suite A.</p>
          <p class="special">Jefferson City, MO 65109</p>
          <p class="special">573.635.2685</p>
          <p class="special">&nbsp;</p>
          <h3 class="special">Hours</h3>
          <p class="special">Monday-Friday, 8:00 AM - 5:00 PM</p>
        </div>
        <div class="clear"></div>
      
    
      
    
    
    <?php get_footer(); ?>
    And here is the footer:
    Code:
    <?php
    
    ?>
    
    <p class="footer"><img src="http://www.kilowattcu.com/wp-content/themes/Kilowatt/style/images/official.jpg" width="212" height="40" alt="America's Credit Union, NCUA" /></p>
    		<p class="footer">&copy; 2010.  Kilowatt Community Credit Union. All rights reserved.
    </p>
      <!-- end #mainContent --></div>
    
    
      <div id="footer"><img src="http://www.kilowattcu.com/wp-content/themes/Kilowatt/style/images/footer.jpg" width="794" height="19" />
        
        
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    IE7 and anything earlier doesn't understand display:table

    hence your issue.

    personally i'd just give ul.tabs width (it's 548px wide atm) and it'll center automatically

    Code:
    .tabs { width:550px; margin:auto; }
    should do the trick
    Last edited by met; 08-23-2010 at 10:14 PM. Reason: .tabs, not menu rather

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked, thanks so much!


  •  

    Posting Permissions

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