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 15 replies - 1 through 15 (of 20 total)
  • Thread Starter jacktrades

    (@jacktrades)

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

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

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

    Thread Starter jacktrades

    (@jacktrades)

    I’ve been looking at it in IE7.

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

    Should I lose it?

    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.

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

    Thread Starter jacktrades

    (@jacktrades)

    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:
    5px;}
    ul#main-nav li a:hover { background: black; color: #FFFFFF; }
    form#searchform { margin: 0px 10px 20px 60px; display: inline; }

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

    Try clearing your cache.

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

    Thread Starter jacktrades

    (@jacktrades)

    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.

    Sorry, it does not work in IE7.

    @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.

    Thread Starter jacktrades

    (@jacktrades)

    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.

    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.

    https://www.elated.com/articles/internet-explorer-conditional-comments/

    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.

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

    kmessinger is right – my bad…

    Use:

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

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