#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    2
    Rep Power
    0

    Dimension problems with div in Internet Explorer


    Hey guys, I'm trying to use div classes and z positioning to make a background that will stretch to the size of the browser window. The following code works fine in Firefox but the dimensions are wrong when viewed in IE.

    .bg_image {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: fixed;
    z-index: 0;
    }

    <div class="bg_image">
    <img src="image_link.extension" width="100%" height="100%">
    </div>


    My solution so far has just been to use the following to ensure that if it doesn't load properly that at least something loads-

    *html .bg_image {
    width: 1600;
    height: 2150;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
    }

    Is there any way I can get IE to recognize the 100% for height and width?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    2
    Rep Power
    0
    Here is my full code for reference:


    CSS
    Code:
    <style type="text/css">
    
    .bg_image {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: fixed;
    z-index: 0;
    }
    
    
    *html .bg_image {
    width: 1600;
    height: 2150;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 0;
    }
    
    html * {
    
    	font-family: Helvetica, Arial, sans-serif !important;	
    
    	font-size: 15px;
    
    	color: D5D9FE;
    
    	-moz-outline-style: none;
    
    
    }
    
    
    
    body {
    
    	color: D5D9FE; .r{}
    
    	font-family: helvetica, arial, sans-serif;
    
    	font-size: 62.5%;
    
    	background-color: transparent;
    
              height:100%;
    
    }
    
    
    
    	table, td {
    
    		color: D5D9FE !important;
    
    		background-color: transparent;
    
    	}
    
    
    
    	
    
    .main{
    
    	position:absolute;
    
    	left:50%;
    
    	top:125px;
    
    	width:400px !important;
    
    	z-index:1;
    
    	margin-left:-500px;
    
    }
    
    	
    
    img, img a:link { border: 0; padding: 0; margin: 0; }
    
    
    
    
    
    td.overlayDivider {
    
        width: 800px;
    
    	font: 12px/17px Helvetica, Arial, sans-serif !important;
    
    	color: D5D9FE;
    
    	overflow: auto;
    
    }
    
    
    
    h4.subHead { 
    
    	font: 12px/17px Helvetica, Arial, sans-serif !important;
    
    	color: D99700;
    
    	text-align: left;
    
    	font-weight: bold !important;
    
    	margin: 24px 0 0 0;
    
    }
    
    
    
    p {
    
    	font: 12px/17px Helvetica, Arial, sans-serif !important;
    
    	color: D5D9FE;
    
    }
    
    
    
    p a:link, p a:active, p a:visited {
    
    	color: D99700 !important;
    
    	text-decoration: underline !important;
    
    	font: 12px/17px Helvetica, Arial, sans-serif;
    
    }
    
    
    
    	p a:hover { 
    
    		color: D99700 !important;
    
    		text-decoration: none;
    
    	}
    
    
    
    .idUpperNav {
    
    	background-color: transparent;
    
    	height: 12px;	
    
    position: absolute;
    
    top: 10px; left: 10px;
    
    z-index:9;
    
    }
    
    
    
    .idUpperNav ul {
    
    	list-style-type: none !important;
    
    	margin: 0; padding: 0;
    
    }
    
    
    
    	.idUpperNav ul li {
    
    		display: inline;
    
    		width: 125px;
    
    		height: 10px;		
    
    	}
    
    	
    
    .idSidebar {
    
    	margin: 0; padding: 0;
    
    	width: 280px;
    
    position: absolute;
    
    top: 40px; left: 0px;
    
    }
    
    
    
    img.idHeader {
    
    position: absolute;
    
    top: 0px; left: 0px;
    
    }
    
    
    
    img.idHeadline {
    
    position: absolute;
    
    top: 190px;
    
    left: 280px;
    
    z-index:2;
    
    }
    
    
    
    .idContent {
    
    margin: 0; padding: 0;
    
    width: 280px;
    
    position: absolute;
    
    top: 307px;
    
    left: 300px;
    
    z-index:8;
    
    }
    
    
    
    .idMainImage p {
    
    	text-align: left;
    
    	margin-bottom: 2.0em;
    
    	margin-right: 10px;
    
    }
    
    
    
    .idButtons {
    
    	margin-top: 2.0em;
    
    	margin-bottom: 3.0em;
    
    	text-align: left;
    
    }
    
    	
    
    	.idAddToFriends {
    
    		display: block;
    
    		margin-bottom: 10px;
    
    		border-bottom-width: 2px;
    
    		border-bottom-style: solid;
    
    		border-bottom-color: D5DFCF;
    
    	}
    
    	
    
    	.msButton {
    
    		margin: 10px 0 0 0;
    
    		display: block;
    
    	}
    
    
    
    .leftCopy {
    
    	width: 280px;
    
    }
    
    
    
    h3.idInterestsHeader {
    	font: 20px Helvetica, Arial, sans-serif !important;
    
    	color: D99700;
    
    	text-align: left;
    
    	font-weight: bold !important;
    
    
    	font-size: 20px;
    
    	width: 280px;
    
    	height: 30px;
    
    	margin-top: 2.0em;
    
    	margin-bottom: 1.0em;
    
    	border-bottom-width: 3px;
    
    	border-bottom-style: solid;
    
    	border-bottom-color: d5dfcf;
    
    }
    
    
    
    h3.idSchoolsHeader {
    
    	font: 20px Helvetica, Arial, sans-serif !important;
    
    	color: D99700;
    
    	text-align: left;
    
    	font-weight: bold !important;
    
    
    	font-size: 20px;
    
    	width: 280px;
    
    	height: 30px;
    
    	margin-top: 2.0em;
    
    	margin-bottom: 1.0em;
    
    	border-bottom-width: 3px;
    
    	border-bottom-style: solid;
    
    	border-bottom-color: d5dfcf;
    
    }
    
    
    
    h3.idVitalHeader {
    
    	font: 20px Helvetica, Arial, sans-serif !important;
    
    	color: D99700;
    
    	text-align: left;
    
    	font-weight: bold !important;
    
    
    	font-size: 20px;
    
    	width: 280px;
    
    	height: 30px;
    
    	margin-top: 2.0em;
    
    	margin-bottom: 1.0em;
    
    	border-bottom-width: 3px;
    
    	border-bottom-style: solid;
    
    	border-bottom-color: d5dfcf;
    
    }
    
    
    
    p.copyright {
    
    	width: 280px;
    
    	font: 11px/13px Helvetica, Arial, sans-serif !important;
    
    	color: 666666;
    
    	text-align: left;
    
    	margin-top: 2.0em; 
    
    	padding-top: 1.0em;
    
    	border-top-width: 1px;
    
    	border-top-style: solid;
    
    	border-top-color: 666666;
    
    }
    
    
    
    p.copyright a:link, p.copyright a:visited, p.copyright a:active, p.copyright a:hover,
    
    p.fromHyalineskies a:link, p.fromHyalineskies a:visited, p.fromHyalineskies a:active, 
    
    p.fromHyalineskies a:hover {
    
    	color: 464A47 !important;
    
    	font-size: 11px !important;
    
    	line-height: 13px;
    
    	text-decoration: underline;
    
    }
    
    
    
    p.fromHyalineskies {
    
    	margin-top: 5px; padding-top: 0;
    
    	font: 11px/13px Helvetica, Arial, sans-serif !important;
    
    	color: 464A47;
    
    	
    
    	margin-bottom: 1.0em;
    
    }
    
    
    
    
    
    p.educationInstitution, p.fromHyalineskies {
    
    	margin-top: 5px; padding-top: 0;
    
    	font: 11px/13px Helvetica, Arial, sans-serif !important;
    
    	color: 464A47;
    
    	
    
    	margin-bottom: 1.5em;
    
    }
    
    
    
    	span.instTitle {
    
    		font: 12px/13px Helvetica, Arial, sans-serif;
    
    		color: D5D9FE;
    
    		font-weight: bold;	
    
    	}
    
    	
    
    	
    
    img.hyalineskiesButton {
    
    	display: block;
    
    	text-align: center;
    
    	margin-top: 6.0em;
    
    	margin-bottom: 3.0em;
    
    }
    
    
    
    h3.idLatestHeader {
    
    	font: 20px Helvetica, Arial, sans-serif !important;
    
    	color: D99700;
    
    	text-align: left;
    
    	font-weight: bold !important;
    
    
    	font-size: 20px;
    
    	width: 280px;
    
    	height: 30px;
    
    	margin-top: 2.0em;
    
    	margin-bottom: 1.0em;
    
    	border-bottom-width: 3px;
    
    	border-bottom-style: solid;
    
    	border-bottom-color: d5dfcf;
    
    }
    
    
    
    h3.idAboutEston {
    
    	font: 20px Helvetica, Arial, sans-serif !important;
    
    	color: D99700;
    
    	text-align: left;
    
    	font-weight: bold !important;
    
    
    	font-size: 20px;
    
    	width: 280px;
    
    	height: 30px;
    
    	margin-top: 2.0em;
    
    	margin-bottom: 1.0em;
    
    	border-bottom-width: 3px;
    
    	border-bottom-style: solid;
    
    	border-bottom-color: d5dfcf;
    
    }
    
    
    
    h3.idTopFour {
    
    	font: 20px Helvetica, Arial, sans-serif !important;
    
    	color: D99700;
    
    	text-align: left;
    
    	font-weight: bold !important;
    
    
    	font-size: 20px;
    
    	width: 280px;
    
    	height: 30px;
    
    	margin-top: 2.0em;
    
    	margin-bottom: 1.0em;
    
    	border-bottom-width: 3px;
    
    	border-bottom-style: solid;
    
    	border-bottom-color: d5dfcf;
    
    }
    
    
    
    h3.idComment {
    
    	font: 20px Helvetica, Arial, sans-serif !important;
    
    	color: D99700;
    
    	text-align: left;
    
    	font-weight: bold !important;
    
    
    	font-size: 20px;
    
    	width: 280px;
    
    	height: 30px;
    
    	margin-top: 2.0em;
    
    	margin-bottom: 1.0em;
    
    	border-bottom-width: 3px;
    
    	border-bottom-style: solid;
    
    	border-bottom-color: d5dfcf;
    
    }
    
    
    
    .rightWrapper {
    
    	width: 280px;
    
    	display: block;
    
    	margin-bottom: 3.0em;
    
    }
    
    
    
    .rightCopy {
    
    	width: 280px;
    
    }
    
    
    
    .leftInfo {
    
    	width: 280px;
    
    	margin-right: 10px;
    
    	float: left;
    
    	overflow: auto;
    
    }
    
    
    
    	.leftInfo p {
    
    		margin-top: 0; margin-bottom: 1.0em;
    
    		padding: 0;
    
    	}
    
    	
    
    img.tease {
    
    	display: block;
    
    	margin-top: 0; margin-bottom: 1.5em;
    
    	padding: 0;
    
    }
    
    
    
    div.idMusicPlayer {
    
    	margin-top: 0; padding-top: 0;
    
    	margin-bottom: 5px;
    
    	padding-bottom: 10px;
    
    	border-top-width: 1px;
    
    	border-top-style: solid;
    
    	border-top-color: d5dfcf;
    
    	border-bottom-width: 1px;
    
    	border-bottom-style: solid;
    
    	border-bottom-color: d5dfcf;
    
    }
    
    
    
    embed { margin: 0; padding: 0; }
    
    
    
    p.friendsLink {
    
    	margin-top: 0.5em; margin-bottom: 0;
    
    	text-align: right;
    
    	margin-right: 1px;
    
    }
    
    
    
    textarea.idCommentTextArea {
    
    	font: 12px/17px Helvetica, Arial, sans-serif;
    
    	border-width: 1px;
    
    	border-style: solid;
    
    	border-color: 464a47;
    
    	text-align: left;
    
    	
    
    	background-image: url('url_removed');
    
    	background-position: top left;
    
    	background-repeat: repeat-x;
    
    	
    
    	color: 464a47;
    
    	
    
    	width: 280px;
    
    	padding: 5px;
    
    }
    
    
    
    input.button {
    
    	
    
    	margin-top: 1.0em;
    
    	
    
    	background-color: transparent;
    
    	font: 12px/17px Helvetica, Arial, sans-serif;
    
    	color: D99700;
    
    	font-weight: bold;
    
    	text-align: center;
    
    	
    
    	border-width: 3px;
    
    	border-style: solid;
    
    	border-color: 464a47;
    
    	text-align: left;
    
    }
    
    
    
    p.aboutIntro { color: 464a47; }
    
    
    
    img.person { 
    
    	width: 118px !important; 
    
    	height: 118px !important; 
    
    	border-width: 1px; 
    
    	border-style: solid;
    
    	border-color: 464a47;
    
    	margin-right: 10px;
    
    	display: inline;
    
    }
    
    
    
    	img.personLast {
    
    		width: 118px !important; 
    
    		height: 118px !important; 
    
    		border-width: 1px; 
    
    		border-style: solid;
    
    		border-color: 464a47;
    
    		margin-right: 10px;
    
    		margin-right: 0px;
    
    		display: inline;
    
    	}
    
    
    
    </style>
    
    <style type="text/css"> .contactTable { width:0px !important; height:0px !important; background-image:url("http://i31.photobucket.com/albums/c367/g0han00/contactground.jpg"); background-repeat:no-repeat; background-color:transparent; background-attachment:scroll; background-position:center center; padding:0px !important;} .contactTable table, table.contactTable td { background-color:transparent; background-image:none; padding:0px !important;} .contactTable a img {visibility:hidden; border:0px !important;} .contactTable .text {font-size:1px !important;} </style></style>
    HTML
    Code:
    <div class="bg_image">
    <img src="http://i31.photobucket.com/albums/c367/g0han00/ThievesPrince.jpg" width="100%" height="100%">
    </div>
    
    <div class="main"> 
    <table style="width:800px; height:1200px; cellpadding: 0px; cellspacing: 0px; border:0px; margin:0px; background-color: transparent; ">
    <tr><td valign="top" class="overlayDivider" style="margin:0 0 0 -3px;">
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    14
    Rep Power
    0
    position fixed is not supported in IE
    You can get 100% width and height in IE by using expressions e.g.
    Code:
    width:expression(document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth);

IMN logo majestic logo threadwatch logo seochat tools logo