Ok, as usual, Internet Explorer is playing games with me in rendering code.
I need a fresh set of eyes to look things over, cuz apparently I am missing it.
Anyway, in the center of the page there should be some black text that says "Heading" a few lines of text, then "Another Header?".
However, in Explorer, somehow the background image, and indeed even just specifying a background color will prevent it from showing up.
However, if you scroll over the text, then release the mouse button, it stays, even when clicking to a different part of the page. Oh, it is black text against a light background, and/or a background color specified as white...so it is not a problem of text color blending into a similarly colored background.
Similarly, there should be a black border around the "Penguin" logo and the gray and black banner at the top, tho again, IE is not showing it.
I have pinpointed (I believe) that part of the css that is causing it, but for the life of me I am glancing right over the culprit.
Anyway, here is the part I suspect:
#container
{
background-image:url(images/ice_background.jpg);
background-color:#ffffff;
margin:10px 10px 10px 10px;
padding:20px 20px 20px 20px;
}
Here is the entire css:
body
{
background-color:#cccccc;
width:100%;
}
a
{
color:#666666;
text-decoration:underline;
}
a:hover
{
color:#cccccc;
}
a:visited
{
color:#cccccc;
}
#container
{
background-image:url(images/ice_background.jpg);
background-color:#ffffff;
margin:10px 10px 10px 10px;
padding:20px 20px 20px 20px;
}
/* header / flag */
#banner
{
font-family:Verdana, 'Trebuchet MS', Arial, Sans-Serif;
margin:0px 0px 10px 0px;
padding:5px 5px 5px 5px;
border-color:#000000;
border-style:solid;
border-width:2px;
}
#banner img
{
border-right-color:#cccccc;
border-right-style:dashed;
border-right-width:1px;
}
#sitename
{
background-color:#ccc;
margin:6px 0px 0px 150px;
padding:2px 0px 2px 5px;
width:100%;
}
#sitename a
{
color:#000;
font-size:28pt;
text-decoration:none;
font-weight:bold;
}
#sitephrase
{
background-color:#000;
color:#fff;
font-size:28pt;
margin:0px 0px 6px 150px;
padding:2px 0px 2px 5px;
width:100%;
}
/* top navigation menu */
#topnav
{
font-family:Verdana, 'Trebuchet MS', Arial, Sans-Serif;
font-size:10pt;
font-variant:small-caps;
background-color:#000000;
width:100%;
}
#topnav ul
{
list-style:none;
padding:5px 0px 0px 130px;
margin:10px 0px 10px 0px;
width:100%;
}
#topnav li
{
display:inline;
}
#topnav li a
{
color:#cccccc;
padding:0px 5px 0px 5px;
margin:0px 0px 0px 0px;
border-color:#ccc;
border-width:1px;
border-style:solid;
border-bottom-color:#fff;
text-decoration:none;
width:auto;
}
#topnav a:hover
{
color:#fff;
border-color:#fff;
background-color:#000000;
}
#topnav a.current
{
color:#666666;
background-color:#fff;
border-color:#ccc;
border-bottom-color:#fff;
}
#topnav a.current:hover
{
color:#000000;
background-color:#fff;
border-color:#cccccc;
border-bottom-color:#ffffff;
}
#leftcol
{
width:120px;
float:left;
margin:0px 0px 0px 0px;
}
#leftcol img
{
border-width:1px;
border-color:#000;
border-style:solid;
width:120px;
margin:0px 0px 10px 0px;
}
#sidenav
{
font-family:Trebuchet MS, Verdana, Arial, Sans-Serif;
font-size:10pt;
font-variant:small-caps;
}
#sidenav ul
{
/*display:block;*/
list-style:none;
margin:5px 5px 5px 0px;
padding:5px 5px 5px 0px;
}
#sidenav li
{
margin:0px 0px 2px 0px;
padding:0;
}
#sidenav li a
{
color:#000000;
background-color:#ccc;
display:block;
border-color:#000;
border-width:1px;
border-style:solid;
text-decoration:none;
width:113px;
padding:0px 0px 0px 5px;
}
#sidenav li a:hover
{
color:#ffffff;
background-color:#000000;
}
#sidenav li a.current:hover
{
color:#000000;
background-color:#ffffff;
border-color:#000000;
}
#sidenav li a.current
{
background-color:#fff;
}
#content
{
margin:0px 0px 10px 130px;
padding:0px 0px 20px 10px;
border-color:#cccccc;
border-left-width:1px;
border-left-style:dashed;
}
#foot
{
font-family: Trebuchet MS, Verdana, Arial, Sans-Serif;
font-size:10pt;
background-color:#ccc;
clear:both;
padding:5px 5px 5px 5px;
border-color:#000;
border-width:1px;
border-style:solid;
}
#foot p
{
margin:0;
}
#foot .right
{
padding:0px 5px 0px 0px;
}
#foot a:hover, .box a:hover
{
color:#000;
}
.article
{
padding-left:10px;
border-bottom-color:#ccc;
border-bottom-style:dashed;
border-bottom-width:1px;
}
.article h1
{
font-family:Verdana, Trebuchet MS, Verdana, Arial, Sans-Serif;
font-size:18pt;
}
.article p
{
font-family:Verdana, Tahoma, Times New Roman, Serif;
font-size:1em;
line-height:1.5em;
}
.article img
{
border-width:1px;
border-color:#000;
border-style:solid;
margin:10px 10px 10px 10px;
}
.box
{
background-color: #ccc;
border-color:#000;
border-width:1px;
border-style:solid;
padding:10px 10px 10px 10px;
margin:0px 0px 10px 0px;
}
.box h1
{
font-family:Trebuchet MS, Verdana, Arial, Sans-Serif;
font-size:14pt;
padding:0;
margin:0;
}
.box p
{
font-family:Tahoma, Times New Roman, Serif;
font-size:0.9em;
line-height:1.2em;
}
.left
{
float:left;
}
.right
{
float:right;
}
And lastly, here is the html it pertains to:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta name="author" content="Rick Shrum" />
<meta http-equiv="Content-Language" content="en-us" />
<script type="text/javascript" src="newwindow.js">
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Penguin Ice Cream</title>
</head>
<body>
<div id="container">
<div id="banner">
<table>
<tr>
<td rowspan="2"><img src="images/penguinsmalllogo.jpg" alt="company logo or picture" width="160" height="176" /></td>
<td id="sitename"><a href="index.html" title="Home">Penguin</a></td>
</tr>
<tr>
<td id="sitephrase">Ice Cream</td>
</tr>
</table>
</div>
<div id="topnav" style="width:100%;">
<ul>
<li><a class="current" href="#">Home</a></li>
<li><a href="icecream.html">Ice Cream Information</a></li>
<li><a href="penguins.html">Penguin Information</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<div id="leftcol">
<div id="sidenav">
<ul>
<li><a class="current" href="#">HOME</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
<img src="" alt="" width="150" height="112" id="placeholder" style="background-color: #000000" />
<div class="box">
<h1>News</h1>
<p>Put some tidbits of news or announcements here.</p>
</div>
</div>
<div id="content">
<div class="article">
<h2>Heading</h2>
<img src="" alt="" width="150" height="112" class="right" id="somepic" style="background-color: #666666" />
<p>Words penguins ice cream black and white tuxedo flightless </p>
<p>More stuff here </p>
<p>Yadda Yadda Yadda </p>
</div>
<div class="article">
<h2>Another Header? </h2>
<p>Hi</p>
</div>
</div>
<div id="foot">
<p class="right"><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a> | © 2006</p>
<p>contact info here</p>
</div>
</div>
</body>
</html>
For viewing, here is where I have it on the web:
http://www.rickshrum.com/penguinicecream/index.html
Can anyone spot where the problem lies?
Thanks,
Rick