Support » Themes and Templates » Menu links hidden in IE


    For some reason, I have two problems with IE that I don’t in other browsers: The first is the links I have at the top in my menu bar section don’t show up in IE. They’re fine in Firefox or Safari, but you can’t see them in IE. I know they’re there in IE, because one time some of the graphics I had were showing up slowly. The links, for some reason, sit under my banner, which is right below the menu bar section.

    Any idea why this is occurring and how I might fix it?

    The second problem is a 1px shift. Either the background image I have is shifted 1px to the right in IE or all the other background images on top of it are shifted 1px to the left. It’s strange and I have no idea how to fix it.

    Any help is greatly appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Anyone have an idea?

    Oh, I forgot to put add this in, just in case it’s needed to solve the problem. It’s the part from my header.php:

    <head profile="">
        <title><?php bloginfo('name'); ?><?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> | <?php } ?><?php wp_title(''); ?>
        <meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />
        <!--[if lt IE 7]>
    	    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" media="screen, projection">
        <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/favicon2.ico" />
        <?php wp_head(); ?>
    <body>   <!--start body-->
        <div class="container">   <!--start container-->
            <div id="header" class="column span-14">
    <div id="topmenu">
    <div id="search_menu" class="column span-6 last push-0">
                    <div id="search" class="column first">
                        <div id="search-form">
                            <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
    						<div><label for="s" class="none">Search for:</label>
    						<input type="text" name="s" id="s" class="search_input" value="<?php the_search_query(); ?>" />
    						<label for="searchsubmit" class="none">Go</label>
    						<input type="submit" id="searchsubmit" class="submit_input" value="" /></div>
    			<div class="menu_links">
    <a href="">HOME</a><a href="">FORUMS</a><a href="">REVIEWS</a><a href="">COUMNS</a><a href="">RANKING SYSTEM</a><a href="">STAFF PROFILES</a><a href="">DONATE</a><a href="<?php bloginfo('url'); ?>/wp-admin">LOGIN</a><a href="">REGISTER</a>

    The problem is probably with your css (found in style.css). I’d also recommend validating and fixing your html code:

    The one pixel shift you see might be due to centering a div with an odd-numbered width (some browsers hate this). Look for any odd-numbered width: values in your style.css.

    Well, this is what I have for the menu bar. I included the banner CSS because I thought it may be relevant since the menu links are sitting under it in IE.

    I can’t seem to find the issue that is causing the problem, though.

    -------------------------------------------------------------- */
    #header #search_menu {
    float: right;
    width: 274px;
    #header #search_menu #search {
    padding: 0;
    #topmenu {
    background-image: url(images/bg/topmenu.gif);
    background-repeat: no-repeat;
    background-position: center;
    height: 34px;
    width: 1000px;
    margin-left: -20px;
    .menu_links {
    width: 710px;
    text-align: center;
    padding: 14px 0 0 0;
    margin: 0 0 0 32px;
    .menu_links a {
    font-size: 94%;
    color: #313131;
    padding: 0 10px 0 0;
    .menu_links a:hover {
    text-decoration: underline;
    -------------------------------------------------------------- */
    #topbanner {
    background-image: url(images/bg/banner.gif);
    background-repeat: no-repeat;
    background-position: center;
    height: 58px;
    width: 1000px;
    margin-left: -20px;

    As for the 1px shift problem, I looked through the CSS to find all odd widths that also were centered, and there were none. It’s also a problem that occurs on every page. Whether it’s the home page, a single post page, a page page, an archive page. So it must be something that’s common on all of them.

    Could it be something to do with the fact that my body doesn’t have a set width?

    body {
    background-color: #668599;
    background-image: url(images/bg/body_main.gif);
    background-repeat: repeat-y;
    background-position: center;

    Or could it be something to do with the header or headline?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu links hidden in IE’ is closed to new replies.