...

View Full Version : Need CCS Help - Content not showing in IE



loafroaster
10-21-2010, 09:43 PM
Hi all,

I'm relatively new to the whole CCS lark, and I've been working on a project for a client. The content looks fine in Firefox for Mac and PC, but in IE it's displaying the background image only. I'm not sure if I need to add/subtract something in the code, any help would be greatly appreciated!

Source Code:

<html>
<head>
<title>R&amp;R Engineering</title>
<!-- STEP ONE: insert path to SWFObject JavaScript -->
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>

<!-- STEP TWO: configure SWFObject JavaScript and embed CU3ER slider -->
<script type="text/javascript">
var flashvars = {};
flashvars.xml = "config.xml";
flashvars.font = "font.swf";
var attributes = {};
attributes.wmode = "transparent";
attributes.id = "slider";
swfobject.embedSWF("cu3er.swf", "cu3er-container", "1020", "427", "9", "expressInstall.swf", flashvars, attributes);
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
<!--
body {
margin: 5% auto;
text-align:center;
margin-left: 0px;
margin-top: 0%;
margin-right: 0px;
margin-bottom: 0%;
background-image: url(images/bkg.jpg);
background-repeat: repeat;
text-decoration: none;
}
#cu3er-container {
width:1020px;
outline:0;
}
#Table_01 tr td table {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
color: #000;
}
#Table_01 tr td #Table_2 tr td p {
font-size: 14px;
}
#Table_01 tr td #Table_2 tr td {
color: #000;
}
#Table_01 tr td p {
font-family: Arial, Helvetica, sans-serif;
color: #3378B3;
font-size: 12px;
}
#Table_01 tr td table tr td {
color: #000;
}
#Table_01 tr td table {
font-size: 12px;
color: #FFF;
}
#footer{
font-size: 12px;
color: #FFF;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
}
.tabble {
font-size: 12px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: underline;
color: #3777B5;
}
a:active {
text-decoration: none;
color: #FFF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('sliced_images/images/menu_01_highlighted_04.png','sliced_images/images/menu_01_highlighted_06.png','sliced_images/images/menu_01_highlighted_08.png','sliced_images/images/menu_01_highlighted_10.jpg')">
<table width="1020" height="950" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">

<tr>
<td height="100"><table id="Table_" width="1020" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/menu_01_01.png" width="544" height="1" alt=""></td>
<td rowspan="2"><img src="sliced_images/images/menu_01_02.png" width="66" height="100" alt=""></td>
<td><img src="images/menu_01_03.png" width="8" height="1" alt=""></td>
<td rowspan="2"><a href="services.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('services','','sliced_images/images/menu_01_highlighted_04.png',1)"><img src="sliced_images/images/menu_01_04.png" alt="services" name="services" width="87" height="100" border="0"></a></td>
<td><img src="images/menu_01_05.png" width="8" height="1" alt=""></td>
<td rowspan="2"><a href="about.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','sliced_images/images/menu_01_highlighted_06.png',1)"><img src="sliced_images/images/menu_01_06.png" alt="about us" name="About Us" width="93" height="100" border="0"></a></td>

<td><img src="images/menu_01_07.png" width="4" height="1" alt=""></td>
<td rowspan="2"><a href="location.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Location','','sliced_images/images/menu_01_highlighted_08.png',1)"><img src="sliced_images/images/menu_01_08.png" alt="location" name="Location" width="88" height="100" border="0"></a></td>
<td><img src="images/menu_01_09.png" width="5" height="1" alt=""></td>
<td rowspan="2"><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','sliced_images/images/menu_01_highlighted_10.jpg',1)"><img src="sliced_images/images/menu_01_10.jpg" alt="contact" name="Contact" width="82" height="100" border="0"></a></td>
<td><img src="images/menu_01_11.png" width="35" height="1" alt=""></td>
</tr>
<tr>
<td><img src="sliced_images/images/menu_01_12.jpg" width="544" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_13.jpg" width="8" height="99" alt=""></td>

<td><img src="sliced_images/images/menu_01_14.jpg" width="8" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_15.jpg" width="4" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_16.jpg" width="5" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_17.jpg" width="35" height="99" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td height="426" style="background-image: url(images/index_02.jpg);"><div id="cu3er-container">

<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100" border="0" align="center" cellpadding="0" cellspacing="20">
<tr>
<td><img src="sliced_images/images/index_middle_title_01.jpg" width="214" height="42"></td>

<td rowspan="3"><img src="sliced_images/images/spacer.jpg" width="2" height="199"></td>
<td><img src="sliced_images/images/index_middle_title_03.jpg" width="214" height="42"></td>
<td rowspan="3"><img src="sliced_images/images/spacer.jpg" alt="" width="2" height="199"></td>
<td><img src="sliced_images/images/index_middle_title_05.jpg" width="214" height="42"></td>
<td rowspan="3"><img src="sliced_images/images/spacer.jpg" alt="" width="2" height="199"></td>
<td><img src="sliced_images/images/index_middle_title_07.jpg" width="214" height="42"></td>
</tr>
<tr>
<td valign="top"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Our purpose built facility, allows us to meet any industrial requirement.</td>

<td valign="top"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> R&amp;R are a specialist power and control, systems integrator. We design all panels to suit the customers&rsquo; specific requirement and application; all built using highest quality, industry leading components.</td>
<td valign="top"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Our engineers use the very latest manufacturing techniques and panel building equipment. R&amp;R are expert in PLC software, allowing traceability through all steps of the process.</td>
<td valign="top">R&amp;R is committed to operating in a high quality production environment and is proud to have ISO 9001 accreditation.</td>
</tr>

<tr>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
<td align="center">&nbsp;</td>
</tr>
</table>
<p><img src="sliced_images/images/spacer02.jpg" width="829" height="10" align="middle"></p>
<table id="Table_2" width="920" height="167" border="0" cellpadding="0" cellspacing="0">

<tr>
<td colspan="3"><img src="sliced_images/images/index_quoth_01.jpg" width="175" height="33" alt=""></td>
<td width="316">&nbsp;</td>
</tr>
<tr>
<td width="3">&nbsp;</td>
<td colspan="3" rowspan="2" valign="top"><br>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> R&amp;R is an innovative, high quality systems integrator, experienced in the design and manufacture of process control systems for over 20 years, utilizing new and innovative solutions for industry.<br> <br></td>

</tr>
<tr>
<td><img src="sliced_images/images/index_quoth_05.jpg" width="3" height="62" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="sliced_images/images/index_quoth_06.jpg" width="62" height="63" alt=""></td>
<td width="530"><font size=4>R &amp; R lead the way in Process, Control, Design and Manufacture</font></td>
<td><img src="sliced_images/images/index_quoth_06_02.jpg" width="62" height="63" alt=""></td>

</tr>

</table>
<br>
<p><br>
<br>
</p></td>
</tr>
</table>
<table width="684" border="0" align="center" cellpadding="0" cellspacing="4">
<tr class="tabble">

<td align="center" valign="middle">Copyright &copy; - 2010 R&R Engineering - All rights reserved</td>
<td align="center" valign="middle"><a href="index.html">Home</a></td>
<td align="center" valign="middle">l</td>
<td align="center" valign="middle"><a href="services.html">Services</a></td>
<td align="center" valign="middle">l</td>

<td align="center" valign="middle"><a href="aboutus.html">About Us</a></td>
<td align="center" valign="middle">l</td>
<td align="center" valign="middle"><a href="location.html">Location</a></td>
<td align="center" valign="middle">l</td>
<td align="center" valign="middle"><a href="contactus.html">Contact us</a></td>
</tr>

</table>
<!-- End ImageReady Slices -->
</body>
</html>

Gibson98
10-21-2010, 10:04 PM
Hey

Do you use dreamweaver? If so in the newer versions it has a browser script analyser and I think it tells you the errors that you will have when you run it.

I can't really help as currently in my iPad and not near a computer :(

What I would do is gradually remove the CSS tags from the places that say "class=" and see if anything appears when you find the one that makes the stuff appear you work in that Css code area.

Also have your tried using div tags as these are alot more up to date and are often a little more simpler :)

Hope that helps?
Joe

loafroaster
10-21-2010, 10:43 PM
Thanks! I'll give that a try...

UPDATE - No joy, there's no problem according to Dreamweaver, and removing the class tags didn't have any effect. Maybe I need to start from scratch to find the problem?

tracknut
10-22-2010, 12:19 AM
Where is the end of this comment?



</script>
<style type="text/css">
<!--
body {
margin: 5% auto;

maxhudson
10-22-2010, 12:51 AM
1. You should use external javascript and css sheets. It makes everything much more easy to find the problem and is just more organized.

2.
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<title>R&amp;R Engineering</title>
<!-- STEP ONE: insert path to SWFObject JavaScript -->

<script type="text/javascript" src="js/swfobject/swfobject.js">
</script><!-- STEP TWO: configure SWFObject JavaScript and embed CU3ER slider -->

<script type="text/javascript">

var flashvars = {};
flashvars.xml = "config.xml";
flashvars.font = "font.swf";
var attributes = {};
attributes.wmode = "transparent";
attributes.id = "slider";
swfobject.embedSWF("cu3er.swf", "cu3er-container", "1020", "427", "9", "expressInstall.swf", flashvars, attributes);
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">

<!--
body {
margin: 5% auto;
text-align:center;
margin-left: 0px;
margin-top: 0%;
margin-right: 0px;
margin-bottom: 0%;
background-image: url(images/bkg.jpg);
background-repeat: repeat;
text-decoration: none;
}
#cu3er-container {
width:1020px;
outline:0;
}
#Table_01 tr td table {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
color: #000;
}
#Table_01 tr td #Table_2 tr td p {
font-size: 14px;
}
#Table_01 tr td #Table_2 tr td {
color: #000;
}
#Table_01 tr td p {
font-family: Arial, Helvetica, sans-serif;
color: #3378B3;
font-size: 12px;
}
#Table_01 tr td table tr td {
color: #000;
}
#Table_01 tr td table {
font-size: 12px;
color: #FFF;
}
#footer{
font-size: 12px;
color: #FFF;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
}
.tabble {
font-size: 12px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: underline;
color: #3777B5;
}
a:active {
text-decoration: none;
color: #FFF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #FFFFFF;
}
span.c2 {font-size: 120%}
td.c1 {background-image: url(images/index_02.jpg);}
</style>
</head>
<body onload="MM_preloadImages('sliced_images/images/menu_01_highlighted_04.png','sliced_images/images/menu_01_highlighted_06.png','sliced_images/images/menu_01_highlighted_08.png','sliced_images/images/menu_01_highlighted_10.jpg')">
<table width="1020" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td height="100">
<table id="Table_" width="1020" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/menu_01_01.png" width="544" height="1" alt=""></td>
<td rowspan="2"><img src="sliced_images/images/menu_01_02.png" width="66" height="100" alt=""></td>
<td><img src="images/menu_01_03.png" width="8" height="1" alt=""></td>
<td rowspan="2"><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','sliced_images/images/menu_01_highlighted_04.png',1)"><img src="sliced_images/images/menu_01_04.png" alt="services" name="services" width="87" height="100" border="0"></a></td>
<td><img src="images/menu_01_05.png" width="8" height="1" alt=""></td>
<td rowspan="2"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Us','','sliced_images/images/menu_01_highlighted_06.png',1)"><img src="sliced_images/images/menu_01_06.png" alt="about us" name="About Us" width="93" height="100" border="0"></a></td>
<td><img src="images/menu_01_07.png" width="4" height="1" alt=""></td>
<td rowspan="2"><a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Location','','sliced_images/images/menu_01_highlighted_08.png',1)"><img src="sliced_images/images/menu_01_08.png" alt="location" name="Location" width="88" height="100" border="0"></a></td>
<td><img src="images/menu_01_09.png" width="5" height="1" alt=""></td>
<td rowspan="2"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','sliced_images/images/menu_01_highlighted_10.jpg',1)"><img src="sliced_images/images/menu_01_10.jpg" alt="contact" name="Contact" width="82" height="100" border="0"></a></td>
<td><img src="images/menu_01_11.png" width="35" height="1" alt=""></td>
</tr>
<tr>
<td><img src="sliced_images/images/menu_01_12.jpg" width="544" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_13.jpg" width="8" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_14.jpg" width="8" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_15.jpg" width="4" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_16.jpg" width="5" height="99" alt=""></td>
<td><img src="sliced_images/images/menu_01_17.jpg" width="35" height="99" alt=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="426" class="c1">
<div id="cu3er-container"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a></div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100" border="0" align="center" cellpadding="0" cellspacing="20">
<tr>
<td><img src="sliced_images/images/index_middle_title_01.jpg" width="214" height="42" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
<td rowspan="3"><img src="sliced_images/images/spacer.jpg" width="2" height="199" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
<td><img src="sliced_images/images/index_middle_title_03.jpg" width="214" height="42" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
<td rowspan="3"><img src="sliced_images/images/spacer.jpg" alt="" width="2" height="199"></td>
<td><img src="sliced_images/images/index_middle_title_05.jpg" width="214" height="42" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
<td rowspan="3"><img src="sliced_images/images/spacer.jpg" alt="" width="2" height="199"></td>
<td><img src="sliced_images/images/index_middle_title_07.jpg" width="214" height="42" alt="** PLEASE DESCRIBE THIS IMAGE **"></td>
</tr>
<tr>
<td valign="top">Our purpose built facility, allows us to meet any industrial requirement.</td>
<td valign="top">R&amp;R are a specialist power and control, systems integrator. We design all panels to suit the customers' specific requirement and application; all built using highest quality, industry leading components.</td>
<td valign="top">Our engineers use the very latest manufacturing techniques and panel building equipment. R&amp;R are expert in PLC software, allowing traceability through all steps of the process.</td>
<td valign="top">R&amp;R is committed to operating in a high quality production environment and is proud to have ISO 9001 accreditation.</td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>
<p><img src="sliced_images/images/spacer02.jpg" width="829" height="10" align="middle" alt="** PLEASE DESCRIBE THIS IMAGE **"></p>
<table id="Table_2" width="920" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="sliced_images/images/index_quoth_01.jpg" width="175" height="33" alt=""></td>
<td width="316"> </td>
</tr>
<tr>
<td width="3"> </td>
<td colspan="3" rowspan="2" valign="top"><br>
R&amp;R is an innovative, high quality systems integrator, experienced in the design and manufacture of process control systems for over 20 years, utilizing new and innovative solutions for industry.<br>
<br></td>
</tr>
<tr>
<td><img src="sliced_images/images/index_quoth_05.jpg" width="3" height="62" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="sliced_images/images/index_quoth_06.jpg" width="62" height="63" alt=""></td>
<td width="530"><span class="c2">R &amp; R lead the way in Process, Control, Design and Manufacture</span></td>
<td><img src="sliced_images/images/index_quoth_06_02.jpg" width="62" height="63" alt=""></td>
</tr>
</table>
<br>
<p><br>
<br></p>
</td>
</tr>
</table>
<table width="684" border="0" align="center" cellpadding="0" cellspacing="4">
<tr class="tabble">
<td align="center" valign="middle">Copyright - 2010 R&amp;R Engineering - All rights reserved</td>
<td align="center" valign="middle"><a href="index.html">Home</a></td>
<td align="center" valign="middle">l</td>
<td align="center" valign="middle"><a href="services.html">Services</a></td>
<td align="center" valign="middle">l</td>
<td align="center" valign="middle"><a href="aboutus.html">About Us</a></td>
<td align="center" valign="middle">l</td>
<td align="center" valign="middle"><a href="location.html">Location</a></td>
<td align="center" valign="middle">l</td>
<td align="center" valign="middle"><a href="contactus.html">Contact us</a></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Try this

loafroaster
10-23-2010, 11:24 AM
Where is the end of this comment?



</script>
<style type="text/css">
<!--
body {
margin: 5% auto;


Success! This looks to have done the trick; thanks to all for contributing :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum