IE pushes the menu bar down the page a bit. (21 posts)

  1. JackTrades
    Posted 7 years ago #

    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.

  2. JackTrades
    Posted 7 years ago #

    Hmm, there's a link when I edit the above post, but not when I publish it.

    The site address is http://www.opexcellence.com

  3. venustang
    Posted 7 years ago #

    is it ie6? did you use float in css for your navigation?

  4. JackTrades
    Posted 7 years ago #

    I've been looking at it in IE7.

    I do have float:left command in CSS for my main-nav.

    Should I lose it?

  5. venustang
    Posted 7 years ago #

    Sorry I am using mac so I couldnt really see your problem. But usually ie6 gives you double margin when you use float in css. You can try to use display: inline instead for your ul menu, or you try to use padding instead of margin. If you really need to use margin.... Here is the solution for margin... if your margin is 20px. so it is margin:20px and you need to place _margin:10px right after your margin:20px. This will make the ie6 looks as 20px like the other browser.

  6. venustang
    Posted 7 years ago #

    display:inline will be make the ul change to horizontal. sometimes float left makes a lot of problems

  7. JackTrades
    Posted 7 years ago #

    Venustang, thanks for your help with this.

    I followed your margin suggestion (I think I did what you suggested), as well as played around with other margins, paddding, floats, but nothing worked.

    Here's my CSS for the menu bar. I probably should have posted this in the beginning.

    #menu-bar { padding-top: 0px; margin-bottom: 10px; }
    ul#main-nav { width: 600px; float: left; margin: 1px 0 0 10px; }
    ul#main-nav li { display: inline; }
    ul#main-nav li a { text-transform: uppercase; color: white; font-size:
    1.4em; font-weight: bold; padding: 8px 15px;
    -moz-border-radius: 5px; -webkit-border-radius:
    ul#main-nav li a:hover { background: black; color: #FFFFFF; }
    form#searchform { margin: 0px 10px 20px 60px; display: inline; }

  8. kmessinger
    Forum Moderator
    Posted 7 years ago #

    Your site appears fine in IE7, IE8 and FF3.0.8.

    Try clearing your cache.

  9. esmi
    Forum Moderator
    Posted 7 years ago #

    You've got some CSS errors. Specifically the last 3 errors. Looks like three of your stylesheets aren't being correctly imported.

  10. JackTrades
    Posted 7 years ago #

    esmi - Thanks for noticing that. I took care of it, but still no luck.

    kmessinger - Your news is both encouraging, yet frustrating. I took your advice, but it still doesn't show up right for me in IE7. I even went to another computer, and it doesn't look right.

    I created this site by manipulating the 'Starker's Theme', if anyone is familiar with that. There are 2 .css files that came with it, 'ie' and 'ie6', but they have no code in them. Not sure if this info helps or not.

  11. kmessinger
    Forum Moderator
    Posted 7 years ago #

    Sorry, it does not work in IE7.

  12. esmi
    Forum Moderator
    Posted 7 years ago #

    @JackTrades: How good are you with serving additional CSS to IE using conditional comments?

    You can move the nav bar up in IE only but you'll need to edit header.php and create a very small IE-only CSS sheet. I can give you hand with this if you want but, as I'll be working blind (so to speak) it could take a couple of attempts/tweaks to get it just right.

  13. JackTrades
    Posted 7 years ago #

    esmi - I haven't done that before, but I'm a quick study and unafraid. The theme I'm using came with 'ie' and 'ie6' .css sheets, but they're currently empty.

    Any help you can provide would be greatly appreciated. Let me know if there's anything you need from me.

    Thank you.

  14. esmi
    Forum Moderator
    Posted 7 years ago #

    First of all, open up header.php and check that it includes the line:

    <!--[if IE]><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" media="screen" type="text/css" /><![endif]-->

    If it's not in there, add it. It needs to be inside the <head></head>. I normally place just after the call to style.css.

    Then open up ie.css and add:

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

    That negative margin size is a guess on my part. I think it should be around the 15-25px mark but you'll probably have to tweak it a little to get the positioning just right.


    is a good intro to using conditional comments to serve alternative CSS (and even markup) to different versions of IE. I find the former a real life (and hair) saver. Means I can design in Firefox and then correct any IE issues with targeted CSS that doesn't impact on the main design.

  15. kmessinger
    Forum Moderator
    Posted 7 years ago #

    It is ok in IE8 so you will need to limit it to IE6 and 7.

  16. esmi
    Forum Moderator
    Posted 7 years ago #

    kmessinger is right - my bad...


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

  17. JackTrades
    Posted 7 years ago #

    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.

  18. esmi
    Forum Moderator
    Posted 7 years ago #

    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.

  19. kmessinger
    Forum Moderator
    Posted 7 years ago #

    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="http://www.opexcellence.com/wp-content/themes/opex_theme_3.31.09/style.css" media="screen" />
    <style type="text/css">
    #Layer1 {
    	left: 0px;
    	top: 132px;
    	overflow: hidden;
    .style5 {
    	font-size: 14px;
    	color: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    <div class="style5" id="Layer1">THIS IS THE MENU BAR </div>
  20. JackTrades
    Posted 7 years ago #

    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.


  21. quietecoyote
    Posted 6 years ago #

    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.


    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.


Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.