Menu links hidden in IE

  • https://www.think-theory.com

    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)
  • Thread Starter mithrustt

    (@mithrustt)

    Anyone have an idea?

    Thread Starter mithrustt

    (@mithrustt)

    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="https://gmpg.org/xfn/11">

    <title><?php bloginfo('name'); ?><?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> | <?php } ?><?php wp_title(''); ?>
    </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">
    <![endif]-->

    <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(); ?>

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

                        </form>
                    </div>
                </div>

            </div>

			<div class="menu_links">

<a href="https://think-theory.com">HOME</a><a href="https://www.savingprogress.com/forums/index.php">FORUMS</a><a href="https://www.savingprogress.com/reviews">REVIEWS</a><a href="https://www.savingprogress.com/columns">COUMNS</a><a href="https://www.savingprogress.com/ranking-system">RANKING SYSTEM</a><a href="https://www.savingprogress.com/staff-profiles">STAFF PROFILES</a><a href="https://www.savingprogress.com/donate">DONATE</a><a href="<?php bloginfo('url'); ?>/wp-admin">LOGIN</a><a href="https://savingprogress.com/wp-login.php?action=register">REGISTER</a>

			</div>
		</div>

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

    https://validator.w3.org/

    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.

    Thread Starter mithrustt

    (@mithrustt)

    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.

    /* TOP MENU WITH SEARCH BAR
-------------------------------------------------------------- */

#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;
}
    /* TOP BANNER
-------------------------------------------------------------- */

#topbanner {
background-image: url(images/bg/banner.gif);
background-repeat: no-repeat;
background-position: center;
height: 58px;
width: 1000px;
margin-left: -20px;
}
    Thread Starter mithrustt

    (@mithrustt)

    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.