Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS ie7 drop down nav menu when followed by an image

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #34254
    pbrecursion
    Member

    First, a disclaimer: I’m not an expert, but I still have to get a new website launched, and my boss is too penny foolish to allow me to hire someone with more expertise and experience to help me.

    Since ie7 problems seem to be the topic of millions of websites, I’m guessing there is a reason for my problem, but I haven’t been able to find it yet. So, I am starting at the site that seems to provide me with some of the best ideas.

    I am getting close to the launch of our new site and was testing functionality of the nav menu when javascript is turned off. Here is the problem that I discovered when using ie7 (ie8+ doesn’t seem to be an issu, and i’m just ignoring the presence of ie<7. Moz and Webkit browse seem to not have any issue either.):

    Essentially, if in the div below the nav menu, there is text content, all seems to work well. However, on some pages, there is a big 960×320 graphic right below the nav menu. When the graphic is there, the nav menu breaks.

    What do I mean by break? When you hover over a drop down menu, it looks correct, but as you move the mouse down the row, once your mouse is also over the graphic, the drop down menu column goes away. It only seems to happen on ie7.

    I hate exposing my lack of experience, but here is the CSS that is driving the menu, followed by html code that duplicates the problem.


    body {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 100%;
    border: none;
    }
    #page {
    width: 960px;
    margin: 0 auto;
    padding-top: 25px;
    z-index:1;
    }
    #header {
    position: relative;
    width:100%;
    height: 90px;
    margin-bottom:10px;
    z-index:100;
    background-color:#0067AA;
    }
    #header #nav {
    position: absolute;
    right:0px;
    bottom: 0px;
    padding: 0px;
    }
    #main {
    position: relative;
    clear: both;
    width: 960px;
    }
    #content-wrapper {
    float:left;
    width: 100%;
    padding: 0;
    background-color:#fff;
    margin-bottom:10px;
    }
    .content {
    width:960px;
    float:left;
    position:relative;
    }
    .padding-20 { padding:20px; }
    h1 {
    font-size:1.5em;
    color:#000;
    font-weight:bold;
    margin-bottom:.5em;
    }
    p {
    font-size:1em;
    color:#000;
    margin-bottom:.5em;
    }
    ul#menubar {
    position:relative;
    list-style-type:none;
    float:left;
    width:100%;
    }
    ul#menubar li {
    float:left;
    position:relative;
    padding:0;
    }
    ul#menubar li a, ul#menubar li a:visited {
    display:block;
    text-decoration:none;
    font-weight:bold;
    text-align:left;
    color:#fff;
    padding:5px 20px;
    border-top:1px #0067AA solid;
    }
    ul#menubar li a:hover { border-top-color:#BECCE8; }
    /* sub menu */
    ul#menubar li ul {
    position:absolute;
    left:-9999px;
    display:none;
    list-style:none;
    }
    ul#menubar li:hover ul {
    display:block;
    position:absolute;
    left:0px;
    z-index:500;
    width:auto;
    }
    ul#menubar ul li {
    float:none;
    padding:0;
    display:block;
    }
    ul#menubar li:hover ul li a, ul#menubar li:hover ul li a:visited {
    display:block;
    background-color:#fff;
    color:#0067AA;
    font-weight:normal;
    font-size:.95em;
    white-space:nowrap;
    padding:6px 10px;
    width:auto;
    border:1px solid #0067AA;
    }
    ul#menubar li:hover ul li a:hover {
    background:#0067AA;
    color:#fff;
    border:1px solid #CCC;
    }

    Here is the HTML code that is the menu content:






    Nav Menu Problem





    With the level of expertise and experience that I see posting on here, I’m sure you’ll point out a silly mistake that I’ve made.

    Feel free to comment away.

    Thanks a lot in advance.

    #86642
    pbrecursion
    Member

    Thanks for taking a look at this. Let me answer your questions and see if this helps.
    I don’t have ie7 either, but i am using IE9 with firebug and putting it in IE7 browser mode.

    • I don’t have ie7 either, but i’m using ie9 with firebug and putting it in ie7 browser mode to find the problem.
    • The code i provided is just a subset, so I made the #header width 100% to just show a blue area… not really needed
    • The body has a 1390×90 blue “stripe” image that is 20px below the top of the body, with x-repeat turned on.
    • the #page is auto centered on the body and it contains #header, #main, #sitelinks, and #footer.
    • The logo, a set of “shortcut” links (about us, contact us, 800#), a search box, and the #nav are in the #header area. I just decided to make each of those absolutely positioned within the #header area to make it easier for me. I probably will need to address that later, right?
    • The logo png is a sort of a “badge” that overlaps the stripe 20px above and 20px below.
    • Why the width and clear on #main? For the life of me, I can’t remember, but they might be holdovers from 20 versions of my development ago. Probably left over when the various header elements were floated.
    • I’m using dreamweaver cs5 for development, using page templates. The editable region is #main. Then I have dependent templates for other pages, for example, a two column layout where the left column is a sidebar nav for content specific navigation – such as when on the product page, the various products are listed on the left
    • the class name of padding-20 was a basic shortcut to create a container within a container to provide a margin around content without screwing up the layout container widths. That way I don’t have to provide left and right padding to content elements. Hmm… I didn’t realize that content was full width. I’ll have to fix that.
    • why float #content-wrapper, content, and #menubar if they are all full width? Good question. I think that’s a holdover.

    Regardless, I’m still clueless as to why the submenu columns disappear when the mouse goes over the img which is under the submenu.

    #86646
    pbrecursion
    Member

    I removed position:relative from #main, and anything else within #main and still had the problem.

    I made some code changes to the CSS and the HTML based upon our exchange. Here is the updated CSS (#main and elements within #main were changed with regards to float, width, position, etc.)


    @charset "utf-8";
    /* CSS Document */

    html, body, div, h1, p, a, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    }
    a img {
    border-style: none;
    margin: 0px;
    padding: 0px;
    }
    body { line-height: 1; }
    ol, ul { list-style: none; }
    body {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 100%;
    border: none;
    }
    #page {
    width: 960px;
    margin: 0 auto;
    padding-top: 25px;
    z-index:1;
    }
    #header {
    position: relative;
    width:100%;
    height: 90px;
    margin-bottom:10px;
    z-index:100;
    background-color:#0067AA;
    }
    #header #nav {
    position: absolute;
    right:0px;
    bottom: 0px;
    padding: 0px;
    }
    #main {
    width: 960px;
    }
    #content-wrapper {
    width: 100%;
    padding: 0;
    background-color:#fff;
    margin-bottom:10px;
    -moz-box-shadow:2px 2px 5px #333;
    -webkit-box-shadow:2px 2px 5px #333;
    box-shadow:2px 2px 5px #333;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    }
    .content {
    padding:20px;
    }
    h1 {
    font-size:1.5em;
    color:#000;
    font-weight:bold;
    margin-bottom:.5em;
    }
    p {
    font-size:1em;
    color:#000;
    margin-bottom:.5em;
    }
    ul#menubar {
    position:relative;
    list-style-type:none;
    float:left;
    width:100%;
    }
    ul#menubar li {
    float:left;
    position:relative;
    padding:0;
    }
    ul#menubar li a, ul#menubar li a:visited {
    display:block;
    text-decoration:none;
    font-weight:bold;
    text-align:left;
    color:#fff;
    padding:5px 20px;
    border-top:1px #0067AA solid;
    }
    ul#menubar li a:hover { border-top-color:#BECCE8; }
    /* sub menu */
    ul#menubar li ul {
    position:absolute;
    left:-9999px;
    display:none;
    list-style:none;
    }
    ul#menubar li:hover ul {
    display:block;
    position:absolute;
    left:0px;
    z-index:500;
    width:auto;
    }
    ul#menubar ul li {
    float:none;
    padding:0;
    display:block;
    }
    ul#menubar li:hover ul li a, ul#menubar li:hover ul li a:visited {
    display:block;
    background-color:#fff;
    color:#0067AA;
    font-weight:normal;
    font-size:.95em;
    white-space:nowrap;
    padding:6px 10px;
    width:auto;
    border:1px solid #0067AA;
    }
    ul#menubar li:hover ul li a:hover {
    background:#0067AA;
    color:#fff;
    border:1px solid #CCC;
    }

    And here is the updated html code corresponding to the css changes.






    Nav Menu Problem







    #86647
    pbrecursion
    Member

    I’ve been at it since 6:30am, and it’s 10:30pm, time to leave the office. Hopefully some one will point out the errors of my ways.

    Thanks for the help so far.

    #86648
    pbrecursion
    Member

    Guess what? I found the problem!

    IE7 doesn’t support :hover for anything other than an “a” tag. I found a description of the problem and a solution here: fix-ie7-submenu-hover-problem.

    I changed the following css, and everything works!


    ul#menubar li ul {
    position:absolute;
    left:-9999px;
    display:none;
    list-style:none;
    background:url(_images/transparent-image.png);
    }

    transparent-image.png is a 1px x 1px transparent image.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.