IE pushes the menu bar down the page a bit.

  • Hi. New guy, here.

    When you view my website in IE, the horizontal navigation bar gets pushed down below my nav bar background graphic. Since the text is white, you can now only see the menu by hovering over it.

    I’m thinking this has to do with some IE conditional coding I need to include, but I don’t know where to begin.

    Any help would be appreciated. Thank you.

Viewing 5 replies - 16 through 20 (of 20 total)
  • Thread Starter jacktrades

    (@jacktrades)

    First off, thank you guys so much for helping me out with this. I really appreciate it, and have already learned a lot about these conditional statements.

    Unfortunately, I’m still at an impasse. I added:

    <!–[if lte IE7]><link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_directory’); ?>/ie.css” media=”screen” type=”text/css” /><![endif]–>

    to the head section, and it immediately pushed the logo in my header and the menu bar down the page about another 10px. I then put:

    ul#main-nav {margin-top:-20px;}

    in the ie.css file and played around with the margin, but no luck. It doesn’t budge, and stays about 10px below where it was.

    I even copied the Header and Menu styling into ie.css, and played around with the margins, padding, display, but no luck. Everything stays the same, nothing moves up or down no matter what numbers I plug in.

    I also cleared the cache in IE to make sure that wasn’t a problem.

    If you think this is now unsolvable in a forum format like this, I’ll understand. If you have any other suggestions, however, I will name future children after you.

    I don’t think that it’s unfixable. Just that it might take a fair bit of tweaking in the ie.css sheet to get the right combination of “fixes” in place. sometimes, a one-off change isn’t enough but, nevertheless, try:

    #menu-bar {position:relative;top:-20px;left:0;}

    Also check your header.php. I think the theme is designed to output your blog description inside <p></p> tags. Probably looks something like:

    <p><?php bloginfo('description'); ?></p>

    But as you’re not using the description field, the markup has empty <p> tags which could be adding some extra space in IE. I’d suggest amending that line to something like:

    <div class="tagline"><?php bloginfo('description'); ?></div>

    Unstyled empty divs have zero height, margin and padding – so less interference.

    I think maybe we are making things to complicated. Why not start at the beginning . . . this is just a simple example.

    <link rel="stylesheet" type="text/css" href="https://www.opexcellence.com/wp-content/themes/opex_theme_3.31.09/style.css" media="screen" />

<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:900px;
	height:23px;
	z-index:1;
	left: 0px;
	top: 132px;
	overflow: hidden;
}
.style5 {
	font-size: 14px;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

-->
    </style>
</head>

<body>
<div class="style5" id="Layer1">THIS IS THE MENU BAR </div>
</body>

</html>
    Thread Starter jacktrades

    (@jacktrades)

    Well, you fixed it. I took care of the ‘description’ field situation, and that moved everything up a good amount, but not quite. Before I tried kmessinger’s suggestion, I decided to fiddle with as many things I could, to see if it had any effect.

    I was back in the Header, rereading the IE condition statement. Earlier I went to the elated.com link you gave me, esmi, and saw that in their example statements they wrote, <!–[if lte IE 7]>, with a space between IE and 7. I thought, what the hell, and put a space in there. For God knows what reason, that did the trick! Everything was within the maroon stripe.

    There are still a few minor tweaks I need to make in IE, like the black hover state on the menu doesn’t go the height of the maroon stripe, and the search form is a little lower than the rest of the menu. I can fool around with that on my own, I think.

    Thanks again to both of you. I can’t tell you how much of a headache you saved me. My wife is having our 2nd kid in May, and I can’t wait to welcome little Esmi Kmessinger into the world.

    Cheers!

    Hi. am also a newbie in programming.

    just made my first site in WP and having issues with IE 8 (FireFox and Safari are fine). Everything is OK except it’s pushing down the nav bar into the page content.

    https://www.peninabareket.com/feedyourrroots/blog/

    I work on a mac but checking it on a PC. Have read some other people’s issues and tried playing around with it but can’t seem to fix it.

    please excuse my messy code. I edited a template and found suggested code online so it’s a frankenstein.

    thanks!

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘IE pushes the menu bar down the page a bit.’ is closed to new replies.