Working in Firefox but no IE 2

juvesteve · Jan 23, 2008

I written a page that works fine in Firefox but not IE.
In IE only the footer appears.

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Main Menu</title>
<link rel=stylesheet type="text/css" href="main.css" title="Main Menu" >

</head>
<body>

<div id="wrapper">

<div id="header">
	<h1 id="header1">Showroom</h1>
</div>


<div id="content">

</div>


<div id="leftSidebar">
<div id="menu">
<ul>
<li id="active"><a href="MainMenu.html">Home</a></li>
<li><a href="slideshow.html">Slide Show</a></li>
<li><a href="calculator.html">Calculator</a></li>
<li><a href="dvd.xml">Top DVD's</a></li>
<li><a href="contact.html">Contact Form</a></li>
<li><a href="report.html">My Report</a></li>
</ul>
</div>
</div>

	
<div id="rightSidebar">

<div id="rightSidebar_advertisement1">
<a href="[URL unfurl="true"]http://www.mvm-films.com/"[/URL] target="_blank">
<img src="images/mvm_logo.jpg"/>
</a>
</div>

<div id="rightSidebar_advertisement2">

<a href="[URL unfurl="true"]http://www.carltondrama.org.uk/"[/URL] target="_blank">
<img src="images/cds_logo.gif"/>
</a>

</div>
</div>

<div id="footer">
<p id="p_footer1">Copyright © 2008 Steven Mann All rights reserved</p>
<p id="p_footer2"><a href="[URL unfurl="true"]http://www.copyrightservice.co.uk/">Copyright[/URL] Service</a></p>
</div>
</div>

</body>
</html>

CSS Stylesheet:

Code:

positioning#body{
				text-align:center
				}

div#wrapper		{
				height:1000px;
				width:1247px;
				margin:0 auto;
				text-align:left;
				position:relative;
				background-color:#000000;

				}




div#header		{
				background-color:#151515;
				position:absolute;
				top:0;
				left:0;
				height:306px;
				width:1247px;
				color:#FFFFFF;
				background-image:url(images/header5.gif);
				background-position:left;
				background-repeat:no-repeat;
				}
			
#header1		{
				position:absolute;
				left:832px;
				top:100px;
				font-size:36px;
				font-family:Arial;
				color:#FF0000
				}
		
#header2		{
				position:absolute;
				left:970px;
				top:150px;
				font-size:36px;
				font-family:Arial;
				color:#FF0000
				}
		
div#content		{
				background-color:#000000;
				background-image:url(images/hellsing-content8.2.jpg);
				background-position:top;
				background-repeat:no-repeat;
				width:815px;
				height:656px;
				position:absolute;
				top:323px;
				left:212px
				}			

/* Slideshow */

div#content_slideshow	{
				background-color:#FFFFFF;
				width:767px;
				height:500px;
				position:absolute;
				top:370px;
				left:240px;
				background-image:url(images/background_black.bmp);
				background-repeat:no-repeat
				}
				
#p_title_slideshow{
				position:absolute;
				color:#CC0000;
				top:35px;
				left:320px;
				text-align:center;
				font-size:24px;
				font-family:Geneva, Arial, Helvetica, sans-serif;
				text-decoration:underline
				}
				
div#slideshow	{
				position:absolute;
				top:100px;
				left:183.5px;
				}

/* Calculator */
	
div#content_calculator
				{
				background-color:#FFFFFF;
				width:767px;
				height:500px;
				position:absolute;
				top:370px;
				left:240px;
				background-image:url(images/background_black.bmp);
				}
				
#p_title_calculator
				{
				position:absolute;
				color:#CC0000;
				top:35px;
				left:320px;
				text-align:center;
				font-size:24px;
				font-family:Geneva, Arial, Helvetica, sans-serif;
				text-decoration:underline
				}
				
div#calculator	{
				position:absolute;
				top:130px;
				left:305px;
				}

/* Contact Form */

div#content_contact	{
				background-color:#FFFFFF;
				width:767px;
				height:500px;
				position:absolute;
				top:370px;
				left:240px;
				background-image:url(images/background_grey.bmp);
				}
				
div#contact 	{
				position:absolute;
				top:130px;
				left:225px;
				}
				
#p_title_contact
				{
				position:absolute;
				color:#990000;
				top:35px;
				left:310px;
				text-align:center;
				font-size:24px;
				font-family:Geneva, Arial, Helvetica, sans-serif;
				text-decoration:underline
				}

/* Report */

div#content_report		{
				background-color:#FFFFFF;
				width:767px;
				height:500px;
				position:absolute;
				top:370px;
				left:240px;
				background-image:url(images/background_white.bmp);
				overflow:auto;
				border-right:thick;
				border-right-style:ridge;
				border-right-color:#990000;
				}
				
#p_title_report{
				position:absolute;
				color:#000000;
				top:35px;
				left:330px;
				text-align:center;
				font-size:24px;
				font-family:Geneva, Arial, Helvetica, sans-serif;
				text-decoration:underline
				}

div#leftSidebar	{
				background-image:url(images/right.bmp);
				background-position:top right;
				background-repeat:no-repeat;
				background-color:#990000;
				width:220px;
				height:552px;
				position:absolute;
				top:370px;
				left:0px;

				}
				


div#rightSidebar{
				position:absolute;
				background-color:#990000;
				width:220px;
				height:552px;
				top:370px;
				left:1027px;
				background-image:url(images/left.bmp);
				background-position:left;
				background-repeat:no-repeat
				}
				
div#rightSidebar_advertisement1{
				position:absolute;
				background-color:#990000;
				width:192px;
				height:65px;
				left:17px;
				top:465px;
				background-position:bottom;
				}
				
div#rightSidebar_advertisement2{
				position:absolute;
				background-color:#990000;
				width:192px;
				height:100px;
				left:17px;
				top:355px;
				background-position:bottom;
				}
				
div#footer		{
				height:100px;
				width:100%;
				background-color:#666666;
				top:922px;
				position:relative;
				background-image:url(images/footer.bmp);
				float: left; 
				}
				
#p_footer1		{color:#FFFFFF;
				text-align:center
				}		
				
#p_footer2		{color:#FFFFFF;
				text-align:center
				}			

#menu ul		{
				margin: 45px 0 0 0;
				padding: 0;
				list-style-type: none;
				}

#menu li		{
				margin: 0 0 10px 20px;
				}

#menu a			{
				display:block;
				color: #000;
				background-color: #CC6600;
				width: 9em;
				padding: .2em .8em;
				text-decoration: none;
				border-top: 1px solid #fff;
				border-left: 1px solid #fff;
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
				}

#menu a:hover	{
				background-color: #369;
				color: #FFF;
				border-top: 1px solid #000;
				border-left: 1px solid #000;
				border-right: 1px solid #fff;
				border-bottom: 1px solid #fff;
				}

#active a		{
				display: block;
				color: #FFF;
				background-color: #BD0F0F;
				width: 9em;
				padding: .2em .8em;
				text-decoration: none;
				}
				
#active a:hover {
				color: #FFF;
				background-color: #E04949;
				width: 9em;
				padding: .2em .8em;
				text-decoration: none;
				border-top: 1px solid #000;
				border-left: 1px solid #000;
				border-right: 1px solid #fff;
				border-bottom: 1px solid #fff;
				}

If anyone has any idea as why it doesn't show in IE and how to fix this problem then I would be grateful.

Thanks.

ethorn10 · Jan 23, 2008

ooooh, let me be first:

try a complete and valid doctype!

Vragabond · Jan 23, 2008

Your doctype is not complete so you can expect IE to render in quirks mode, which is unreliable. I suggest you change to a complete and valid doctype and work from there.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

ca8msm · Jan 23, 2008

Without looking at the rendered file, I'd say it would be worth getting rid of the absolute positioning on pretty much every element you've created. There's no need for that in most cases as it takes the element out of the document flow.

Look at using floats instead to achieve the layout you need.

-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

juvesteve · Jan 23, 2008

Thanks Vragabond & ca8msm.

With regards to using floats, I'm pretty new to html and css so I don't really know how to implement them but I'll do some research and give it a go.

Cheers.

ca8msm · Jan 23, 2008

Here's a good starting point:

http://css.maxdesign.com.au/floatutorial/

-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

juvesteve · Jan 23, 2008

Cheers

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Working in Firefox but no IE 2

juvesteve

Programmer

ethorn10

Programmer

Vragabond

Programmer

ca8msm

Programmer

juvesteve

Programmer

ca8msm

Programmer

juvesteve

Programmer

Similar threads

Part and Inventory Search

Sponsor