5 Replies Latest reply on Jul 25, 2007 10:46 PM by Newsgroup_User

    Trouble with IE 7 CSS

    Ben M Adobe Community Professional
      I don't know what is happening, but for some reason IE 7 seems to be the only browser with this issue. If you view this page:

      http://www.parkwaygaming.com/index2.php

      you will notice that the spry menu works, but the background feature is not loading and it's just white. At first I thought it might have been the z-index, so I messed with that to no avail. Then I checked my paths to be sure, but then I asked myself, why would Firefox, Safari and Camino all load the page fine and IE 7 not. The version I am using of IE 7 is 7.0.6000.16473 which is the latest build on Windows Vista (x64 edition, although both the 32-bit and 64-bit versions of the browser render with the same issue).

      Does anyone know a workaround for this? Or is there something new with the CSS that IE7 needs in order to show this menu background properly?
        • 1. Re: Trouble with IE 7 CSS
          Ben M Adobe Community Professional
          I just wanted to bump this up since no response had ben given and give a slight update on my progress with this issue.

          For some reason IE 7 does not seem to like the background-image attribute like EVERY other browser does. Currently I have the background-image attribute on the ul.MenuBarHorizontal li. However, it seems to be hiding this behind the attributes for a link (a). But if I change that attribute to make it a color or the background-image it works fine. However, then it changes all links and I only want the top-level of the drop-down to have this background. I also tried setting the background attribute for the links to transparent, thinking that maybe IE 7 was defaulting to white.

          Does anyone have any experience with IE 7 to understand why it is doing this and workarounds for it?
          • 2. Re: Trouble with IE 7 CSS
            Level 7

            "SnakEyez02" <webforumsuser@macromedia.com> wrote in message
            news:f85a3v$65q$1@forums.macromedia.com...
            > For some reason IE 7 does not seem to like the background-image attribute
            > like
            > EVERY other browser does. Currently I have the background-image attribute
            > on
            > the ul.MenuBarHorizontal li. However, it seems to be hiding this behind
            > the
            > attributes for a link (a). But if I change that attribute to make it a
            > color
            > or the background-image it works fine. However, then it changes all links
            > and
            > I only want the top-level of the drop-down to have this background. I
            > also
            > tried setting the background attribute for the links to transparent,
            > thinking
            > that maybe IE 7 was defaulting to white.
            >
            > Does anyone have any experience with IE 7 to understand why it is doing
            > this
            > and workarounds for it?

            Most of the folks who can answer this type of question use NNTP and not the
            webforum so it's best to supply a link to a live page that can be analyzed.

            • 3. Re: Trouble with IE 7 CSS
              818g Level 1
              I don't see any difference, the background image in the menu bar is fine in IE7 too.
              XP Prof + IE7 (version 7.0.5730.11)
              • 4. Re: Trouble with IE 7 CSS
                Ben M Adobe Community Professional
                In response to Al, there was a link in the first post in this topic. I am sorry you did not see that.

                To 818g, I have fixed the problem as of last night which is why you can see it now. So that other users hopefully do not experience the problem I will post the code that needs to be fixed. In the CSS file there is a section at the very bottom that look like this:

                @media screen, projection
                {
                ul.MenuBarHorizontal li.MenuBarItemIE
                {
                display: inline;
                f\loat: left;
                background: #FFF;
                }
                }

                As it turns out, IE 7 is reading this code since it is the last instruction being sent to the browser, thus overriding the original setting. As you will notice this code was originally designed as an IE "hack" to make the menu appear the same in both browsers. However, IE 7 does not seem to need this extra help, but because it reads both sets of CSS it choses to apply the latter. So what happens is that the SpryMenu appears to be White instead of the color or background-image that could be first applied to the section in the CSS document. By changing that variable at the bottom to transparent, it makes this added layer clear so that you can see the original layer.

                I hope Adobe realizes this and changes their code for the SpryMenus accordingly so that other users don't have this same problem later down the road.
                • 5. Re: Trouble with IE 7 CSS
                  Level 7
                  "SnakEyez02" <webforumsuser@macromedia.com> wrote in message
                  news:f87kob$28t$1@forums.macromedia.com...
                  > In response to Al, there was a link in the first post in this topic. I am
                  > sorry you did not see that.

                  Sorry. I'd already marked your previous post read.

                  > To 818g, I have fixed the problem as of last night which is why you can
                  > see it
                  > now. So that other users hopefully do not experience the problem I will
                  > post
                  > the code that needs to be fixed. In the CSS file there is a section at
                  > the
                  > very bottom that look like this:
                  >
                  > @media screen, projection
                  > {
                  > ul.MenuBarHorizontal li.MenuBarItemIE
                  > {
                  > display: inline;
                  > f\loat: left;
                  > background: #FFF;
                  > }
                  > }

                  That's not a good approach. There are better alternatives out there. Don't
                  even look at mine (I'd like to avoid the editorials), but you can find some
                  good CSS menu approaches that are more feature rich.


                  --
                  Al Sparber - PVII
                  http://www.projectseven.com
                  Extending Dreamweaver - Nav Systems | Galleries | Widgets
                  Authors: "42nd Street: Mastering the Art of CSS Design"