SOLVED: header bg image not showing in IE7

6 Posts

fuut Reply #1, 17 years, 10 months ago

Hi all!

I have a problem with this website: www.pleen.nl

In FF and Safari the site works well and shows the big header image. Although in IE it does NOT. I altered the background-color of the div so you can see where the header should be. Can somebody give some pointers on how to fix this? Thanks in advance! cool

I’m using the GreenGrey template, but altered it quite a bit. This is the template html:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
        <link media="screen" type="text/css" href="[(base_url)]assets/templates/greengrey/site.css" rel="stylesheet" />
        <link href="[(site_url)][~11~]" title="RSS 2.0" type="application/rss+xml" rel="alternate" />
       <title>[(site_name)] | [*longtitle*]</title>
        <base href="[(site_url)]" />
        <link type="text/css" rel="stylesheet" href="site.css" />
       <style type="text/css"></style>
      <script src="manager/media/script/scriptaculous/prototype.js" type="text/javascript"></script>
      <script src="manager/media/script/scriptaculous/scriptaculous.js" type="text/javascript"></script>  
    </head>
    <body>
<div id="page">
  <div id="header">
  </div>
<div id="content">
  <h3>[*longtitle*] </h3>
  <div>[*#content*]</div>
  </div>
  <div id="sidebar">
    <h3>Menu</h3>
	    <div id="menu">[[Wayfinder? &startId=`0`]] </div>
<div></div></div>
  <div class="clear"> </div>

<!-- Disable it temp<div id="footer">
{{FooterText}}
  </div>-->
</div>
</body>
</html>

and the css:

/*
Theme Name: Plastic
Theme URI: http://wwww.tattoocms.it/templates/plastic.html
Author: Nicola Lambathakis


------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
}
body {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: small;
	text-align: center;
	color: #FFFFFF;
	background-color: #666666;
	background-repeat: repeat;
	margin-bottom: 0px;
}
#sommario {
	display: inline;
}
div, p, img, a, td, ul, ol {
    font-size: 1em;
}

table, td {
    font-size: 1em;
}

#searchbox {
	top: 30px;
	width: 230px;
	position: absolute;
	left: 533px;
	height: 30px;
	padding: 0px;
}
#topbox {
	top: 80px;
	width: 230px;
	position: absolute;
	left: 533px;
	height: 100px;
	padding: 0px;
	color: #CCCCCC;
	font-size: 80%;
}

b {
	color: #FFFFFF;
}


ol {
    margin-left: 1em;
    padding-left: 1em;
}
ol li {
    margin-left: 1em;
    padding: 0 0 .5em.3em;
    list-style: decimal;
}
/* ---[ links ]------------------------------- */

a:link {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dotted #EDEA47;
	background-color: transparent;
	}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dotted #EDEA47;
	background-color: transparent;
	}
a:hover {
	color: #FFFFFF;
	border-bottom-style: solid;
	background-color: transparent;
	}
a.more {
	padding-right: 7px;
	background: url(../img/more-blue.gif) no-repeat 100% 5px;
	background-color: transparent;
	}

/* ---[ common elements ]--------------------- */

p {
	margin: 1em 0 1em;
	padding: 0;
	}
h1 {
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 150%;
	font-weight: normal;
	padding: 0;
	margin: 0;
	color: #FFFFFF;
	}
h2 {
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 150%;
	font-weight: normal;
	padding: 0;
	margin: 1.5em	 0 1em 0;
	color: #FFFFFF;
	}
h3 {
	margin: 1.5em 0 0 0;
	padding-bottom: 2px;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #FFFFFF;
	background-image: url(/imgs/dotbig.gif);
	background-color: transparent;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	}
h3 a:link, h3 a:visited {
	font-size: 110%;
	text-decoration: none;
	border-bottom: none;
	color: #FFFFFF;
	}
h3 a:hover {
	color: #FFFFFF;
	}
h4 {
	margin: 1.5em 0 0 0;
	padding-bottom: 2px;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-size: 105%;
	font-weight: bold;
	color: #EDEA47;
	background-image: url(/imgs/dotbig.gif);
	background-color: transparent;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}	
h1 span, h2 span, h3 span {
	color: #FFFFFF;
	}

p { padding: 0 0 1em; }

a, a:link {
    text-decoration: none;
    color: #FFFFFF;
    border-bottom: 1px dotted #EDEA47;
}
a:visited { color: #FFFFFF; border-color: #EDEA47; }
a:hover { color: #FFFFFF; border-color: #EDEA47; text-decoration: none; }
a:active { color: #EDEA47; border-color: #EDEA47;}


a img, img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}

ul {
    list-style: none;
    margin: 0 0 20px 1em;
}
li {
    list-style: none;
    padding-left: 1em;
    margin-bottom: 3px;
}


.clear {
    clear: both;
    height: 1px;
    margin: -1px 0 0;
    font-size: 1px;
}


#page {
	width: 776px;
	text-align: left;
	/* background-image: url(imgs/bgmain.gif); */
	background-color: #666666;
	background-repeat: repeat-y;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#content {
	float: left;
	text-align: left;
	width: 440px;
	padding: 0;
	line-height: 1.5em;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 20px;
	color: #FFFFFF;
}
#content h3 {
	color: #EDEA47;
	height: 32px !important; /* for most browsers */
	height /**/:57px; /* for IE5/Win */
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
}

/* Special text formatting
------------------------------------------------------------------------------- */


blockquote {
    margin: 0 0 0 30px;
    padding: 10px 0 0 20px;
    font-size: 88%;
    line-height: 1.5em;
    color: #3f3f3f;
    background: url(imgs/quotes.gif) no-repeat top left;
}

blockquote p { margin-top: 0; }

blockquote cite {
	margin: 5px 0 0;
	display: block;
}
code {
	font: 1em/2.5em 'Courier New', Courier, monospace;
	color: #444;
	white-space: pre;
    width: 350px;
    height: auto;
	overflow: auto;
    display: block;
    border: 1px solid #3f3f3f;
    border-width: 2px 0;
    padding: 1em;
    margin: 0 0 1em 0;
    background-color: #fafafa;
}
li code { width: 330px }

acronym, abbr, span.caps {
	font-size: 90%;
	letter-spacing: .07em;
	cursor: help;
	border-bottom: 1px dotted #3f3f3f;
}

.center { text-align: center;}
.alignright { float: right; }
.alignleft { float: left; }

hr {
	display: none;
	color: #FFFFFF;
}


.error, .message {
    padding: 12px;
    color: #red;
}
.message {
    background-color: green;
}

/* Header
------------------------------------------------------------------------- */

#header {
	display: block;
	background-color: #6D6D6D;
	background-image: url(imgs/cover2.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 400px;
	width: 756px;
	text-decoration: none;
	border-bottom: hidden;
}

#header a span {
	visibility: hidden;
}

/* #header h1 {
	margin: 0;
	color: #B0B9B4;
	text-shadow: #81A75B 2px 2px 2px;
	background: url(imgs/top_h1.gif) no-repeat bottom left;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-top: 50px;
	padding-right: 450px;
	padding-bottom: 10px;
	padding-left: 30px;
	font-style: italic;
	font-weight: bold;
	font-size: 150%;
} */
#header h1 a {
    text-decoration: none;
    border-bottom: none;
    color: #B0B5AF;
}
#header h1 a:hover {
    color: #FFFFFF;
    text-shadow: #fff 0 0 4px;
}


/* Search Form
------------------------------------------------------------------------------- */
/* Flex Search Form styles
------------------------------------------------ */

.FSF_input {
	background: #f6f6f6;
	color: #111;
	width: 55%;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 5px;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
    }
	
	#RightPost {
	margin-bottom: 2px;
	margin-left: 2px;
	padding: 5px;
	}
#summaryPost {
	padding: 5px;
	margin-bottom: 2px;
}
#summaryPost h3 {
	color: #FFFFFF;
	height: 52px!important; /* for most browsers */
	height /**/:57px; /* for IE5/Win */
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 60px;
	background-image: url(imgs/bgsummaryh3.gif);
	background-repeat: no-repeat;
	}
	
	#summaryPost a:hover {
	color: #FFFFFF;
	}
#summaryPost a:link  {
	color: #FFFFFF;
	font-size: 100%;
	}
#summaryPost a:visited {
	color: #FFFFFF;
	font-size: 100%;
	}
#summaryPost a:hover {
	color: #FFFFFF;
	}
#summaryPost a:link  {
	color: #FFFFFF;
	font-size: 100%;
	}
#summaryPost h3 a:visited {
	color: #FFFFFF;
	font-size: 100%;
	}
    
.FSF_input:focus {
    border-bottom: 1px solid #000;
    background: #fff;
    color: #111;
    }

.FSF_submit, .FSF_submit:focus {
	margin-left: 5px;
	height: 22px;
	width: 22px;
	border: 0;
	text-indent: -9999px;
	cursor: pointer;
	background-image: url(imgs/search.jpg);
	background-repeat: no-repeat;
    }
    
.submit:hover, .FSF_submit:hover {
	height: 22px;
	width: 22px;
	border: 0;
	cursor: pointer;
	background-image: url(imgs/search.jpg);
	background-repeat: no-repeat;
    }

/* Form styles
------------------------------------------------ */

/* Content 
------------------------------------------------------------------------- */
.post {
	background-color: white;
	border-bottom: 1px solid #ddd;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1.5em;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 1.5em;
	padding-left: 10px;
}

ddd

.post h3 {
    margin-top: 0;
    color: #FFFFFF;
}
.post ul li {
	background: url(imgs/tictac_orange.gif) no-repeat 0 6px;
	margin-left: 0em;
}



/* Related Links
------------------------------------------------------------------------- */
#navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}


/* UserComments
-------------------------------------------------------------------------
.comment {
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 10px;
    overflow: hidden;
}
.commentAlt {

}
.commentAuthor {

}
.commentMe {
    background-color: #ccf !important;
    padding-top: 5px;
}
.commentNum {
    font-family: Arial, sans-serif;
    font-size: 50px;
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    color: #f2f2f2;
    font-weight: bold;
    letter-spacing: -4px;
    z-index: 1;
}
.commentAlt .commentNum {
    color: #eaeaea;
}
.commentMe .commentNum {
    color: #b0b0ff;
}
.commentAuthor .commentNum {
    color: #f3f3bb;
}
.commentTitle {
    position: relative;
    z-index: 10;
    color: #999;
}
.commentTitle span {
    text-transform: uppercase;
    font-size: 86%;
}
.commentTitle strong {
    color: #693;
    font-size: 110%;
    text-transform: none;
    font-weight: normal;
    margin-right: 6px;
}
.comment .content {
    position: relative;
    z-index: 10;
}
*/

/* Sidebar
------------------------------------------------------------------------- */

#sidebar {
	font-size: 85%;
	line-height: 1.4em;
	color: #FFFFFF;
	margin-top: 0;
	margin-right: 25px;
	margin-bottom: 0;
	margin-left: 525px;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0px;
}

#sidebar h2 {
    padding: 25px 0 0 35px;
    color: #666;
    height: 32px !important; /* for most browsers */
    height /**/:57px; /* for IE5/Win */
}

#sidebar ul, #sidebar p {
    padding: 5px 15px 1em;
    margin-left: -5px;
}

#sidebar h3 {
	color: #EDEA47;
	font-size: 140%;
	border: none;
	background-color: #222222;
	background-repeat: no-repeat;
	background-position: left top;
	font-weight: bold;
	margin-top: 30px;
	margin-right: 0;
	margin-bottom: 12px;
	margin-left: 0;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 15px;
	}
#sidebar h3 a:hover {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 140%;
	
	}
	#sidebar h3 a:link, h3 a:visited {
	font-size: 120%;
	text-decoration: none;
	border-bottom: none;
	color: #FFFFFF;
	font-weight: bold;
	}

#sidebar h4 {
	color: #FFFFFF;
	font-size: 120%;
	border: none;
	margin-top: 30px;
	margin-right: 0;
	margin-bottom: 12px;
	margin-left: 5px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 0;
	}
	#sidebar h4 a:hover {
	color: #FFFFFF;
	font-size: 120%;
	
	}
	#sidebar h4 a:link  {
	color: #FFFFFF;
	font-size: 120%;
	padding-left: 5px;
	
	}
	#sidebar h4 a:visited {
	color: #FFFFFF;
	font-size: 100%;
	
	
	}

#sidebar img {
	vertical-align: middle;
	}


/* Footer
------------------------------------------------------------------------- */
#footer {
	margin: 0px;
	font-size: 85%;
	color: #FFFFFF;
	background-color: #666666;
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
	height: 90px;
	text-align: center;
	vertical-align: bottom;
}

/* #footer p {
	background-image: url(imgs/bottom_sash.gif);
	background-repeat: no-repeat;
	background-position: center top;
	padding: 20px;
} */

#footer a {
	border-bottom: none;
	color: #FFFFFF;
	font-weight: bold;
	border-bottom: 1px dotted #EDEA47;
}


fieldset {
    border: none;
}

legend {
	display: none;
}

/* images
------------------------------------------------------------------------------- */

p img {
	padding: 0;
	max-width: 100%;
}

img.centered {
	display: block;
	margin: 0 auto;
}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}
   /*MENU*/

#menu a:hover{
	color:#000000;
	/*
background-color: #8C8C8C;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 8px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #FFFFFF;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #999999; 
	
*/
}
#menu li{
   list-style:none;
   margin:0;
   height:auto !important;
   height:1%;
   line-height:1.6em;
   font-size:1em;
   color:#000;
   font-weight:bold;
   text-align:left;
}
#menu li a, #menu li.here a{
   color:#FFFFFF;   /* non current menu color */
   display:block;
   padding:2px;
   text-decoration:none;
}
#menu li.here{
   color:#FFFFFF;     /* current menu color */
   padding-top:1px ;
}
#menu ul{
   margin:0;
   padding-bottom:20px;
   padding-left:10px;
}
#menu ul ul{
   display:none;
}
#menu ul ul ul{
   display:none;
}
#menu li.here ul{
	display:block;
	padding:2px 0px 2px 15px;
	font-size:1em;
	color: #666666;
}
#menu li.here ul ul {
   display:none;
}
#menu li.here li.here ul {
   display:block;
}

/* Fixes for RichText widgets
------------------------------------------------------------------------------- */
.MODX_RichTextWidget {
	float: left;
}

.MODX_RichTextWidget a {
	border: 0px;
}
/* ---[ title box ]-------------------------------- */

#title {
	clear: left;
	padding: 25px 310px 25px 25px;
	background: #101010 ;
	}

#title h1 {
	margin: 0;
	padding: 0;
	font-size: 150%;
	font-weight: normal;
	color: #56d819;
	/*color: #EB9F3D;*/
	}
#title h1 span {
	color: #666;
	}
#title h2 {
	font-family: Verdana, sans-serif;
	margin: 5px 0 0 0;
	padding: 0;
	font-size: 90%;
	line-height: 1.5em;
	font-weight: normal;
	color: #888;
	}
#title a {
	border-bottom-color: #333;
	}
#title a:visited {
	color: #40659B;
	}
#title a:hover {
	color: #036;
	}
}

blockquote {
    margin: 0 0 0 30px;
    padding: 10px 0 0 20px;
    font-size: 88%;
    line-height: 1.5em;
    color: #666;
    
}

blockquote p { margin-top: 0; }

blockquote cite {
	margin: 5px 0 0;
	display: block;
}
/*  poll.css - stylesheet settings for poll snippets */

  .poll {
  width:100%;
  font-size:1em;
  margin:8;
  padding:0;

}
 .poll_container {
  width:90%;
  background-color:#6D6D6D;
  color:White;
  border:1px solid #A5C51A;
  padding-top:0.5em;
  padding-bottom:0.5em;
  margin-left:auto;
  margin-right:35;
}

.poll_comments_container {
  width:100%;
  background-color:#6D6D6D;
  color:White;
  border:1px solid black;
  padding-top:.5em;
  padding-bottom:.5em;
  padding-left:.5em;
  padding-right:.5em;
  margin-left:auto;
  margin-right:auto;
}
.poll_question {
  width:100%;
  text-align:center;
}
.poll_row_container {
  width:100%;
  padding:.1em 0;
}
.poll_choice {
  width:30%;
  float:left;
  text-align:left;
  padding-left:0em;
}
.poll_votes {
  width:15%;
  float:left;
  padding-right:.5em;
  text-align:right;
}
.poll_bar_container {
  width:35%;
  height:.98em;
  background-color:#6D6D6D;
  border:1px solid black;
  float:left;
  margin:.1em;
}
.poll_bar {
  height:.98em;
  background-color:#00FF7F;
  float:left;
  margin:0;
  padding:0;
}
.poll_percent {
  text-align:right;
  padding-right:1em;
  margin-left:2;
  margin-right:2;
}
.poll_totalvotes {
  width:45%;
  text-align:right;
}
.float_left_text_right {
  width:50%;
  float:left;
  text-align:right;
  margin:0;
  padding:0;
}
.float_right_text_left {
  width:50%;
  float:right;
  text-align:left;
  margin:0;
  padding:0;
}
.space_line {
  clear: both; margin: 0; padding: 0; width: 90%;
}

/* END - poll.css */

132 Posts

motoxer4533 Reply #2, 17 years, 10 months ago

Try adding a   in your header div:

<div id="header">
 
</div>

1,624 Posts

cipa Reply #3, 17 years, 10 months ago

or add this to your template

<base href="[(site_url)]" />

Responsive CSS Grid: cipalabs.com/projects/metal/
Blog: MODX Tutorials & Articles

6 Posts

fuut Reply #4, 17 years, 10 months ago

Thanks guys/girls for your help, but the   didn’t work and the base href line is already in the template. Any other suggestions?! rolleyes

MODX Staff
2,502 Posts

Jay Gilmore Reply #5, 17 years, 10 months ago

First of all why don’t you put something in the header like the site name since if someone turns images off there willbe a huge void and no alt because you are using CSS.

I’d try changing the path from imgs/cover2.jpg to ./imgs/cover2.jpg My guess is that IE7 views the first relative to root an not to the css file.

Cheers,

jay

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

6 Posts

fuut Reply #6, 17 years, 10 months ago

Thnx Jay, i’ll put someting in the header. I tried changing the path to ./imgs/cover2.jpg and to /assets/templates/greengrey/imgs/cover2.jpg, both didn’t work (in IE, in FF and Safari it does work). It’s probably clashing with another part of the css. I don’t know enough of css to sort this out. So i’ll think i go with the plain old html <img src>. Thanks anyway!

edit: i found that the direct url to the image:

http://www.pleen.nl/assets/templates/greengrey/imgs/cover2.jpg

works in FF. In IE i get the well known red X. Turned out that the jpg was edited in PS and saved in CMYK. I opened the jpg, saved it as RGB and then it worked! laugh

MODX Staff
2,502 Posts

Jay Gilmore Reply #7, 17 years, 10 months ago

I’d have stuck that header image in the header source anyway. It has informational and not just decorative value.

Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub

22 Posts

amitavroy Reply #8, 17 years, 10 months ago

i think the problem is in the div
try with a blank image may be
a gif

Regards
Amitav Roy
Web Designer
Website: http://www.pixelgroups.com
Portal: http://www.creativeporta.com

6 Posts

fuut Reply #9, 17 years, 10 months ago

see my last post, it’s already solved. But thanks anyway! cool