Hi guys,
I'm working on a website and for some reason there is a problem on the contact page. In Firefox the heading contact is disaplyed with some text in a cyan and white colour. However in IE it wont display when loaded or refreshed. However the heading is there and can be highlighted. Once the text is highlighted it appears or if you switch to another browser or window and go back to IE it appears. Wierd? Anyone had similer experince or problems and no a soloution. The html and Css are included and the addy is:
<!-- m --><a class="postlink" href="http://www.e-genuity.co.uk/contact/index.php">http://www.e-genuity.co.uk/contact/index.php</a><!-- m -->
HTML
<!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"><!-- InstanceBegin template="/Templates/ingenuity.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Contact ingenuity</title>
<!-- InstanceEndEditable -->
<style type="text/css" media="all, screen">
<!--
@import url("../css/ingenuity_screen.css");
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style1 {color: #00a5d5;
font-weight: bold;
}
-->
</style>
<!-- InstanceEndEditable --><!-- InstanceParam name="Body ID" type="text" value="pageContact" -->
</head>
<body id="pageContact">
<div id="mainContainer">
<div id="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"../index.php"><img src="../images/logo.gif" alt="ingenuity" width="174" height="86" border="0" title="ingenuity" /></a></div>
<div id="header"><!-- InstanceBeginEditable name="strapline" -->Our vision is clear...<br />
to help you achieve yours <!-- InstanceEndEditable --></div>
<div id="nav">
<div id="textnav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"../index.php" id="navHome" title="Home">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" id="navContact" title="Contact">Contact</a></li>
</ul>
</div>
<div id="picnav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"../about/index.php" id="navPic1" title="About us" >01</a> <strong>|</strong>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"../your-business/index.php" id="navPic2" title="Your business with ingenuity" >02</a> <strong>|</strong>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"../our-services/index.php" id="navPic3" title="Our services">03</a> <strong>|</strong>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"../careers/index.php" id="navPic4" title="A career with ingenuity">04</a> <strong>|</strong>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" id="navPic5" title="Contact">05</a></div>
</div>
<div id="subnav">
<!-- InstanceBeginEditable name="subnav" -->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/nav/subnav_f05.gif" alt="05" width="61" height="60" />
<h3><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php">Contact ingenuity</a></h3>
<!-- InstanceEndEditable -->
</div>
<div id="contactText">
</div>
<div id="mainContent">
<!-- InstanceBeginEditable name="mainContent" -->
<h1>Contact</h1>
<p> We like to help, it’s what we do best. So if you want to help
us, if you want us to help you, or you think we can help each other, simply
complete the form below and we’ll be in touch. </p>
<form method="post" action="../call_back/post.asp" name="form1">
<table width='100%'>
<tr>
<td width='38%'>
<div><p>Name</p></div>
</td>
<td width='62%'>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>
<div><p>Position/Job Title</p></div>
</td>
<td>
<input type="text" name="position">
</td>
</tr>
<tr>
<td>
<div><p>Company/Organisation</p></div>
</td>
<td>
<input type="text" name="company">
</td>
</tr>
<tr>
<td>
<div><p>Address</p></div>
</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>
<div><p>Telephone</p></div>
</td>
<td>
<input type="text" name="telephone">
</td>
</tr>
<tr>
<td>
<div><p>Email</p></div>
</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
<div><p>Enquiry</p></div>
</td>
<td>
<textarea name="enquiry" cols="22" rows="5"></textarea>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div><p>Do you wish to be contacted by Ingenuity</p></div>
</td>
<td>
<select name="contact">
<option>Please select</option>
<option>Yes</option>
<option>No</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input name="submit" type="Submit">
</td>
</tr>
</table>
</form>
<!-- InstanceEndEditable --></div>
<div class="clear"> </div>
</div>
<div id="footer">Copywrite ® 2005 ingenuity. <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Disclaimer</a></div>
</body>
<!-- InstanceEnd --></html>
css
/* Global */
body,td,th {
font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #C5C5C5;
}
a:link {
color: #00A5D5;
}
a:visited {
color: #CCCCCC;
}
a:hover {
color: #2FD0FF;
}
a:active {
color: #2FD0FF;
}
h1 {
font-weight: normal;
color: #00A5D5;
}
p {
font-size: 0.8em;
}
.clear {
clear: both;
}
/* Page layout */
#mainContainer {
background: #000000;
}
#header {
height: 159px;
padding-left: 515px;
color: #716F6E;
font-size: 28px;
line-height: 33px;
padding-top: 10px;
padding-bottom: 0px;
}
#pageDefault #header {
background: #34302e url(../images/headers/default.jpg) no-repeat left top;
}
#pageAbout #header {
background: #34302e url(../images/headers/about.jpg) no-repeat left top;
}
#pageYourBusiness #header {
background: #34302e url(../images/headers/yourBusiness.jpg) no-repeat left top;
}
#pageServices #header {
background: #34302e url(../images/headers/services.jpg) no-repeat left top;
}
#pageCareers #header {
background: #34302e url(../images/headers/careers.jpg) no-repeat left top;
}
#pageContact #header {
background: #34302e url(../images/headers/contacts.jpg) no-repeat left top;
}
/* Navigation */
#nav {
background: #9c9a9a url(../images/nav/nav_bground.gif) repeat-y left;
height: 97px;
padding-top: 0;
padding-left: 10px;
position: relative;
}
#nav strong { /* Hide the pipes which delimit the links for none CSS browsers */
display: none;
}
#nav a {
padding: 0 10px 20px 15px;
font-size: 12px;
color: #808080;
text-decoration: none;
}
#nav a:hover {
color: #A9A8A8;
}
#textnav {
text-align: right;
width: 270px;
}
#textnav ul {
margin: 0;
padding: 0;
list-style: none;
}
#textnav ul li {
margin: 0;
padding: 0;
display: inline;
}
#picnav {
position: absolute;
top: 0;
left: 284px;
border-left: 6px solid #9c9a9a;
width: 460px;
}
#picnav a:hover {
background-position: 0 -85px;
color:#BBB9B9;
}
#picnav a {
display: block;
float: left;
margin: 0;
border-top: 6px solid #9c9a9a;
border-right: 6px solid #9c9a9a;
border-bottom: 6px solid #9c9a9a;
font-size: 45px;
font-weight: normal;
padding: 0;
color: #9c9a9a;
line-height: 29px;
text-indent: -2px;
background-position: 0 0;
height: 97px;
width: 91px;
/* Box model hack */
voice-family: "\"}\"";
voice-family:inherit;
height: 85px;
width: 85px;
}
}
html>body #picnav a {
height: 85px;
width: 85px;
background-position: 0 0;
}
#navPic1 { background: url(../images/nav/nav01.jpg) no-repeat; }
#navPic2 { background: url(../images/nav/nav02.jpg) no-repeat;}
#navPic3 { background: url(../images/nav/nav03.jpg) no-repeat;}
#navPic4 { background: url(../images/nav/nav04.jpg) no-repeat;}
#navPic5 { background: url(../images/nav/nav05.jpg) no-repeat;}
#subnav {
float: left;
width: 220px;
margin: 25px 15px 15px 25px;
display: inline;
padding-bottom: 25px;
}
#subnav h3 {
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
margin: 0px;
padding: 15px 0px 0px;
}
#subnav a {
text-decoration: none;
color: #808080;
}
#subnav a:hover {
color: #A9A8A8;
}
#subnav h3 a {
color: #808080;
}
#subnav ul {
margin: 0;
padding: 0;
list-style: none;
}
#subnav ul li {
margin: 0;
padding: 0;
}
/* The main content */
#mainContent {
padding: 0 25px 35px 286px;
}
/* Footer */
#footer {
background: #c5c5c5;
font-size: 11px;
padding: 5px 15px 5px 25px;
}
#footer a {
color: #9c9a9a;
text-decoration: none;
}
#footer a:hover {
color: #676565;
}
/* Header images */
#pageDefault #header {
background-image: url(../images/headers/default.jpg);
}
#contactText h1 {
color: #FFFFFF;
font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
}Probably the Peek-a-boo (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/peekaboo.html">http://www.positioniseverything.net/exp ... kaboo.html</a><!-- m -->) bug
I'm working on a website and for some reason there is a problem on the contact page. In Firefox the heading contact is disaplyed with some text in a cyan and white colour. However in IE it wont display when loaded or refreshed. However the heading is there and can be highlighted. Once the text is highlighted it appears or if you switch to another browser or window and go back to IE it appears. Wierd? Anyone had similer experince or problems and no a soloution. The html and Css are included and the addy is:
<!-- m --><a class="postlink" href="http://www.e-genuity.co.uk/contact/index.php">http://www.e-genuity.co.uk/contact/index.php</a><!-- m -->
HTML
<!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"><!-- InstanceBegin template="/Templates/ingenuity.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Contact ingenuity</title>
<!-- InstanceEndEditable -->
<style type="text/css" media="all, screen">
<!--
@import url("../css/ingenuity_screen.css");
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style1 {color: #00a5d5;
font-weight: bold;
}
-->
</style>
<!-- InstanceEndEditable --><!-- InstanceParam name="Body ID" type="text" value="pageContact" -->
</head>
<body id="pageContact">
<div id="mainContainer">
<div id="logo"><a href=http://www.webdeveloper.com/forum/archive/index.php/"../index.php"><img src="../images/logo.gif" alt="ingenuity" width="174" height="86" border="0" title="ingenuity" /></a></div>
<div id="header"><!-- InstanceBeginEditable name="strapline" -->Our vision is clear...<br />
to help you achieve yours <!-- InstanceEndEditable --></div>
<div id="nav">
<div id="textnav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"../index.php" id="navHome" title="Home">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" id="navContact" title="Contact">Contact</a></li>
</ul>
</div>
<div id="picnav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"../about/index.php" id="navPic1" title="About us" >01</a> <strong>|</strong>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"../your-business/index.php" id="navPic2" title="Your business with ingenuity" >02</a> <strong>|</strong>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"../our-services/index.php" id="navPic3" title="Our services">03</a> <strong>|</strong>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"../careers/index.php" id="navPic4" title="A career with ingenuity">04</a> <strong>|</strong>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" id="navPic5" title="Contact">05</a></div>
</div>
<div id="subnav">
<!-- InstanceBeginEditable name="subnav" -->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../images/nav/subnav_f05.gif" alt="05" width="61" height="60" />
<h3><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php">Contact ingenuity</a></h3>
<!-- InstanceEndEditable -->
</div>
<div id="contactText">
</div>
<div id="mainContent">
<!-- InstanceBeginEditable name="mainContent" -->
<h1>Contact</h1>
<p> We like to help, it’s what we do best. So if you want to help
us, if you want us to help you, or you think we can help each other, simply
complete the form below and we’ll be in touch. </p>
<form method="post" action="../call_back/post.asp" name="form1">
<table width='100%'>
<tr>
<td width='38%'>
<div><p>Name</p></div>
</td>
<td width='62%'>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>
<div><p>Position/Job Title</p></div>
</td>
<td>
<input type="text" name="position">
</td>
</tr>
<tr>
<td>
<div><p>Company/Organisation</p></div>
</td>
<td>
<input type="text" name="company">
</td>
</tr>
<tr>
<td>
<div><p>Address</p></div>
</td>
<td>
<input type="text" name="address">
</td>
</tr>
<tr>
<td>
<div><p>Telephone</p></div>
</td>
<td>
<input type="text" name="telephone">
</td>
</tr>
<tr>
<td>
<div><p>Email</p></div>
</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
<div><p>Enquiry</p></div>
</td>
<td>
<textarea name="enquiry" cols="22" rows="5"></textarea>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<div><p>Do you wish to be contacted by Ingenuity</p></div>
</td>
<td>
<select name="contact">
<option>Please select</option>
<option>Yes</option>
<option>No</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input name="submit" type="Submit">
</td>
</tr>
</table>
</form>
<!-- InstanceEndEditable --></div>
<div class="clear"> </div>
</div>
<div id="footer">Copywrite ® 2005 ingenuity. <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Disclaimer</a></div>
</body>
<!-- InstanceEnd --></html>
css
/* Global */
body,td,th {
font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #C5C5C5;
}
a:link {
color: #00A5D5;
}
a:visited {
color: #CCCCCC;
}
a:hover {
color: #2FD0FF;
}
a:active {
color: #2FD0FF;
}
h1 {
font-weight: normal;
color: #00A5D5;
}
p {
font-size: 0.8em;
}
.clear {
clear: both;
}
/* Page layout */
#mainContainer {
background: #000000;
}
#header {
height: 159px;
padding-left: 515px;
color: #716F6E;
font-size: 28px;
line-height: 33px;
padding-top: 10px;
padding-bottom: 0px;
}
#pageDefault #header {
background: #34302e url(../images/headers/default.jpg) no-repeat left top;
}
#pageAbout #header {
background: #34302e url(../images/headers/about.jpg) no-repeat left top;
}
#pageYourBusiness #header {
background: #34302e url(../images/headers/yourBusiness.jpg) no-repeat left top;
}
#pageServices #header {
background: #34302e url(../images/headers/services.jpg) no-repeat left top;
}
#pageCareers #header {
background: #34302e url(../images/headers/careers.jpg) no-repeat left top;
}
#pageContact #header {
background: #34302e url(../images/headers/contacts.jpg) no-repeat left top;
}
/* Navigation */
#nav {
background: #9c9a9a url(../images/nav/nav_bground.gif) repeat-y left;
height: 97px;
padding-top: 0;
padding-left: 10px;
position: relative;
}
#nav strong { /* Hide the pipes which delimit the links for none CSS browsers */
display: none;
}
#nav a {
padding: 0 10px 20px 15px;
font-size: 12px;
color: #808080;
text-decoration: none;
}
#nav a:hover {
color: #A9A8A8;
}
#textnav {
text-align: right;
width: 270px;
}
#textnav ul {
margin: 0;
padding: 0;
list-style: none;
}
#textnav ul li {
margin: 0;
padding: 0;
display: inline;
}
#picnav {
position: absolute;
top: 0;
left: 284px;
border-left: 6px solid #9c9a9a;
width: 460px;
}
#picnav a:hover {
background-position: 0 -85px;
color:#BBB9B9;
}
#picnav a {
display: block;
float: left;
margin: 0;
border-top: 6px solid #9c9a9a;
border-right: 6px solid #9c9a9a;
border-bottom: 6px solid #9c9a9a;
font-size: 45px;
font-weight: normal;
padding: 0;
color: #9c9a9a;
line-height: 29px;
text-indent: -2px;
background-position: 0 0;
height: 97px;
width: 91px;
/* Box model hack */
voice-family: "\"}\"";
voice-family:inherit;
height: 85px;
width: 85px;
}
}
html>body #picnav a {
height: 85px;
width: 85px;
background-position: 0 0;
}
#navPic1 { background: url(../images/nav/nav01.jpg) no-repeat; }
#navPic2 { background: url(../images/nav/nav02.jpg) no-repeat;}
#navPic3 { background: url(../images/nav/nav03.jpg) no-repeat;}
#navPic4 { background: url(../images/nav/nav04.jpg) no-repeat;}
#navPic5 { background: url(../images/nav/nav05.jpg) no-repeat;}
#subnav {
float: left;
width: 220px;
margin: 25px 15px 15px 25px;
display: inline;
padding-bottom: 25px;
}
#subnav h3 {
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
margin: 0px;
padding: 15px 0px 0px;
}
#subnav a {
text-decoration: none;
color: #808080;
}
#subnav a:hover {
color: #A9A8A8;
}
#subnav h3 a {
color: #808080;
}
#subnav ul {
margin: 0;
padding: 0;
list-style: none;
}
#subnav ul li {
margin: 0;
padding: 0;
}
/* The main content */
#mainContent {
padding: 0 25px 35px 286px;
}
/* Footer */
#footer {
background: #c5c5c5;
font-size: 11px;
padding: 5px 15px 5px 25px;
}
#footer a {
color: #9c9a9a;
text-decoration: none;
}
#footer a:hover {
color: #676565;
}
/* Header images */
#pageDefault #header {
background-image: url(../images/headers/default.jpg);
}
#contactText h1 {
color: #FFFFFF;
font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, sans-serif;
}Probably the Peek-a-boo (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/peekaboo.html">http://www.positioniseverything.net/exp ... kaboo.html</a><!-- m -->) bug