...

View Full Version : menu tabs not centering in ie6 or ie7



iamjordanne
08-23-2010, 05:40 PM
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:


<!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:


@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!

jdswebservice
08-23-2010, 08:28 PM
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-

iamjordanne
08-23-2010, 08:50 PM
I just posted the header.php file... here is the index.php:


<?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:

<?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>

met
08-23-2010, 10:05 PM
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



.tabs { width:550px; margin:auto; }


should do the trick

iamjordanne
08-24-2010, 05:17 PM
That worked, thanks so much!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum