[SOLVED] Header only renders correctly in IE

[Rich8621]

I am using CMSMS 1.5.2 with the default template. There is one minor issue that I am sure has a simple solution but I can't figure it out. Any help is greatly appreciated.

The header with the logo only renders correctly in IE. It does not show in Firefox (PC or Mac), Safari (PC or Mac), and Chrome. Please see pictures below.

IE


Chrome


Safari


Firefox


The edited portion of the stylesheet are highlighted below.

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 130px;    /* adjust according your image size */
   background: #385C72;           
}

div#header h1 a {
/* you can set your own image here */
   background: #ffffff url(/uploads/images/Shangri-La LOGO small.jpg) no-repeat 0 12px;
   display: block;
   height: 125px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

/* position for the search box */
div#search {
   float: right;
   width: 27em;    /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
}.......

Any ideas on how to fix it so that it will render in all browsers?
Many thanks in advance.

Rich

[Rolf]

Hey Rich8621,

Try to delete the " / " before uploads in the image url.

Rolf 

[Rich8621]

Thanks Rolf for replying 
Removing "/" did not make a difference, however your tip made me look closer at the line.
Changing from
background: #ffffff url(/uploads/images/Shangri-La LOGO small.jpg) no-repeat 0 12px;
to
background: #ffffff url(/uploads/images/Shangri-La%20LOGO%20small.jpg) no-repeat 0 12px;
solved the problem.

Thanks again.

[Rolf]

Cool