SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Long Beach CA
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Position Absolute - Damn You! - Have you been here before?

    Hey everyone,

    Kind of new to CSS. Just made the switch from <table> to <div>. It was better then PC to Mac until Position Absolute came around and screwed me all up.

    Problem:

    Problematic Website

    On a mac and in mozilla firefox it works wonders! On a PC in exploder 6 & 7 the menu shows up completely wrong. I think it's because of the position absolute.

    The style sheet is here

    Can anyone tell me what's up? Why is it doing this? Should I make my sites without using position:absolute? or is there a hack!

    Thanks way in advance! :-)

    WeBrad

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    position:absolute is for overlapping elements (by includeing them inside a position:relative) or to allow them to be moved around using JavaScript.

    For content other than that it can all be positioned using

    float
    clear
    width
    overflow
    margin
    padding
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The top menu overlaps in IE because mozilla applies a 1em top margin to elements such as p,h1,h2 etc and IE doesn't apply ant top margin. You can cure the overlap by setting the margin explicitly.

    Code:
    h1,h2 {font-family:Georgia, "Times New Roman", Times, serif;
    padding:10px;
    margin:1em 0 0 0;
    }
    The massive gap at the bottom of the page that goes on forever is due to your misuse of position:relative. You will virtually never use position:relative for structural layout (unless you are working with advanced horizontal negative margin floated layouts).

    position:relative is uded for more subtle overlapping effects and not structural layout. The reason it isn't used for structural layout is because position relative doesn't in fact move anything at all. The white space that the element previously occupied is always preserved and other elements on the page treat the relative element as though it had remained in the same place.

    You can think of it as moving the element only visually but not physically.

    You can of course use absolute positioning if your layout is rigid enough to live with it but remember that absolute elements are removed from the flow and it is impossible to place a footer that spans absolute columns.

    Columnar layouts these days are usually floated but floats are also not without problems but are a lot more flexible which is why they are usually preferred.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •