Using CSS and XHTML template - images won't display

rvm · Joined: 24 Jul 2008 Posts: 2

Hello,

I am a forum newbie! Thank you in Advance to everyone who offers advise!!

I'm not sure if this should be posted in HTML or CSS as I don't know if the problems are XHTML or CSS. Sorry if I posted in the incorrect section!

I am using this template w/out the side bars and a few additional changes: http://www.1234.info/webtemplates/multiflex5

My web site only needs to function in IE 6X and above.

I have tried to solve code my problems by using http://validator.w3.org/#validate_by_uri+with_options.

My primary problem is: I replaced the clock-type image - or whatever that image is at the top left of the phrase "MultiFlex 5" - and now the image does not display. In the original template the clock-type image was an .gif. I replaced it w/ .png image and of course, changed the name of the file accordingly.

I've tried for several weeks to repair the problem(s). I searched this forum and the 'net and tried dozens of changes. I'm really frustrated at this point! If anyone can help, I am thankful!

Pertinent XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">



<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="3600" />
<meta name="revisit-after" content="2 days" />
<meta name="robots" content="index,follow" />
<meta name="publisher" content="" />
<meta name="copyright" content="" />
<meta name="author" content="" />
<meta name="distribution" content="global" />
<meta name="description" content="DON"T NEED ALL THIS" />
<meta name="keywords" content="DON"T NEED ALL THIS" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/mf54_reset.css" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/mf54_grid_nosidebar.css" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="./css/mf54_content_nosidebar.css" />
<link rel="icon" type="image/x-icon" href="./img/favicon.ico" />
<title> BALH, BLAH, BLAH</title>
</head>





<body>


<div class="container">


<div class="corner-page-top"></div>
<div class="header">
<div class="header-top">


<a class="sitelogo" href="" title="Logo"><img class="image" src=./img/bg_logo.png" alt="" width="169" height="125" /></a>
<div class="sitename">
<h1><b>John Doe</b></h1>
<h2><b>111.222.3333</b></h2>
</div>

Here's the Pertinent CSS:

/******************/
/* GLOBAL LAYOUT */
/******************/

body {font-size:62.5%; background-color:rgb(240,240,240); font-family:arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/
.container {width:978px; padding-top:10px; padding-bottom:20px; margin:0 auto; font-size:1.0em;}

.header {width:958px; min-height:130px /*Non-IE6*/ ; height:auto !important /*Non-IE6*/; height:130px /*IE6*/ ; border-left:solid 10px rgb(200,200,200); border-right:solid 10px rgb(200,200,200); background:rgb(225,225,225) url(../img/bg_header.jpg) repeat-x /*Total header background image entered here. Height: 125px*/ ; font-size:1.0em;}

.header-top {clear:both; width:174px; height:125px; background:rgb(218,218,218) url(../img/bg_logo.png) repeat-y /*Top header background image entered here. Height: 100px*/; font-size:1.0em;}; font-size:1.0em;}

.header-bottom {clear:both; width:958px; min-height:30px /*Non-IE6*/; height:auto !important /*Non-IE6*/; height:30px /*IE6*/; background:rgb(225,225,225) url() repeat-x /*Bottom header background image entered here: Height: 25 px*/; font-size:1.0em;}
.navbar {white-space:nowrap /*IE hack*/; float:left; width:958px; border-left:solid 10px rgb(200,200,200); border-right:solid 10px rgb(200,200,200); background-color:rgb(225,225,225); font-family:tahoma,arial,sans-serif; font-size:130% !important /*Non-IE6*/; font-size:120% /*IE6*/;} /*Color navigation bar normal mode*/
.main {clear:both; width:958px; padding:10px 0 20px 0; border-left:solid 10px rgb(200,200,200); border-right:solid 10px rgb(200,200,200); background-color:rgb(200,200,200); font-size:1.0em;}
.content {display:inline; /*Fix IE floating margin bug*/; float:left; width:958px; background-color:rgb(200,200,200); font-size:1.0em; overflow:visible !important /*Non-IE6*/; overflow:hidden /*IE6*/;}
.footer {clear:both; width:958px; padding:1.0em 0 1.0em 0; border-left:solid 10px rgb(200,200,200); border-right:solid 10px rgb(200,200,200); background-color:rgb(225,225,225); font-size:1.1em !important /*Non-IE6*/; font-size:1.0em /*IE6*/; overflow:visible !important /*Non-IE6*/; overflow:hidden /*IE6*/;}

/****************/
/* HEADER-TOP */
/****************/

/* SITENAME AND SLOGAN */
.sitelogo {width:169px; height:125px; position:absolute; z-index:1; margin:1px 0 0 2px; background:url(../img/bg_logo.png);}
.sitename {width:300px; height:70px; position:absolute; z-index:1; margin:15px 0 0 185px; overflow:hidden;}
.sitename h1 {font-family:"trebuchet ms",arial,sans serif; font-weight:normal; font-size:230% !important /*Non-IE6*/; font-size:220% /*IE6*/;}
.sitename h2 {font-family:"trebuchet ms",arial,sans serif; margin-top:-5px; padding-bottom:2px; color:rgb(0,0,0); height:20px; font-weight:normal; font-size:210% !important /*Non-IE6*/; font-size:200% /*IE6*/;}

sticks464 · Joined: 31 Dec 2006 Posts: 993

I take it you are using the mf54_grid_nosidebar.html and the mf54_grid_nosidebar.css pages. Is your new image in the img folder? What IE version are you previewing with? IE6 and later do not recognize png's (maybe that's why png's weren't originally used). Use another browser like firefox or safari to preview.

rvm · Joined: 24 Jul 2008 Posts: 2

Thank you! I took your advise! I changed the image file from .png to .jpg. I also took out the code in the HTML pointing to the image file as it was overlaying the file read from CSS.

What's really strange is once I changed 3 other image files to .jpg from .png, they would not display. I changed them back to .png and they display OK. I even checked them in Vista (don't recall the version of IE).

BTW, Yes, I am using the no-sidebar files.

I have a few other versions of IE to test, but this seems to have solved my problems. I wish I had asked earlier and not pulled my hair out!

Many Thank yous!