Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Width 100% issue in IE

    Ok, in IE, the image does not stretch 100% across the screen. However in every other browser, its does. I want the same thing to happen in IE.

    Here is the link. View it in IE, then in firefox and use the zoom in out option to resize the screen.

    Http://wordpress.aboutearl.com

    Here is my css code:

    Code:
    a { color: #007dfc; text-decoration: none; }
    a:hover { color: #6f6e6e; text-decoration: none; }
    a:visited { color: #007dfc; text-decoration: none; }
    body { margin: 0px; background-color: #EEE3D0; font-family: Verdana ;font-size: 14px;font-style: normal;font-weight: normal;text-transform: normal;letter-spacing: normal;line-height: 17px;padding: 0px; color: rgb(69,54,37); }
    form { margin: 0px; padding: 0px; }
    h1 { border-left:4px #007DFC solid; color: #007DFC; font: lighter 30px Arial, Helvetica, sans-serif; margin: 0px; padding: 7px;}
    h1 a, h1 a:visited { color: #007DFC; text-decoration: none; }
    h1 a:hover { color: #888888; text-decoration: none; }
    h2 { width: relative; border-bottom: 1px solid #CCCCCC; color: #0c57a3; font: lighter 22px Arial, Helvetica, sans-serif; letter-spacing: -1px; margin: 0px 0px 2px; padding-bottom: 3px; padding-top:7px;}
    h2 a, h2 a:visited { color: #007dfc; text-decoration: none; }
    h2 a:hover { color: #6f6e6e; text-decoration: none; }
    h3 { color: #888888; font: normal 12px Arial, Helvetica, sans-serif; font-weight:bold; margin: 10px 0px 5px;text-transform:uppercase; }
    h4 { color: #888888; font: normal 12px Arial, Helvetica, sans-serif; font-weight:bold; margin: 10px 0px 5px;text-transform:uppercase; }
    h5 { color: #333333; font: normal 14px Arial, Helvetica, sans-serif; font-weight:bold; margin: 10px 0px 5px; }
    h6 { color: #333333; font: normal 12px Arial, Helvetica, sans-serif; font-weight:bold; margin: 10px 0px 5px; }
    p { margin: 0px; padding: 0px 0px 15px; }
    table { background:#ffffff; border:2px #AAAAAA solid; padding:5px;border-collapse:collapse;}
    table th {border:1px #AAAAAA solid;color: #333333; font: normal 14px Arial, Helvetica, sans-serif;padding:3px;}
    table td {border:1px #AAAAAA solid;padding:3px;}
    pre {border:1px #AAAAAA dashed;padding:5px;background:#fff;}
    
    
    #container { margin-left: auto; margin-right: auto;width: 960px;background: url(images/container-bg.gif) repeat-y; }
    #container-up { height:14px;background: url(images/container-bg-up.gif) no-repeat; }
    #container-down { height:14px;background: url(images/container-bg-down.gif) no-repeat; }
    
    
    #commentform { font: 12px Arial, Helvetica, sans-serif; margin-top: 10px; }
    #commentform #submit { background: url(images/btn-bg.gif) no-repeat; border: none; color: #FFFFFF; cursor: pointer; float: right; font: bold 12px Arial, Helvetica, sans-serif; height: 20px; width: 100px;text-transform:uppercase; clear:both;}
    #commentform input { background-color: #ffffff; border: 1px solid #cccccc; margin-top: 3px; padding: 3px; width: 200px; }
    #commentform label { color: #262626; font-size: 87%; }
    #commentform p { margin: 0px; padding: 6px 0px; font-size:12px; }
    #commentform input {margin:5px;border: 1px solid #cccccc; }
    #commentform label {padding:5px;padding-right:0px;font: 12px Arial, Helvetica, sans-serif;}
    #commentform span {}
    #commentform textarea { background-color: #ffffff; border: 1px solid #cccccc; height: 115px; margin-top: 3px; padding: 2px; width: 500px; }
    #commentform textarea:focus, #commentform input[type="text"]:focus { background: #ffffff; }
    #respond { clear: both; padding: 10px 0 5px 0;font: 12px Arial, Helvetica, sans-serif; }
    
    
    #content { float: left; padding: 17px 10px 0px 20px; width: 490px; }
    #content img { max-width:480px; }
    
    
    #footer { font: 11px Helvetica, Arial, sans-serif;clear: both; height:30px; color: #dddddd; padding:13px 0px 0 0;margin-left: auto; margin-right: auto;  text-align: center; width: 760px; background-color: #000;background: url(images/footer-bg.gif); }
    #footer a strong { color: #eeeeee; }
    #footer a, #footer a:visited { color: #eeeeee; }
    #footer a:hover { color: #eeeeee; }
    
    #header {height: 202px; float: left; width: 100%; background-color:#007dfc; no-repeat;}
    #ddnav { font-size:12px; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;color: #101010; font-weight:bold; width:100%; }
    #ddnav, #ddnav ul { float:left; list-style:none; line-height:40px; padding:0; margin:0; width:100%; border-bottom:3px #000 solid; }
    #ddnav a { display:block; text-decoration:none; border-right: 1px #000 solid;border-left: 1px #000 solid;border-top:1px #000 solid;color: #101010; background: url(images/bot-bg.gif) repeat-x;text-transform:uppercase;text-shadow:1px 1px 1px #FFFFFF; height: 40px; line-height: 40px; margin-right: 3px; text-decoration: none; vertical-align: middle; padding: 0 10px; }
    #ddnav a:hover { color: #007dfc; border-right: 1px #007dfc solid;border-left: 1px #007dfc solid;border-top:1px #007dfc solid;}
    #ddnav li { float:left; padding:0; }
    #ddnav ul { position:absolute; left:-999em; height:auto; width:151px; font-weight:normal; margin:0; line-height:1; border:0; }
    #ddnav li li { width:149px; border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:1px solid #666666; font-weight:bold; font-family:verdana,sans-serif; }
    #ddnav li li a { padding:4px 10px; width:130px; font-size:10px; text-decoration:none; color: #202020; background: #dedede;text-transform:uppercase;text-shadow:1px 1px 1px #FFFFFF; height: 20px; line-height: 20px; text-decoration: none; vertical-align: middle; padding: 0 10px; }
    #ddnav li li a:hover { border: 1px #000 solid; }
    #ddnav li ul ul { margin:-21px 0 0 150px; }
    #ddnav li li:hover { }
    #ddnav li ul li:hover a, #ddnav li ul li li:hover a, #ddnav li ul li li li:hover a, #ddnav li ul li li li:hover a { }
    #ddnav li:hover a, #ddnav li.sfhover a { }
    #ddnav li:hover li a, #ddnav li li:hover li a, #ddnav li li li:hover li a, #ddnav li li li li:hover li a { }
    #ddnav li:hover ul ul, #ddnav li:hover ul ul ul, #ddnav li:hover ul ul ul ul, #ddnav li.sfhover ul ul, #ddnav li.sfhover ul ul ul, #ddnav li.sfhover ul ul ul ul { left:-999em; }
    #ddnav li:hover ul, #ddnav li li:hover ul, #ddnav li li li:hover ul, #ddnav li li li li:hover ul, #ddnav li.sfhover ul, #ddnav li li.sfhover ul, #ddnav li li li.sfhover ul, #ddnav li li li li.sfhover ul { left:auto; }
    #ddnav li:hover, #ddnav li.sfhover { }
    
    
    .cutom-nav-menu { clear: both; float: left; list-style: none;  height:40px; width:768px;border-bottom:3px #000 solid; margin-bottom:10px;}
    .cutom-nav-menu a {font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;border-right: 1px #000 solid;border-left: 1px #000 solid;border-top:1px #000 solid;color: #4E4E4E; display: block; float: left; font-size: 12px; height: 40px; line-height: 40px; margin-right: 3px; text-decoration: none; vertical-align: middle; padding: 0 10px; font-weight:bold; background-color:#ececec; background: url(images/bot-bg.gif) repeat-x;text-transform:uppercase;text-shadow:1px 1px 1px #FFFFFF;}
    .cutom-nav-menu a:hover { color: #007dfc; border-right: 1px #007dfc solid;border-left: 1px #007dfc solid;border-top:1px #007dfc solid;}
    .cutom-nav-menu li { display: inline; height: 30px; list-style: none; }
    .cutom-nav-menu ul { margin: 0px; padding: 0px;padding-left:10px; }
    
    
    #logo { height:115px; clear:both; width: 938px; text-align:right;padding-top:7px; } 
    #logo h1 { padding:0px; margin:0px; text-decoration:none; display: inline; line-height: 30px; border: 0px;}
    #logo h1 a { font-size: 29px; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif; letter-spacing: 0px; color: #ffffff; text-shadow:1px 1px 1px #000000; margin:0px;padding:0px; padding-right:17px; font-weight:bold; text-decoration:none; }
    #logo p { display: block;  margin-top: 0px; font-family: Verdana; font-size: 14px; font-weight:bold; text-shadow: 1px 1px 1px #000000; padding-right:17px;  color:#fbfbfb; }
    
    
    #page { background-color:#FBF6F0; margin: 0 auto; width: 760px;
    	-moz-border-radius-topleft: 12pt;
    	-moz-border-radius-topright: 12pt; }
    
    
    #search-container {background-color:#000000;width: 210px;text-align:center; padding-bottom:7px;padding-top:7px;}
    #searchform { margin: 0 0 0; }
    #searchform #s { background: #fff; border: 1px solid #cccccc; color: #000000; cursor: pointer; font-weight: normal; height: 19px; line-height: 19px; margin-right: 2px; padding: 0px 5px 0px 5px; vertical-align: middle; width: 135px; }
    #searchform br { display: none; }
    #searchform input { background: url(images/search-btn-bg.gif) no-repeat; border: none; color: #FFFFFF; font: bold 11px Arial, Helvetica, sans-serif; height: 20px; line-height: 20px; vertical-align: middle; width: 52px; }
    
    #sidebar { color: #666666; float: left; padding: 0px 10px 20px 10px; width: 210; background:#FBF6F0; font-size:12px;}
    #sidebar a, #sidebar a:visited { color: #6f6e6e;  text-decoration: none;  font-size:12px;}
    #sidebar a:hover { color: #0351a1; text-decoration: none; }
    #sidebar h2, #sidebar .sidebartitle {color: #007dfc; font: 14px Helvetica, Arial, sans-serif; margin: 0px 0px 2px; border-bottom: 2px solid #007dfc;}
    #sidebar ul { margin: 0; padding: 0;list-style-type: none;}
    #sidebar ul li { border: none; border-bottom: 1px solid #CCCCCC; list-style: none; margin: 0; padding: 2px 0; background: url(images/bullet.gif) no-repeat;background-position: 0 7px;padding-left:15px;}
    #sidebar ul li ul { margin: 0; padding: 0;background:#fff; padding-left:12px;}
    #sidebar ul li ul li { border: 0px; padding: 2px 0 2px 0px;list-style: square; background:#fff;  }
    #sidebar ul li ul li ul li { border: 0px; padding: 1px 0 1px 10px; }
    
    
    #credits{ color:#777777; font: 11px Helvetica, Arial, sans-serif; text-align:right;	 text-shadow:1px 1px 1px #ffffff; height: 15px;  margin: 0px auto;  width: 760px; }
    #credits a{	color:#555555; text-decoration:none; }
    #credits span{	color:#555555; text-decoration:none; }
    
    .widget-box { border:4px solid #EEEEEE; display:block; padding:0px; width: relative; margin-top:12px; padding:5px 5px 0px 5px;}
    .entry { clear: both; padding-top: 10px; }
    .navigation-down { clear: both; height: 15px; padding: 10px 0px; }
    .post-container { clear: both; background:#FFFFCC;padding:5px;}
    .post-date { background: url(images/date-bg.gif) no-repeat; float: left; height: 50px; width: 50px; margin-right:5px;}
    .post-day { color: #999999; display: block; font-size: 18px; line-height: 18px; margin-left: -5px; padding-top: 7px; text-align: center; text-transform: uppercase; }
    .post-month { color: #FFFFFF; display: block; font-size: 11px; line-height: 11px; padding-top: 5px; text-align: center; text-transform: uppercase; }
    .post-title { float: left; margin-left: 0px; text-transform: capitalize; width: 430px; }
    .rss { background: url(images/mini-rss.gif) no-repeat left center; margin-left: 8px; padding-bottom: 2px; padding-left: 18px; }
    .separator {clear:both;height:15px;}
    hr.clear { clear: both; margin: 0px; padding: 0px; visibility: hidden; }
    .post-auth { float: left; font-size: 95%; }
    .post-cat { background: url(images/mini-category.gif) no-repeat; float: left; font-size: 10px; padding-left: 20px;clear:both; text-transform:uppercase;}
    .post-tag { background: url(images/mini-tag.gif) no-repeat; float: left; font-size: 10px; padding-left: 20px;clear:both; text-transform:uppercase;}
    .post-comments { background: url(images/mini-comments.gif) no-repeat; float: right; font-size: 10px; padding-left: 17px; text-transform:uppercase;}
    span.previous-entries {  color: #888888;display: block; float: left;font-family: Helvetica; font-size: 12px;}
    span.next-entries   { color: #888888;display: block; float: right; font-family: Helvetica; font-size: 12px;   }
    span.rss   { background: url(images/mini-rss.gif) no-repeat; float: right; font-size: 10px; padding-left: 20px;padding-right:10px;}
    
    
    .recentcomments { font-size:10px;color:#1474d6 }
    .recentcomments a, .recentcomments a:visited {font-size:12px; text-decoration:none;}
    img.alignleft, img[align="left"] { float: left; margin: 2px 10px 5px 0px; }
    img.alignright, img[align="right"] { float: right; margin: 2px 0px 5px 10px; }
    img.center, img[align="center"] { display: block; margin-left: auto; margin-right: auto; }
    img.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
    img.avatar {float:left; margin-right:5px;}
    .alignleft { float:left; }
    .alignright { float:right; }
    .aligncenter{ display:block; margin-left: auto; margin-right: auto; text-align: center; }
    #calendar_wrap {margin-left:30px;margin-right:auto;text-align:center;padding:5px;}
    #wp-calendar { background: #f0f0f0;padding:3px;border:1px #d5d5d5 solid;}
    #wp-calendar caption {color: #0351a1; font: verdana sans-serif; font-weight:bold;text-transform:uppercase;}
    .center { text-align: center; }
    .clear { clear: both; }
    .commentlist { line-height: 130%; margin: 25px 0px; padding-left: 20px; }
    .commentlist .alt { }
    .commentlist cite { color: #007dfc; font-size: 120%; font-style: normal; font-weight: bold; }
    .commentlist cite a, .commentlist cite a:visited { color: #007dfc;font-size:12px; }
    .commentlist li { padding: 5px 10px;background:#fbfbfb; margin:5px; }
    .commentlist small { display: block; font-size: 87%; margin-bottom: 5px; }
    .bypostauthor {border:2px #007dfc solid; }
    .wp-caption {background:#eaeaea;border:1px #c1c1c1 solid;padding:3px; }
    .wp-caption-text {line-height:15px;color:#4d4d4d; padding:5px;font-size:12px;}
    .gallery-caption {background:#d3d3d3;font-size:12px;}
    .sticky {border: 1px dotted #0a6ccf;padding-top:5px;padding-bottom:5px;background:#e4f1fe;}
    
    /* Added by Earl Polan - Florida online image container and alignment css */
    
    #container_head { 
    	position: relative;
    	height: 204px;
       	width: 100%;
    	overflow: hidden;	
    }
    
    #container_head2 {
    	postition: relative;
    	top: 0;
    	width: 760px;
      	margin-left: auto ;
      	margin-right: auto ;
    	height: 204x;
       	
    }
    
    .nav_bar {
    	position: relative;
    	width: 760px;
      	margin-left: auto ;
      	margin-right: auto ;
    	z-index: 2;
    }
    	
    .head_left {
    	position: absolute;
    	right: 50%;	
    	top: 0px;
    	width: 50%;
    	height: 202px;
    	z-index: -1;
    }
    
    
    .head_rt {
    	position: absolute;
    	left: 50%;
    	top: 0px;
    	width: 50%;
    	height: 202px;
    	z-index: -1;
    }
    
    .banner_left {
    	top: 0;
    	float:left;
    	z-index: 1;
    }
    
    .banner01 {
    	top:0;
    	float: left;
    	z-index: 1;
    }
    
    .banner02 {
    	top:0;
    	float: left;
    	z-index: 1;
    }
    
    .banner_rt {
    	top:0;
    	float: left;
    	z-index: 1;
    }	
    
    *>.trans_lt {
    	filter: alpha(opacity=40); /* Not supported by NN 6.0, 7.0, IE 5.X & 6.0 */
    	-moz-opacity: .40; /* see the background through the image, IE5.0 can't parse this */
    	opacity: .40; 	/* Not supported by NN 6.0, 7.0, IE 5.X & 6.0 */
    	margin: 0px 0px 0px 0px;
    	}
    
    *>.trans_rt {
    	filter: alpha(opacity=40); /* Not supported by NN 6.0, 7.0, IE 5.X & 6.0 */
    	-moz-opacity: .40; /* see the background through the image, IE5.0 can't parse this */
    	opacity: .40; 	/* Not supported by NN 6.0, 7.0, IE 5.X & 6.0 */
    	margin: 0px 0px 0px 0px;
    	}
    	
    
    #footer_content	{
    	width: 760px;
      	color: #999999;
    	background: inherit;   /* Not supported by IE 5.X & 6.0 */
      	font-size: x-small;
      	text-align: center;
      	margin-top: 2em;
    	margin-left: auto;
    	margin-right: auto;
    	}
    	
    #nav_links {
    	position: absolute;
    	float: left;
    	top: 158px;
    	width: 100%;
    	text-align: center;
    	z-index: 3;
    }
    
    
    #breadcrumb-position {
    	margin: 10px 10px 10px 30px;
    	width: 760px;
    	text-align: left;
    }
    
    #navlist a	{
        font-size: 120%;
    	font-weight: bold;
    	text-transform: capitalize;
    	text-decoration: none;
    	letter-spacing: 2px;
    	white-space: nowrap; /* Not supported by IE 5.0 */
    	vertical-align: middle; /* Not supported by IE 5.X */
    	text-align: center;
    	}	
    
    #navlist a:link	{
    	color: #ffffff;
    	background: inherit;   /* Not supported by IE 5.X & 6.0 */	
    	}
    
    #navlist a:visited {
    	color: #eeeeee;
    	background: inherit;   /* Not supported by IE 5.X & 6.0 */
    	}
    
    #navlist a:hover	{
    	color: #ffffcc;
    	background: inherit;   /* Not supported by IE 5.X & 6.0 */
    	}
    
    #navlist li	{
    	display: inline;	/* Not supported by IE 5.0 */
    	list-style-type: none;
    	padding-right: 10px;
    	}
    I am also using this in the header.php file:

    Code:
    <!--[if IE ]>
    	<style type="text/css">
    	#ddnav li ul{ 
          position: absolute; 
          left: -999em;
          margin-top: 0px;
          } 
    	#ddnav a{ 
              width:130px;
          }       
    	#container_head2 img{display:block}
    	#nav_links {
    	position: absolute; 
    	top: 172px;
    	width: 100%;
    	text-align: center;
    	z-index: 3;
    	}
    	#container_head img{display:block}
    	#container_head {
    	position: relative;
    	height: 204px;
       	margin: 0;
    	padding: 0;
    	width: 100%;
    	overflow: hidden;
    	</style>
    <![endif]-->
    ANY help would be greatly appreciated!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Which image you are talking about? I get the same display in my FF and IE
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Which image you are talking about? I get the same display in my FF and IE
    It appears to be an IE 7 issue maybe. It works fine in IE 8, but in IE 7 is where the issue is. The images I am talking about are the images of the water and beach. They should span the entire page, but in IE 7 they only appear to be the ACTUAL width of the images. i am assuming that IE 7 is not correctly interpretting the width: 100%; .

  • #4
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Have you tried adding it to the header as a background image?


  •  

    Posting Permissions

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