Hi BonRouge,
The example above needs quirks mode because I am using padding to in which to place the elements without increasing thge 100% height. As you know this can only be done in the broken box model version.
The problem withh php and the xml prologue is when you have short tags set to on in the php config files (or wherever its kept). If you switch them off then you shouldn’t get conflicts. (I don’t know much php but i remember reading that :).)
Anyway you don’t need to use the xml prologue as you can trigger it by enclosing conmments above the doctype anyway.
<!-- quirks on in ie -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
That will still validate but will cause quirks mode in ie and shouldn’t affect php at all.
If you don’t need the 100% height version then you can do a fixed header in standards mode ok. This code belows puts a drop down menu at the top of the page so its always in view and the page scrolls undereneath. I’ve meaning to put this up as a demo because I don’t thing I’ve seen an example that works this well 
It works in ie5, 5.5 and 6, firefox and opera7.5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// JavaScript Document suckerfish menu ala
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style type="text/css">
body {background:blue;margin:0;padding:0}
#ddwrap {
height:22px;
border-bottom: 1px solid #fff;
background:#adbcc9;
}
ul#nav{width:790px}
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:bold;
white-space:nowrap;
background:#adbcc9;
text-align:center;
text-transform: uppercase;
color: #FFFFFF;
}
ul#nav ul{font-weight:normal;text-align:left;}
ul#nav li {
position: relative;
float:left;
margin:0;padding:0;
}
ul#nav li ul {
position: absolute;
left: 0;
top: 100%;
display: none;
border:1px solid #fff;
border-top:none;
background:#adbcc9;
width:auto;
z-index:200;
text-transform: none;
}
ul#nav li ul li{background:#adbcc9;float:none;}
html>body ul#nav li ul {width:100px}
html>body ul#nav li.ddwide ul {width:140px}
html>body ul#nav li.ddsmall ul {width:80px}
/* Styles for Menu Items */
ul#nav li a {
display:block;float:left;
text-decoration: none;
color: #fff;
background:#adbcc9; /* IE6 Bug */
padding: 5px 4px;
}
/* commented backslash mac hiding hack \\*/
* html ul#nav li a {height:1%}
* html ul#nav li {height:1%}
* html ul#nav li ul li{
white-space:nowrap;
width:100px;
margin-left:-16px;
voice-family: "\\"}\\"";
voice-family:inherit;
}
* html ul#nav li ul li{width:1%;ma\\rgin-left:0;}/* ie5 skips this, but ie5.5. and 6 don't */
* html ul#nav li.ddsmall ul {width:80px}
/* end hack */
ul#nav li ul li a {
float:none;
white-space:nowrap;
padding: 2px 4px;
border:none;
} /* Sub Menu Styles */
/* this sets all hovered lists */
ul#nav li:hover a,ul#nav li.over a,
ul#nav li:hover li a:hover,ul#nav li.over li a:hover {
color: #004173;
}
/* set dropdown to default */
ul#nav li:hover li a,ul#nav li.over li a {
color: #FFF;
background-color: #adbcc9;
}
ul#nav li:hover ul,ul#nav li.over ul { display: block; } /* The magic */
/*.... code for top bar ............*/
#top-bar {
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:23px;
}
* html #top-bar {
position:absolute;
}
#topbar-inner {
height:23px;
}
* html #topbar-inner { margin-right:16px;/* for scrollbar*/}
* html body{
padding-top:23px;
}
* html, * html body{
overflow-y: hidden;
height:100%;
margin-top:-23px;
}
* html #mainouter {
height:100%;
width:100%;
overflow:auto;
position:relative;
z-index:2;
}
</style>
</head>
<body>
<div id="top-bar">
<div id="topbar-inner">
<div id="ddwrap">
<ul id="nav">
<li><a href="#">Home</a></li>
<li class="ddwide"><a href="#">My Profile</a>
<ul>
<li><a href="#">Private Messages Inbox</a></li>
<li><a href="#">View My Profile</a></li>
<li><a href="#">Control Panel</a></li>
<li><a href="#">Edit My Profile</a></li>
<li><a href="#">Edit My Options</a></li>
<li><a href="#">Edit My Signature</a></li>
<li><a href="#">Edit My Avatar</a></li>
</ul>
</li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Latest News</a></li>
<li><a href="#">Industry News</a></li>
</ul>
</li>
<li><a href="#">Community</a>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Todays Posts</a></li>
<li><a href="#">Members Gallery</a></li>
<li><a href="#">Who's Online</a></li>
<li><a href="#">Archive</a></li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Industry</a></li>
</ul>
</li>
<li><a href="#">Reviews</a>
<ul>
<li><a href="#">Review 1</a></li>
<li><a href="#">Review 2</a></li>
<li><a href="#">Review 3</a></li>
<li><a href="#">Review 4</a></li>
</ul>
</li>
<li class="ddwide"><a href="#">Calendar</a>
<ul>
<li><a href="#">Releases</a></li>
<li><a href="#">Public/Events</a></li>
</ul>
</li>
<li><a href="#">Competitions</a>
<ul>
<li><a href="#">Competitions</a></li>
</ul>
</li>
<li><a href="#">Cool Stuff</a>
<ul>
<li><a href="#">Media Player</a></li>
<li><a href="#">Arcade</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support Forum</a></li>
</ul>
</li>
<li class="ddsmall"><a href="#">Directory</a>
<ul>
<li><a href="#">Directory</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="mainouter">
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
</div>
</body>
</html>
I’m sure you can work it all out. It uses some proprietary ie code but you can put that in a separate file and call it with conditional comments if you want.
Hop its of some use.
Paul
