How to Fix Absolute and Relative Positioning in IE

Internet Explorer (IE) uses HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) to determine the location of elements on a page. CSS utilizes the "position" attribute, which is used to determine how an element appears relative to other elements in a page. When an element uses the "absolute" positioning, it remains in its defined position regardless of other elements around it. When an element uses "relative" positioning, on the other hand, its position is offset by other elements. If elements overlap each other or are in the wrong location, you can edit the CSS to fix absolute and relative positioning in IE.

Instructions

    • 1

      Add "<style>" and "</style>" to the "<head>" and "</head>" tags in the HTML code to enable CSS on the page. E.g.,

      <head>
      <style>
      </style>
      </head>

    • 2

      Insert element "{ position: }" in between the CSS tags. Replace "element" with a desired page component. Img, body and table are some examples of elements. E.g.,

      <style>
      div { position: }
      </style>

    • 3

      Add "fixed;" or "absolute;" after the colon, so that the page code resembles the following:

      <style>
      div { position: absolute; }
      </style>

    • 4

      Insert the top, left, right and bottom tags into the CSS code to fix absolute and relative positioning in IE. Add the desired pixel positions to the code. E.g.,

      <style>
      div { position: relative; top: 20px; bottom: 0px; left: 30px; right: 0px }
      </style>

    • 5

      Repeat the above steps for any other elements in the page. Check the page as you change the position of each component to make sure absolute elements do not overlap relative elements.

Related Searches:

References

Comments

Related Ads

Featured