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>
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
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
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
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">
© WebWise Ltd. 2012. Any product we make cannot be used for resale or profit off others.
</div>
</body>
</html>
Reply With Quote
Originally Posted by spufi
Bookmarks