6 Replies Latest reply on Aug 16, 2006 12:50 PM by DLoe

    CSS Rollover Activating Outside of Text

    DLoe Level 1
      On a rollover on text links. They are in a DIV with id of "Menu". The issue is In IE.

      I want the hover to trigger not just on the text, but on the block created by the "a" tag. It's working on one site, but not another. I checked on both sites settings for "a" and "a:hover" like display: block, is width set, doc type, etc. I don't think I've checked every combination...if I had I suppose I would have come upon the answer.

      I'm hoping somebody has seen this before.

      The Question
      Does anybody know what makes IE trigger the HOVER on the block not just the link text?

      BTW
      The working site is http://www.BrandonBusiness.com The links on the left trigger within the block.
      The new site I'm having trouble with is: http://stickersthatpromote.com/2006/ The links on the left trigger only on the text.

      Those with whom I've discussed tables vs. css, please note that the second site is all CSS. No tables. Aaaaaah. Purity.
        • 1. Re: CSS Rollover Activating Outside of Text
          Level 7
          "DLoe" wrote:

          > Does anybody know what makes IE trigger the HOVER on the block not
          > just the
          > link text?

          You need a conditional comment to give your <a> elements layout in IE.
          See the bottom section of this tutorial:
          http://www.projectseven.com/tutorials/css/uberlinks/index.htm

          under the heading:
          Browser bugs and workarounds (IE Windows)


          --
          Al Sparber - PVII
          http://www.projectseven.com
          Popup Menus | Image Galleries | CSS Tutorials & Templates
          ------------------------------------------------------------------------------------
          Newsgroup: news://forums.projectseven.com/pviiwebdev/
          CSS Newsgroup: news://forums.projectseven.com/css/
          DW Newsgroup: news://forums.projectseven.com/dreamweaver/






          • 2. Re: CSS Rollover Activating Outside of Text
            DLoe Level 1
            Update: I continued playing, and reduced the working version to just a menu and simple CSS. It's working in IE6 without any hacks, conditionals, etc, and I can't figure out why. Similar links/hovers are not working on other pages.

            Can somebody with Windows IE6 test it? Go to this address:
            http://www.pacesettermedia.com/2006/menutest/menutest.htm

            Hover to the right of the links. You can hover way off to the right. Do the hovers work?

            They're working for me with IE6. You can see the HTML at the above URL. Here's the simple CSS for this page:

            #menu a {
            display: block;
            }
            #menu a:hover {
            background-color: #DCDCEB;
            }

            • 3. Re: CSS Rollover Activating Outside of Text
              Level 7
              "DLoe"wrote
              > Can somebody with Windows IE6 test it? Go to this address:
              > http://www.pacesettermedia.com/2006/menutest/menutest.htm
              >
              > Hover to the right of the links. You can hover way off to the right.
              > Do the
              > hovers work?

              They work fine because they are the first child of the body. They will
              cease to work when you put them in a real page. I gave you your answer
              last night.


              --
              Al Sparber - PVII
              http://www.projectseven.com
              Popup Menus | Image Galleries | CSS Tutorials & Templates
              ------------------------------------------------------------------------------------
              Newsgroup: news://forums.projectseven.com/pviiwebdev/
              CSS Newsgroup: news://forums.projectseven.com/css/
              DW Newsgroup: news://forums.projectseven.com/dreamweaver/






              • 4. Re: CSS Rollover Activating Outside of Text
                DLoe Level 1
                But it works on a site that I included in my original post:

                http://www.BrandonBusiness.com

                This site has not conditionals or workarounds.

                As I reduced the complete page to the final test menutest.htm, it worked the whole time. I used the original full page and chopped out pieces and then tried it. And I chopped out pieces of CSS and tested. It worked at every stage.
                • 5. Re: CSS Rollover Activating Outside of Text
                  Level 7
                  "DLoe" <webforumsuser@macromedia.com> wrote in message
                  news:ebv7db$rd5$1@forums.macromedia.com...
                  > But it works on a site that I included in my original post:
                  >
                  > http://www.BrandonBusiness.com
                  >
                  > This site has not conditionals or workarounds.
                  >
                  > As I reduced the complete page to the final test menutest.htm, it
                  > worked the
                  > whole time. I used the original full page and chopped out pieces and
                  > then tried
                  > it. And I chopped out pieces of CSS and tested. It worked at every
                  > stage.

                  It's an accidental fix. It works on your page because:

                  1. You are using paragraphs instead of lists
                  2. The menu is in the first table cell of a table that is inside a DIV
                  that is the first child of the body

                  Move your menu into the second column of your table and it will cease to
                  work (only the text will trigger the hover).

                  You can leave it like it is, but just remember that in most other cases
                  you will need the conditional comment.


                  --
                  Al Sparber - PVII
                  http://www.projectseven.com
                  Popup Menus | Image Galleries | CSS Tutorials & Templates
                  ------------------------------------------------------------------------------------
                  Newsgroup: news://forums.projectseven.com/pviiwebdev/
                  CSS Newsgroup: news://forums.projectseven.com/css/
                  DW Newsgroup: news://forums.projectseven.com/dreamweaver/






                  • 6. CSS Rollover Activating Outside of Text
                    DLoe Level 1
                    Al,

                    You nailed it. I added several test menus, and sure enough, the one in the first TD of the table works as I want it.

                    The test with three menus is here if anybody cares to see:

                    http://www.pacesettermedia.com/2006/menutest/menutest.htm