WordPress.org

Ready to get started?Download WordPress

Forums

Menu links hidden in IE (6 posts)

  1. Mithrustt
    Member
    Posted 6 years ago #

    http://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.

  2. Mithrustt
    Member
    Posted 6 years ago #

    Anyone have an idea?

  3. Mithrustt
    Member
    Posted 6 years ago #

    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="http://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="http://think-theory.com">HOME</a><a href="http://www.savingprogress.com/forums/index.php">FORUMS</a><a href="http://www.savingprogress.com/reviews">REVIEWS</a><a href="http://www.savingprogress.com/columns">COUMNS</a><a href="http://www.savingprogress.com/ranking-system">RANKING SYSTEM</a><a href="http://www.savingprogress.com/staff-profiles">STAFF PROFILES</a><a href="http://www.savingprogress.com/donate">DONATE</a><a href="<?php bloginfo('url'); ?>/wp-admin">LOGIN</a><a href="http://savingprogress.com/wp-login.php?action=register">REGISTER</a>
    
    			</div>
    		</div>
  4. iridiax
    Member
    Posted 6 years ago #

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

    http://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.

  5. Mithrustt
    Member
    Posted 6 years ago #

    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;
    }
  6. Mithrustt
    Member
    Posted 6 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic