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

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,616 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,638 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1954 | Replies: 1

•

Join Date: Apr 2006

Location: San Jose, CA

Posts: 24

Reputation: Spycat is an unknown quantity at this point

Rep Power: 3

Solved Threads: 0

Spycat

Offline

Newbie Poster

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

Apr 22nd, 2006

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:

Help with Code Tags

(Toggle Plain Text)

#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:

Help with Code Tags

(Toggle Plain Text)

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;
}

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:

Help with Code Tags

(Toggle Plain Text)

<?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>

<?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