Have something to say? Contribute New Article Reply to this Article
CSS not showing up in IE8
I am very new to CSS and HTML. I have built a static demo version of a site that I want to build. my site looks great in Chrome, not as great in firefox and absolutely terrible in IE8. I thought I was using standard CSS styling but it seems that IE is not applying any of my CSS. I have tried searching for an answer on google but I think my problem is probably a simpler fundamental flaw than the discussions that seem to be online. Anyone willing help a noob out?
Thanks
Well, start with posting a link to that page.
Hi there, the page is just a static html page hosted on a network drive which I have set up as a Demo before spending time doing the backend. So it is not a bonfide site. I am using the page for presentation purposes to communicate the vision of what would essentially be an intranet site. I can send the files if need be. I have tried messing around with the declaration but that has not worked either.
Well, in any case, we can't just guess problems.
You can post the code here, or a link, but both would be best.
Well, in any case, we can't just guess problems. You can post the code here, or a link, but both would be best.
Well here is the code for the document. like I say, everything works in Chrome and FF but the CSS doesn't load in IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ISO Manager Home</title>
<link rel="stylesheet" href="Style1.css" type="text/css" media="all"/>
</head>
<body>
<!--Custom Content Here-->
<div id="spaceAge" ><b>CMS</b> project.
<img id="shadow_img" src="united_logo.jpg" align="right"/>
</div>
<p>
<!--Custom Content Here-->
<!--This is the top of the table-->
<!--Outter table start-->
<table>
<!--This table will have only one row-->
<tr>
<!--Column 1-->
<td style="width:200px;">
<table>
<tr>
<td><img id="shadow_img" src="myPhoto.jpg" align="left"/>
</td>
</tr>
<tr>
<td><a href="Tyrone_Profile.html">Profile</a>
</td>
</tr>
<tr>
<td><a href="Tyrone_Projects.html">Projects</a>
</td>
</tr>
</table>
</td>
<!--Column 2-->
<td style="width:600px;">
</td>
<!--Column 3-->
<td>
<table>
<tr>
<!--News feed header-->
<td><div>Your news feed</div></td>
</tr>
<tr>
<!--news feed body-->
<td id="clear">
<div class="newsFeed">
<!--first item-->
<p class="list_element"> You have been asked by
<a href="admin profile.html">Mr Admin</a> to read the <a href="ISO_help.html"> help<a> section.
</p>
<!--second item-->
<p class="list_element"> <a href="BigBoss.html">Big Boss</a> requested that you review the
<a href="JobNumber32.html">nice project</a> meeting <a href="example_minutes.html">minutes</a></p></div></td>
</tr>
<tr>
<!--The heads up header-->
<td style="width:250px"><div>Coming up this week</div></td>
</tr>
<tr>
<td id="clear">
<div class="nextWeek">
<p class="list_element" style="display:none">Casting level 4 slab on <a href="C2088.html">OVD 919</a></p>
<p class="list_element"> <a href="C2088/drawings.html">Generator Tender Drawings</a>, Check requested by
<a href="MusaS.html">Musa Solomon</a>
</p>
</div>
</td>
</tr>
</table>
</tr></td>
<!--This is the end of the one row for the outter table-->
</tr>
</table>
</p>
<!--Project footer-->
<p id="backteal">
</p>
<p id="claim">Acompany Content Management System - Version 0.1 </p>
<p id="claim">©Copyright Thiscompany - 2011</p>
</body>
</html>Check the code with the w3c validator. There are quite some problems with it.
Well, I've now tried that and the problems seem nonsensical to me.
For example the first error says:
✉
The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
however I can't seem to see any additional unclosed tags:
<head>
<title>ISO Manager Home</title>
<link rel="stylesheet" href="Style1.css" type="text/css" media="all"/>
</head>
why does it work perfectly in Chrome but not in IE? I am really confused about this. if there were serious problems with my syntax I would have expected that Chrome would also act strange. perhaps I am mixing versions of CSS and HTML since I have learned what I know from a few online tuts, blogs and sites such as this one??
The problems are not non-sensical, but perhaps a bit cryptical :) Chrome apparently is very good in trying to figure out what you meant.
For that error you mentioned, if you fix the first error (line 7) it will go away. If you check "Clean up Markup with HTML-Tidy", you'll get some help fixing everything.
The problems are not non-sensical, but perhaps a bit cryptical :) Chrome apparently is very good in trying to figure out what you meant. For that error you mentioned, if you fix the first error (line 7) it will go away. If you check "Clean up Markup with HTML-Tidy", you'll get some help fixing everything.
OK, so I have fixed the errors which were essentially the fact that I used the same id tags with the same reference more than one instead of having it as a CSS class
the problem still exists even though the HTML is 100%. so I guess next step is - here is my (butchered no doubt) css
body
{
background-color:#FFFFFF;
background-position:center top;
text-align:center;
}
input
{
margin:5px;
}
h1
{
color:#000066;
text-align:center;
font-size:25px;
font-style:bold;
font-family:"Arial"
}
.shadow
{
box-shadow: rgba(0,0,12,0.25)9px 9px 8px;width:900;
}
.instruct
{
color:red;
font-style:bold;
}
.outline
{
border-style:double;
border-width:2px;
border-collapse:collapse;
}
h2
{
color:#000066;
text-align:center;
font-size:20px;
font-family:"Arial";
}
div
{
text-align:left;
font-size:20px;
}
div.newsFeed
{
height:400px;
width:250px;
}
div.nextWeek
{
height:400px;
width:250px;
}
p.list_element
{
text-align:left;
font-family:"Arial";
font-size:15px;
margin-top:15px;
margin-left:10px;
margin-right:10px;
padding:4px;
border-radius:10px;
background-color:rgba(0,120,255,0.2);
}
p
{
text-align:center;
font-family:"Arial";
font-size:20px;
border-radius:10px;
}
tr
{
margin:auto;
font-family:"Arial";
vertical-align:top;
}
td
{
background-color:rgba(0,102,255,0.2);
border-radius:15px;
}
table,th
{
margin:auto;
font-family:"Arial";
border-radius:10px;
}
img
{
margin:10px;
}
.clear
{
background-color:#FFFFFF;
}
.claim
{
color:grey
}
#banner
{
color:aqua
}
#backteal
{
background-color:rgba(0,128,128,0.8);
box-shadow: rgba(0,0,12,0.25)9px 9px 8px;
color:#FFFFFF;
}
.shadow_img{box-shadow: rgba(0,0,12,0.25)9px 9px 8px;}
#w_250{
width:250;}
#spaceAge{
padding-left:20px;
font-family:"courier";
font-size:40px;
color:#FFFFFF;
background-color:rgba(0,128,128,0.8);
border-radius:10px;
}
Don't laugh, I'm new to this :P
Also for this the validator gives some useful suggestions: http://jigsaw.w3.org/css-validator/validator
Make sure to set the CSS version to CSS3, otherwise you'll get a lot of useless errors.
This article has been dead for over three months
You
© 2012 DaniWeb® LLC
