www.webdeveloper.com
Results 1 to 9 of 9

Thread: position:relative IE vs Firefox

  1. #1
    Join Date
    Apr 2008
    Posts
    5

    position:relative IE vs Firefox

    Hi,

    I have a footer defined in the following way:
    <div id="outer">
    <div id="left"></div>
    <div id="centrecontent"></div>
    <div id="clearfooter"></div>
    </div>
    <div id="footer">Copyright My Company. All Rights Reserved</div>

    In css:
    #footer {
    width:100%;
    clear:both;
    height:22px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #FF8080;
    color: #000000;
    text-align:center;
    position:relative;
    }

    In Firefox, the Copyright is always at bottom of page, but in IE it is relative to centrecontent, so it jumps to the middle of the page.

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    How is #outer defined?

    Would be easier to see the page live online.

  3. #3
    Join Date
    Apr 2008
    Posts
    5
    #outer{
    min-height:100%;/*for mozilla as IE treats height as min-height anyway*/
    margin-left:202px;
    background:#FFFFFF;
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin-bottom:-30px; /*adjust this to hide bg at bottom depending on content length for IE*/
    margin-right: 0px;
    color: #000000;
    }


    Its an internal application.

  4. #4
    Join Date
    Apr 2008
    Posts
    5
    I am trying to use specific syntax to specify css just for IE, but it does not work for IE 7.

    <head>
    <!--[if IE 7]><link href="ie_only.css" rel="stylesheet" type="text/css"><![endif]-->
    </head>

    ie_only.css looks like

    <style type="text/css">

    #outer{min-height:100%;height:100%;margin-left:201px;margin-bottom:0;}

    #left {height: 100%;margin-right:-3px}

    #centrecontent {height:1%;margin-bottom:70px;}
    </style>

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Do you have the css for both html and body set to 100% height ?

    The only extra css for IE should be
    Code:
    * html #outer {
      height: 100%;
    }

  6. #6
    Join Date
    Apr 2008
    Posts
    5
    I think that does not work for IE7, they fixed all those hacks.

  7. #7
    Join Date
    Apr 2008
    Posts
    5
    Yes I do have.
    /* mac hide \*/
    html, body {height:100%}
    /* end hide*/


    Should I take it out? What does it do?

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by AnnaS
    I think that does not work for IE7, they fixed all those hacks.
    IE7 shouldn't need it - it knows what min-height is.

  9. #9
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by AnnaS
    Should I take it out? What does it do?
    No, it sets the reference height. An element's height can only be referenced to its parent's height if the height of the parent is explicitly set. If the html and body are both set to 100% height, then min-height of 100% on #outer will mean it is always at least the height of the viewport. #outer IS the first and outermost div isn't it ?

    I think we are going to need to see the full page code (including css) for this, even if it is a stripped down version that still exhibits the problem.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles