www.webdeveloper.com
Results 1 to 10 of 10

Thread: How can I get this webpage to display in IE, Opera and so on?

  1. #1
    Join Date
    Feb 2012
    Posts
    64

    How can I get this webpage to display in IE, Opera and so on?

    I'm having a slight problem with one of the webpages for my website. Every other page seems to be displayed in IE just fine, but this one webpage won't for some reason, and I was wondering whether anyone could help me

    My header code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebWise Ltd. Customer Details</title>
    <script type="text/javascript" src="functions.js">
    </script>
    <link rel="stylesheet" href="layout.css" type="text/css" />
    <style type="text/css">
    /*Here, I am overriding the style rules of the background colour of the banner CSS id selector background by using embedded CSS to change the background colour to a shade of yellow*/
    #banner
    {
    background-color: #FFCC00;
    }
    /*Here, I am overriding the style rules of the background colour of the leftnav CSS id selector background by using embedded CSS to change the background colour to red*/
    #leftnav
    {
    background-color: #FF0000;
    }
    /*Here, I am overriding the style rules of the background colour of the rightnav CSS id selector background by using embedded CSS to change the background colour to red*/
    #rightnav
    {
    background-color: #FF0000;
    }
    </style>
    <style type="text/javascript">
    <!--Here, I am creating a function called Back and it simply is being used so that the Website Details page can be opened when the function is called
    function Back()
    {
    	"self.location='catalogue.html'"
    }
    </style>
    </head>
    Any help is appreciated!

  2. #2
    Join Date
    Nov 2002
    Posts
    2,632
    What is IE displaying wrong?

    EDIT: We need more code than that.

  3. #3
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by spufi View Post
    What is IE displaying wrong?

    EDIT: We need more code than that.
    It is displaying an entirely blank screen :/

    My entire code for the webpage is:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebWise Ltd. Customer Details</title>
    <script type="text/javascript" src="functions.js">
    </script>
    <link rel="stylesheet" href="layout.css" type="text/css" />
    <style type="text/css">
    /*Here, I am overriding the style rules of the background colour of the banner CSS id selector background by using embedded CSS to change the background colour to a shade of yellow*/
    #banner
    {
    background-color: #FFCC00;
    }
    /*Here, I am overriding the style rules of the background colour of the leftnav CSS id selector background by using embedded CSS to change the background colour to red*/
    #leftnav
    {
    background-color: #FF0000;
    }
    /*Here, I am overriding the style rules of the background colour of the rightnav CSS id selector background by using embedded CSS to change the background colour to red*/
    #rightnav
    {
    background-color: #FF0000;
    }
    </style>
    <style type="text/javascript">
    <!--Here, I am creating a function called Back and it simply is being used so that the Website Details page can be opened when the function is called
    function Back()
    {
    	"self.location='catalogue.html'"
    }
    </style>
    </head>
    
    <!--Here, I am using inline CSS to set the topmargin, bottommargin, leftmargin and rightmargin of the body HTML element between the <body> and </body> HTML  tags to 0 and to set the marginheight and marginlength of the body HTML element of the HTML document to 0-->
    <body topmargin=0 bottommargin=0 leftmargin=0 rightmargin=0 marginheight=0 marginlength=0>
    <script language="JavaScript1.2">
    //Here, I am creating a mouse movement follower that consists of 5 images called "cursor.gif", which are 5 mouse cursors, so these 5 mouse cursors follow the user's mouse cursor when they move it
    var trailLength=5
    var path="cursor.gif"
    var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body 
    var i,d = 0
    function initTrail() {
    	images= new Array()
        for (i = 0; i < parseInt(trailLength); i++) {
    		images[i] = new Image()
    		images[i].src = path
    	}
    	storage = new Array()
    	for (i = 0; i < images.length*3; i++) {
    		storage[i] = 0
    	}
    	for (i = 0; i < images.length; i++) {
    		document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>')
    	}
    	trail()
    }
    function trail() {
    	for (i = 0; i < images.length; i++) {
    		document.getElementById("obj" + i).style.top = storage[d]+'px'
    		document.getElementById("obj" + i).style.left = + storage[d+1]+'px'
    		d=d+2
    	}
    	for (i = storage.length; i >= 2; i--) {
    		storage[i] = storage[i-2]
    	}
    	d = 0
    	var timer = setTimeout("trail()",10)
    }
    function processEvent(e) {
    	if (window.event) {
    		storage[0] = window.event.y+standardbody.scrollTop+10
    		storage[1] = window.event.x+standardbody.scrollLeft+10
    	} else {
    		storage[0] = e.pageY+12
    		storage[1] = e.pageX+12
    	}
    }
    initTrail()
    document.onmousemove = processEvent
    </script>
    <div id="container">
    <div id="banner">
    <h1>Customer Details</h1>
     </div>
     
    <ul id="navlist">
    <li><a href="#" onClick="return NavigateHome()">Homepage</a></li>
    <li><a href="#" onClick="return Navigate()">Catalogue/Order Website</a></li>
    <li><a href="#" onClick="return help()">FAQs/Contact Us</a></li>
    </ul>
     <div id="leftnav">
     </div>
     <div id="rightnav">
     </div>
     <div id="content">
     <h2>Customer Details</h2>
     <p>
    This page is used to gather various details about the customer/client that the website is being created for such as your name, the name of your company, the address of your company, your e-mail address and the phone number of your company. <img src="client.jpg" alt="Client And Businessman shaking hands"/>
     </p>
     <p>
    Just fill in the relevant details in the form below and click on Next to continue!
     </p>
     <br><br><br><br><br><br><br><br>
      <div id="form">
     <form name="customer" action="mailto:apd15@hotmail.co.uk" method="post" onsubmit="return ValidateCustomerDetails();">
     <p><b><u>Customer Details Form</b></u></p>
     Full Name:<input type="text" name="custname"><br>
     Company Name:<input type="text" name="compname"><br>
     Company Address:<textarea cols="30" rows="5" name="compaddress"></textarea><br>
     Customer E-Mail Address:<input type="text" name="custemailaddress"><br>
     Company Phone Number:<input type="text" name="compphonenumber"><br>
     </form>
     </div>
     <p>Edit Details:</p>
      <form method="post">
             <input type="button" value="Go back to Homepage" onClick="return NavigateHome()"/>
            <input type="button" value="Go back to Website Details" onClick="return Navigate()" />
     <input type="button" value="Next" onClick="return ValidateCustomers();" />
     </form>
     <p><a href="#" onClick="return help()">Need help?</a></p> 
     </div>
     </div>
     
    <div id="footer">
     WebWise Ltd. 2012. Any product we make cannot be used for resale or profit off others. 
     </div>
     </body>
    </html>

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Typically when I find a major difference in IE and FF display, it's because of <div> or other element tags not correctly opened/closed. So first step in trouble shooting is to validate the page:
    http://validator.w3.org/
    49 errors found including a couple of biggies related to the <body> and <html> tags.
    EfV

  5. #5
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by Eye for Video View Post
    Typically when I find a major difference in IE and FF display, it's because of <div> or other element tags not correctly opened/closed. So first step in trouble shooting is to validate the page:
    http://validator.w3.org/
    49 errors found including a couple of biggies related to the <body> and <html> tags.
    EfV
    I've looked at that, and it seems to be a mess of messages, a lot which don't seem to be the issue

    My other webpages are implemented in very similar ways and I don't seem to have any problems with them

  6. #6
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Well the web browser is having problems with the <body> and the <html> tag... it doesn't get any more major than that.
    When the page displays fine in FF but not IE... it's often a problem with those tags.
    You really need to fix those errors.
    EfV

  7. #7
    Join Date
    Aug 2006
    Posts
    1,902
    Where is the end of this comment?
    Code:
    <!--Here, I am creating a function called Back and it simply is being used so that the Website Details page can be opened when the function is called

  8. #8
    Join Date
    Nov 2002
    Posts
    2,632
    This is only cleaning up the code so I don't get warning flags in my IDE. All of the CSS should be external as should the JavaScript. The multiple <br /> tags should be replaced with using margins in CSS.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>WebWise Ltd. Customer Details</title>
    		<script type="text/javascript" src="functions.js" />
    		<link rel="stylesheet" href="layout.css" type="text/css" />
    		<style type="text/css">
    			body
    			{
    				margin: 0;
    			}
    			/*
    				Here, I am overriding the style rules of the background colour of the banner CSS
    				id selector background by using embedded CSS to change the background colour to a 
    			  	shade of yellow
    			*/
    			#banner 
    			{
    				background-color: #FC0;
    			}
    			/*
    				Here, I am overriding the style rules of the background colour of the leftnav CSS
    				id selector background by using embedded CSS to change the background colour to
    				red
    			*/
    			#leftnav
    			{
    				background-color: #F00;
    			}
    			/*
    				Here, I am overriding the style rules of the background colour of the rightnav CSS
    				id selector background by using embedded CSS to change the background colour to
    				red
    			*/
    			#rightnav
    			{
    				background-color: #F00;
    			}
    		</style>
    		<script type="text/javascript">
    			/*
    				Here, I am creating a function called Back and it simply is being used so that
    				the Website Details page can be opened when the function is called
    			*/
    			function Back()
    			{
    				"self.location='catalogue.html'"
    			}
    		</script>
    		<script type="text/javascript">
    			/*
    				Here, I am creating a mouse movement follower that consists of 5 images called 
    				"cursor.gif", which are 5 mouse cursors, so these 5 mouse cursors follow the user's
    				mouse cursor when they move it
    			*/
    			var trailLength=5
    			var path="cursor.gif"
    			var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body 
    			var i,d = 0
    			
    			function initTrail() {
    				images= new Array()
    				for (i = 0; i < parseInt(trailLength); i++) {
    					images[i] = new Image()
    					images[i].src = path
    				}
    				storage = new Array()
    				for (i = 0; i < images.length*3; i++) {
    					storage[i] = 0
    				}
    				for (i = 0; i < images.length; i++) {
    					document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>')
    				}
    				trail()
    			}
    			function trail() {
    				for (i = 0; i < images.length; i++) {
    					document.getElementById("obj" + i).style.top = storage[d]+'px'
    					document.getElementById("obj" + i).style.left = + storage[d+1]+'px'	
    					d=d+2
    				}
    				for (i = storage.length; i >= 2; i--) {
    					storage[i] = storage[i-2]
    				}
    				d = 0
    				var timer = setTimeout("trail()",10)
    			}
    			function processEvent(e) {
    				if (window.event) {
    					storage[0] = window.event.y+standardbody.scrollTop+10
    					storage[1] = window.event.x+standardbody.scrollLeft+10
    				} else {
    					storage[0] = e.pageY+12
    					storage[1] = e.pageX+12
    				}
    			}
    			initTrail()
    			document.onmousemove = processEvent
    		</script>
    	</head>
    	<body>		
    		<div id="container">
    			<div id="banner">
    				<h1>Customer Details</h1>
     			</div> 
    			<ul id="navlist">
    				<li><a href="#" onclick="return NavigateHome()">Homepage</a></li>
    				<li><a href="#" onclick="return Navigate()">Catalogue/Order Website</a></li>
    				<li><a href="#" onclick="return help()">FAQs/Contact Us</a></li>
    			</ul>
     			<div id="leftnav">
     			</div>
     			<div id="rightnav">
     			</div>
     			<div id="content">
     				<h2>Customer Details</h2>
     				<p>
    					This page is used to gather various details about the customer/client that the
    					website is being created for such as your name, the name of your company, the
    					address of your company, your e-mail address and the phone number of your company.
    					<img src="client.jpg" alt="Client And Businessman shaking hands"/>
     				</p>
     				<p>
     					Just fill in the relevant details in the form below and click on Next to continue!
     				</p>
     				<br /><br /><br /><br /><br /><br /><br /><br />
      				<div id="form">
      					<form name="customer" action="mailto:apd15@hotmail.co.uk" method="post" onsubmit="return ValidateCustomerDetails();">
     						<p><b><u>Customer Details Form</u></b></p>
     						<span>Full Name:</span><input type="text" name="custname" /><br />
     						<span>Company Name:</span><input type="text" name="compname" /><br />
     						<span>Company Address:</span><textarea cols="30" rows="5" name="compaddress"></textarea><br />
     						<span>Customer E-Mail Address:</span><input type="text" name="custemailaddress" /><br />
     						<span>Company Phone Number:</span><input type="text" name="compphonenumber" /><br />
     					</form>
     				</div>
     				<p>Edit Details:</p>
      				<form method="post">
             			<input type="button" value="Go back to Homepage" onclick="return NavigateHome()"/>
            			<input type="button" value="Go back to Website Details" onclick="return Navigate()" />
     					<input type="button" value="Next" onclick="return ValidateCustomers();" />
     				</form>
     				<p><a href="#" onclick="return help()">Need help?</a></p> 
     			</div>
     		</div> 
    		<div id="footer">
    			&#169; WebWise Ltd. 2012. Any product we make cannot be used for resale or profit off others. 
     		</div>
     	</body>
    </html>

  9. #9
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by tracknut View Post
    Where is the end of this comment?
    Code:
    <!--Here, I am creating a function called Back and it simply is being used so that the Website Details page can be opened when the function is called
    That was totally it

  10. #10
    Join Date
    Mar 2012
    Posts
    11
    This line looks to be the culprit....try changing it to script and fixing the closing tag too.

    <style type="text/javascript">
    Last edited by steve-o; 03-24-2012 at 12:07 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles