SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Compatibility Issues

    Hello,

    I am trying to get a DIV to cover the whole page (100% width, 100% height). With another div floating above everything else with some text in it (In the middle of the page).

    Working fine in Firefox, but as normal it messes up in IE.

    I have already used the 100% height on the body fix to get it to stretch the full height of the page.

    In IE there is a big box where the DIV has not covered the page on the right side and there is a horizontal scroll bar.

    CSS:

    Code CSS:
    .logoutcover {
    text-align:center;
    background-color:#CCCCCC;
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
     
    position:absolute;
    }
    .logouttext {
    position:absolute;
    float:left;
    left:0px;
    z-index: 10;
    text-align:center;
    width:100%;
    }

    Both the DIVs are just placed in the body (No other containers)

    Body CSS:

    Code CSS:
    body {
    	background-image: url(grad.png);
    	background-repeat: repeat-x;
    	text-align:center;
    	/* Internet Explorer Fixes (Grr) */
    	height:100%;
    }

    Thanks,

    Tom

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

    Not sure if this was what you were talking about but you need to clear the body margins and padding.

    Code:
    html,body{height:100%}
    * {margin:0;padding:0}
    body {
        background: url(grad.png) repeat-x;
        text-align:center;
    }
    .logoutcover {
    text-align:center;
    background-color:#CCCCCC;
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    position:absolute;
    }
    .logouttext {
    position:absolute;
    left:0px;
    top:0;
    z-index: 10;
    text-align:center;
    width:100%;
    }
    You can't float an absolute elements so float will be ignored

  3. #3
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works great!

    My float is working, well it works fine in Firefox and IE. If I don't use the position:absolute; my z-index gets ignored.

    Quote Originally Posted by Paul O'B View Post
    HI,

    Not sure if this was what you were talking about but you need to clear the body margins and padding.

    Code:
    html,body{height:100%}
    * {margin:0;padding:0}
    body {
        background: url(grad.png) repeat-x;
        text-align:center;
    }
    .logoutcover {
    text-align:center;
    background-color:#CCCCCC;
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    position:absolute;
    }
    .logouttext {
    position:absolute;
    left:0px;
    top:0;
    z-index: 10;
    text-align:center;
    width:100%;
    }
    You can't float an absolute elements so float will be ignored

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    My float is working, well it works fine in Firefox and IE.
    Your float isn't working at all lol

    As I said above float is ignored when the position absolute is added. It's the position absolute that is taking care of the positioning. You don't need the float in that code.

    If you did want it floated and still to have a z-index then you would add position:relative (without co-ordinates). Only positioned elements gain a stacking context.


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
  •