3 Replies Latest reply on Sep 11, 2008 4:08 AM by Newsgroup_User

    Relative positioning question

    Level 7
      I am trying to move my menu div up about 15px, intruding into my header
      div. In Firefox, the part of the menu that overlaps the header shows
      correctly. However, in Internet Explorer it appears as if the header is
      hiding part of the first element of the menu (the background color to be
      exact). The text label is fine, and you can even see that the rollover
      is working as the text (HOME)gets lighter. You just don't see the brown.

      Here is the page:
      http://www.cityoffellsmere.org/cra/

      Here is the css:
      http://www.cityoffellsmere.org/cra/all.css

      I am relatively positioning the menu using a -15px top margin (top:
      -15px;). Take the positioning out and it displays perfectly, just 15px
      lower than I want.

      I have tried using a background image in the header with a right
      aligned, 1 px foreground image to keep the height of the header div.
      Same result. I have tried setting the z position for the 2 divs. I have
      also tried bottom: 15px;

      Is this a bug in IE? I have googled but can not find anything relevant.
      I am a bit batty at this point and really appreciate any suggestions.

      Thank you,
      Harvey Wasserman
        • 1. Re: Relative positioning question
          Level 7
          eclipsme wrote:
          > I am trying to move my menu div up about 15px, intruding into my header
          > div. In Firefox, the part of the menu that overlaps the header shows
          > correctly. However, in Internet Explorer it appears as if the header is
          > hiding part of the first element of the menu (the background color to be
          > exact). The text label is fine, and you can even see that the rollover
          > is working as the text (HOME)gets lighter. You just don't see the brown.
          >
          > Here is the page:
          > http://www.cityoffellsmere.org/cra/
          >
          > Here is the css:
          > http://www.cityoffellsmere.org/cra/all.css
          >
          > I am relatively positioning the menu using a -15px top margin (top:
          > -15px;). Take the positioning out and it displays perfectly, just 15px
          > lower than I want.
          >
          > I have tried using a background image in the header with a right
          > aligned, 1 px foreground image to keep the height of the header div.
          > Same result. I have tried setting the z position for the 2 divs. I have
          > also tried bottom: 15px;
          >
          > Is this a bug in IE? I have googled but can not find anything relevant.
          > I am a bit batty at this point and really appreciate any suggestions.
          >
          > Thank you,
          > Harvey Wasserman
          Update:
          I have at least temporarily solved this by adding <p></p> at the
          beginning of the menu. The problem seems to only affect the first
          paragraph. ???
          • 2. Re: Relative positioning question
            Level 7
            eclipsme wrote:

            > Update:
            > I have at least temporarily solved this by adding <p></p> at the
            > beginning of the menu. The problem seems to only affect the first
            > paragraph. ???

            Not sure exactly what you whatt to achieve - but I played a little with
            FF's web dev toolbar - you could try removing the <p></p> and in your
            menu rule try replacing.....

            position: relative;
            top: -25px;

            with.....

            position: absolute;
            top: 85px;

            --
            chin chin
            Sinclair
            • 3. Re: Relative positioning question
              Level 7
              djinn wrote:
              > eclipsme wrote:
              >
              >> Update:
              >> I have at least temporarily solved this by adding <p></p> at the
              >> beginning of the menu. The problem seems to only affect the first
              >> paragraph. ???
              >
              > Not sure exactly what you whatt to achieve - but I played a little with
              > FF's web dev toolbar - you could try removing the <p></p> and in your
              > menu rule try replacing.....
              >
              > position: relative;
              > top: -25px;
              >
              > with.....
              >
              > position: absolute;
              > top: 85px;
              >
              I tried that, djinn, but this removes the menu from the flow and thus
              the footer moves up and the page becomes a mess.

              The city's logo on the right gives the appearance of 'overflowing' into
              the main content area because the bottom color of the header gif is the
              same as the background of the page. I want the menu to move up so it
              starts just below the green part of the header, which it is doing now.

              But why is an extra paragraph needed? and might this be a problem in the
              future?

              Thanks,
              Harvey