Hi there,
I am working on my very 1st php website and I am trying to use php include file method to include top menu on every pages. somehow when i use php include it is putting top margin about 20px above the content of the include file in IE but not Firefox and Safari. when i put the content of the include file into main file (for instance index.php) it is working fine. I tried to validate HTML and CSS and it all fine.
site url is http://www.advancedneurotraining.ie/ (try to open it in both IE and FF, u will see the gap in IE.) when I do viewsource I don't see any html difference in IE and FF.
please find my index.php html, top_menu.php and css below.
index.php
<!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>
<title>Advanced Neuro Training</title>
<link href="style/style.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/main.js"></script>
</head>
<body>
<div id="header">
</div>
<?php include('top_menu.inc');?>
<div id="main_body">
<div id="main_left_column">
<h2>Home</h2>
<p style="text-align:justify;">
The first and only company in Ireland to offer Brainwave training through a comprehensive range of clinical and professional services from ADHD/ADD to Migranines right through to Peak performance training in Business and Sports
<a href="#">See full List</a>
</p>
<div style="margin-top:3px; margin-right:15px;">
<img src="images/ant_logo.jpg" alt="Advanced Neuro Training" />
</div>
</div>
<div id="main_right_column">
<div>
<img src="images/mail.jpg" alt="Advanced Neuro Training" />
</div>
<p style="text-align:justify; margin-top:15px;"><br />
Abnormal brainwave patterns are associated with brain dysfunctions and a wide range of mental disorders, most of which have been treated with psychotropic and neurotropic medications. Neurofeedback training offers a drug free, non invasive and lasting alternative way to normalize and improve brain function.
</p>
<p style="text-align:justify;">
"Frank H. Duffy, M.D., a Professor and Pediatric Neurologist at Harvard Medical School, stated
in an editorial in the January 2000 issue of the journal Clinical Electroencephalography that
scholarly literature now suggests that neurofeedback �should play a major therapeutic role in
many difficult areas. In my opinion, if any medication had demonstrated such a wide
spectrum of efficacy it would be universally accepted and widely used� (p. v). �It is a field to
be taken seriously by all� (p. vii)."
</p>
<p>
We offer a free 20 minute consultation to all clients
<a href="peak_performance.php">Peak Performance Program</a>
</p>
<p>
Please contact us on <a href="mailto:liam@advancedneurotraining.com">liam@advancedneurotraining.com</a>
</p>
</div>
</div>
</body>
</html>
top_menu.php
<div id="top_bar">
<div id="top_menu_container">
<div class="top_menu_separator_box"> </div>
<div class="top_menu" onmouseover="javascript:hide_all_sub_menus();">
<a href="/">Home</a>
</div>
<div class="top_menu_separator_box"> </div>
<div class="top_menu2">
<div onmouseover="javascript:show_menu_drop_down('about_drop_down');" onmouseout="javascript:hide_all_sub_menus();" class="top_menu_item">
<a href="#">About Neurofeedback</a>
</div>
<div id="about_drop_down" class="top_menu_drop_down" onmouseout="javascript:hide_menu_drop_down(this);">
<div onmouseover="javascript:show_menu_drop_down('about_drop_down');" class="top_sub_menu_item"><a href="what_is_neuro_feedback.php">What is Neurofeedback</a></div>
<div onmouseover="javascript:show_menu_drop_down('about_drop_down');" class="top_sub_menu_item"><a href="how_effective_neuro_feedback.php">How effective is Neurofeedback</a></div>
<div onmouseover="javascript:show_menu_drop_down('about_drop_down');" class="top_sub_menu_item"><a href="history_neuro_feedback.php">History of Neurofeedback</a></div>
</div>
</div>
<div class="top_menu_separator_box"> </div>
<div class="top_menu2">
<div onmouseover="javascript:show_menu_drop_down('clinical_drop_down');" onmouseout="javascript:hide_all_sub_menus();" class="top_menu_item">
<a href="clinical_services.php">Clinical Services</a>
</div>
<div id="clinical_drop_down" class="top_menu_drop_down" onmouseout="javascript:hide_menu_drop_down(this);">
<div onmouseover="javascript:show_menu_drop_down('clinical_drop_down');" class="top_sub_menu_item"><a href="clinical_services.php">Services</a></div>
<div onmouseover="javascript:show_menu_drop_down('clinical_drop_down');" class="top_sub_menu_item"><a href="conditions_treated.php">Conditions treated</a></div>
<div onmouseover="javascript:show_menu_drop_down('clinical_drop_down');" class="top_sub_menu_item"><a href="peak_performance.php">Peak Performance</a></div>
</div>
</div>
<div class="top_menu_separator_box"> </div>
<div class="top_menu2">
<div onmouseover="javascript:show_menu_drop_down('links_drop_down');" onmouseout="javascript:hide_all_sub_menus();" class="top_menu_item">
<a href="#">Links</a>
</div>
<div id="links_drop_down" class="top_menu_drop_down" style="width:200px;" onmouseout="javascript:hide_menu_drop_down(this);">
<div onmouseover="javascript:show_menu_drop_down('links_drop_down');" class="top_sub_menu_item">
<a href="http://www.isnr.org" target="_blank">www.isnr.org</a>
</div>
<div onmouseover="javascript:show_menu_drop_down('links_drop_down');" class="top_sub_menu_item">
<a href="http://www.peakachievement.com" target="_blank">www.peakachievement.com</a>
</div>
<div onmouseover="javascript:show_menu_drop_down('links_drop_down');" class="top_sub_menu_item">
<a href="http://www.openfocus.com" target="_blank">www.openfocus.com</a>
</div>
</div>
</div>
<div class="top_menu_separator_box"> </div>
<div class="top_menu" onmouseover="javascript:hide_all_sub_menus();">
<a href="research.php">Research</a>
</div>
<div class="top_menu_separator_box"> </div>
<div class="top_menu" onmouseover="javascript:hide_all_sub_menus();">
<a href="contact.php">Contact</a>
</div>
</div>
</div>
style.css
*
{
margin:0;
padding:0;
}
body
{
background-color:#edf9ef;
font: 70.5% Verdana, Arial, Helvetica, sans-serif;
color:#444;
margin:0;
padding:0;
}
#header
{
background:url('/images/bg_header.jpg') repeat-x top left;
height:120px;
width:100%;
margin:0;
padding:0;
}
a
{
color:#e96429;
}
a:hover
{
text-decoration:none;
}
p
{
margin-top:10px;
text-align:justify;
}
#main_body
{
width:100%;
}
#top_bar
{
display:block;
margin-top:0px;
padding:0;
background:url('/images/bg_body.jpg') no-repeat top left;
height:30px;
position:relative;
}
#top_bar a
{
color:#fff;
font-weight:900;
letter-spacing:1px;
text-decoration:none;
}
#top_bar a:hover
{
color:#95ea26;
}
#top_menu_container
{
position:absolute;
bottom:0px;
right:40px;
display:block;
}
#main_left_column
{
float:left;
width:20%;
padding:20px 20px 0px 20px;
}
#main_right_column
{
float:left;
width:60%;
padding:20px 30px 10px 40px;
}
#main_right_column p
{
margin-top:10px;
}
#main_right_column ul,ol
{
margin-top:20px;
margin-left:20px;
}
#main_right_column li
{
margin-top:5px;
}
.top_menu_separator_box
{
margin-top:10px;
float:left;
height:5px;
width:5px;
display:block;
background-color:#95ea26;
display:block;
}
.top_menu
{
position:relative;
float:left;
margin-right:10px;
padding:5px 10px 7px 10px;
}
.top_menu2
{
position:relative;
float:left;
margin-right:10px;
padding:5px 10px 0px 10px;
}
.top_menu_item
{
padding-bottom:7px;
}
.top_menu_drop_down
{
position:absolute;
width:150px;
display:none;
background-color:#b5d9f1;
top:25px;
left:1px;
}
.top_sub_menu_item
{
padding:5px 20px 5px 20px;
background-color:#b6e2e5;
width:100%;
}
.top_sub_menu_item a
{
color:#fff;
text-decoration:none;
}
.top_sub_menu_item:hover
{
background-color:#c7ecf9;
}
.top_sub_menu_item:hover a
{
color:#e96429;
}
.bold_header
{
font-size:1em;
font-weight:bold;
color:#e96429;
margin-top:15px;
}
Thanks
MgKo
appreciate any suggestion.
