Text Not Showing up in IE, Fine in Firefox * NS

Question

Spycat 0 Light Poster

18 Years Ago

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> | &copy; 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

javascript

1 Contributor
1 Reply
151 Views
1 Day Discussion Span
Latest Post 18 Years Ago Latest Post by Spycat

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Spycat 0 Light Poster · Answer 1 · 2006-04-24T04:32:18+00:00

Spycat 0 Light Poster

18 Years Ago

Nevermind, I fixed it.