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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Some images not showing up in IE, but show up fine in all other browsers

    I am working on a project for my boss. I am trying to move our main content to wordpress as a content management system. He wants to have the same visual appearance in wordpress, as he does on our current site. I am an intermediate programmer, and have it almost perfect, but I am having a pretty annoying issue. In my head container, I am trying to use five(5) images, floated left, to make the head. In ALL other browsers, all five(5) images show up. In IE, two(2) do not. Also in IE, my #container_head { width: 100%;} doesnt seem to work. Any help would be appreciated!

    Here is the link to the site:
    http://wordpress.aboutearl.com/?p=13

    And here is my CSS:

    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: url(images/banner_01.jpg); 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 - 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;
    	}
    Last edited by siconic; 12-14-2010 at 06:58 PM.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I had this problem once, you have to add background-image: then it should work in IE. Or you could try to add the apostrophes too. background-image: url ('images/something.jpg')

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunatly, i am not calling the images in my CSS. I am using <img src="someimage.jpg" id="someid">.

    Would it be batter to call the images using CSS? I tried that before this problem, and I had a much harder time getting things aligned properly.

    Any other suggestions?
    Last edited by siconic; 12-13-2010 at 02:52 PM.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Hmm, I do think some of these images would be better as background images, but here, adding:

    Code:
    #container_head2 img{display:block}
    seems to do the trick.

    It looks like you have changed your doctype from xhtml to html at some point, but not made all the amendments. Check out the validator results. In particular remove the xhtml attributes from the <html> tag.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    PS: Please edit your post to wrap the codes in your post with [CODE][/CODE] tags. Thanks.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    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
    PS: Please edit your post to wrap the codes in your post with [CODE][/CODE] tags. Thanks.
    Sorry about the code tag... I havent posted here before. Well, I added to the head.php the following;
    Code:
     <!--[if IE ]>
    	<style type="text/css">
    	#ddnav li ul{ 
          position: absolute; 
          left: -999em;
          margin-top: 0px;
          } 
    	#ddnav a{ 
              width:130px;
          }       
                 #container_head img{display:block}	
                 #container_head2 img{display:block}
    	#nav_links {
    	position: absolute;
    	top: 172px;
    	width: 100%;
    	text-align: center;
    	z-index: 3;
    	}
    	</style>
    <![endif]-->
    and it worked! Thank you so much.

    I am still having an issue however with the container_head not being 100% of the page width. On my work IE, the image remains stationary and doesnt stretch with the screen when you hit ctrl and use the scroll on the mouse. On my home laptop, the image resizes. How can this issue be overcome?
    Last edited by siconic; 12-14-2010 at 07:17 PM.


  •  

    Posting Permissions

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