100% transparent png buttons with shading and IE6

Hi All,

I’m creating a horizontal navbar with buttons that are completely transparent, but have highlights and shading that are reversed onhover/onclick. All works fine in all the good browsers.

After successfully implementing the PngFix.js so that transparent PNGs appear transparent in IE6, I’m now left with the problem that those buttons are fully transparent in IE6 (!) and show no highlights/shading at all - they are no longer visible as buttons.

I’ve tried various other fixes (IE7.js, DD_belatedPNG), but no improvement.

I was wondering if anyone had any suggestions as to how I can get the highlights/shading to appear in IE6?

Cheers

did you try twinhelix png fix? That might work.

Yep, tried twinhelix, but same result. Solution can’t be too far away, given that the transparency bit has been sorted.

do you have the file hosted so that we can take a look ?
or the code of css and html? (in hte case of twinhelix, if you’re bg is tiled then you might need the iepngfix_tilebg.js too)

Here’s the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Oakwood Fencing Services Ltd - Buy Gates, Fences and Posts</title>
<meta name="description" content="Oakwood Fencing provides a large range of Entrance Gates, Side Gates, Fencing, as well as Posts and Gravel Boards, to retail and trade customers. We also offer free guides on erecting fencing." />
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
    <!-- jquery script to fix transparency in IE6 -->
	<script type="text/javascript" src="scripts/jquery.js"></script> 
	<script type="text/javascript" src="scripts/jquery.pngFix.js"></script>
	<script type="text/javascript"> 
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
    </script> 
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#00693c">
<div id="header">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">Home</a>    </li>
    <li><a href="gates.htm">Gates</a></li>
    <li><a href="panels.htm">Panels</a>    </li>
    <li><a href="posts.htm">Posts</a></li>
    <li><a href="trade.htm">Trade</a></li>
<li><a href="contact.htm">Contact Us</a></li>
  </ul>
</div>
<div id="middle">
  <div id="submenu"><!-- InstanceBeginEditable name="Submenu" -->Content for  id "submenu" Goes Here<!-- InstanceEndEditable --></div>
  <div id="content"><!-- InstanceBeginEditable name="content" -->    
    <h2>Welcome to Oakwood Fencing Services</h2>
    <p>Oakwood Fencing&nbsp;is an ideal source for  all your fencing  and gate requirements. We offer   competitive prices and can deliver across our complete  product range.<strong>&nbsp;</strong><br />
    </p>
    <p>    Our knowledge,&nbsp;expertise and quality  products&nbsp;will ensure that your fencing and gate projects  are a success. Have&nbsp;a look at our <a href="guides.htm">Guides</a> section for  help with your project.<br />
    </p>
    <p>    Although we are based in Witham, Essex, we are happy to quote a competitive delivery price for other  areas.&nbsp;<br />
    </p>
    <p>    Please do not hesitate to contact us should  you require a quotation for fencing, panels or gates. Our contact details can  be found <a href="contact.htm">here</a>.  We are sure you will find our products and service of high quality and  recommend us as a fencing and gate supplier to your colleagues, friends and  family.<br />
    </p>
    <p>    Feel free to browse our  site to see  the fencing, gates and posts we have to offer.</p>
  <!-- InstanceEndEditable --></div>
</div>
<div id="footer">© 2010 Oakwood Fencing Services Ltd. All Rights Reserved.</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
<!-- InstanceEnd --></html>

And the CSS code:

@charset "utf-8";
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, img {
	margin: 0px;
	padding: 0px;
}

#header {
	background-color: #00693c;
	background-image: url(images/BannerTest1Opt.jpg);
	height: 360px;
	width: 857px;
	clear: none;
	float: none;
	text-align: center;
	color: #00693c;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

#header table {
	text-align: center;
	margin-top: 285px;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	background-color: #00693c;
	margin: 0px;
	padding: 0px;
}

#middle {
	width: 857px;
	margin: auto;
}
#submenu {
	float: left;
	width: 240px;
	padding-right: 30px;
	padding-left: 10px;
	background-color: #FFFFD1;
	padding-bottom: 20px;
	font-size: 1.2em;
}
#content {
	float: right;
	width: 507px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-align: center;
	padding-right: 30px;
	padding-left: 40px;
	background-color: #FFFFD1;
	padding-bottom: 20px;
}
#middle #content h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: bold;
	color: #00693c;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}
#middle #content p {
	text-align: justify;
	font-size: 1.2em;
	color: #00693c;
	margin-bottom: 1.4em;
}

#footer {
	background-image: url(images/footer.gif);
	text-align: right;
	clear: right;
	height: 20px;
	width: 857px;
	background-position: center center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.6em;
	font-style: normal;
	font-weight: bold;
	vertical-align: middle;
	color: #FFFFD1;
	padding-right: 10px;
	line-height: normal;
	float: none;
	padding-top: 3px;
	background-color: #00693c;
	margin-right: auto;
	margin-left: auto;
}

To fill in the gaps, here’s the javascript code for the menu bar

// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
//
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

/*******************************************************************************

 SpryMenuBar.js
 This file handles the JavaScript for Spry Menu Bar.  You should have no need
 to edit this file.  Some highlights of the MenuBar object is that timers are
 used to keep submenus from showing up until the user has hovered over the parent
 menu item for some time, as well as a timer for when they leave a submenu to keep
 showing that submenu until the timer fires.

 *******************************************************************************/

var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};

Spry.BrowserSniff = function()
{
	var b = navigator.appName.toString();
	var up = navigator.platform.toString();
	var ua = navigator.userAgent.toString();

	this.mozilla = this.ie = this.opera = this.safari = false;
	var re_opera = /Opera.([0-9\\.]*)/i;
	var re_msie = /MSIE.([0-9\\.]*)/i;
	var re_gecko = /gecko/i;
	var re_safari = /(applewebkit|safari)\\/([\\d\\.]*)/i;
	var r = false;

	if ( (r = ua.match(re_opera))) {
		this.opera = true;
		this.version = parseFloat(r[1]);
	} else if ( (r = ua.match(re_msie))) {
		this.ie = true;
		this.version = parseFloat(r[1]);
	} else if ( (r = ua.match(re_safari))) {
		this.safari = true;
		this.version = parseFloat(r[2]);
	} else if (ua.match(re_gecko)) {
		var re_gecko_version = /rv:\\s*([0-9\\.]+)/i;
		r = ua.match(re_gecko_version);
		this.mozilla = true;
		this.version = parseFloat(r[1]);
	}
	this.windows = this.mac = this.linux = false;

	this.Platform = ua.match(/windows/i) ? "windows" :
					(ua.match(/linux/i) ? "linux" :
					(ua.match(/mac/i) ? "mac" :
					ua.match(/unix/i)? "unix" : "unknown"));
	this[this.Platform] = true;
	this.v = this.version;

	if (this.safari && this.mac && this.mozilla) {
		this.mozilla = false;
	}
};

Spry.is = new Spry.BrowserSniff();

// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
{
	this.init(element, opts);
};

Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
	this.element = this.getElement(element);

	// represents the current (sub)menu we are operating on
	this.currMenu = null;
	this.showDelay = 250;
	this.hideDelay = 600;
	if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
	{
		// bail on older unsupported browsers
		return;
	}

	// Fix IE6 CSS images flicker
	if (Spry.is.ie && Spry.is.version < 7){
		try {
			document.execCommand("BackgroundImageCache", false, true);
		} catch(err) {}
	}

	this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
	this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
	this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
	this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
	this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;

	this.hoverClass = 'MenuBarItemHover';
	this.subHoverClass = 'MenuBarItemSubmenuHover';
	this.subVisibleClass ='MenuBarSubmenuVisible';
	this.hasSubClass = 'MenuBarItemSubmenu';
	this.activeClass = 'MenuBarActive';
	this.isieClass = 'MenuBarItemIE';
	this.verticalClass = 'MenuBarVertical';
	this.horizontalClass = 'MenuBarHorizontal';
	this.enableKeyboardNavigation = true;

	this.hasFocus = false;
	// load hover images now
	if(opts)
	{
		for(var k in opts)
		{
			if (typeof this[k] == 'undefined')
			{
				var rollover = new Image;
				rollover.src = opts[k];
			}
		}
		Spry.Widget.MenuBar.setOptions(this, opts);
	}

	// safari doesn't support tabindex
	if (Spry.is.safari)
		this.enableKeyboardNavigation = false;

	if(this.element)
	{
		this.currMenu = this.element;
		var items = this.element.getElementsByTagName('li');
		for(var i=0; i<items.length; i++)
		{
			if (i > 0 && this.enableKeyboardNavigation)
				items[i].getElementsByTagName('a')[0].tabIndex='-1';

			this.initialize(items[i], element);
			if(Spry.is.ie)
			{
				this.addClassName(items[i], this.isieClass);
				items[i].style.position = "static";
			}
		}
		if (this.enableKeyboardNavigation)
		{
			var self = this;
			this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
		}

		if(Spry.is.ie)
		{
			if(this.hasClassName(this.element, this.verticalClass))
			{
				this.element.style.position = "relative";
			}
			var linkitems = this.element.getElementsByTagName('a');
			for(var i=0; i<linkitems.length; i++)
			{
				linkitems[i].style.position = "relative";
			}
		}
	}
};
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;

Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\\\b" + className + "\\\\b")) == -1)
	{
		return false;
	}
	return true;
};

Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || this.hasClassName(ele, className))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || !this.hasClassName(ele, className))
		return;
	ele.className = ele.className.replace(new RegExp("\\\\s*\\\\b" + className + "\\\\b", "g"), "");
};

// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
		{
			element.addEventListener(eventType, handler, capture);
		}
		else if (element.attachEvent)
		{
			element.attachEvent('on' + eventType, handler);
		}
	}
	catch (e) {}
};

// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
	var layer = document.createElement('iframe');
	layer.tabIndex = '-1';
	layer.src = 'javascript:""';
	layer.frameBorder = '0';
	layer.scrolling = 'no';
	menu.parentNode.appendChild(layer);
	
	layer.style.left = menu.offsetLeft + 'px';
	layer.style.top = menu.offsetTop + 'px';
	layer.style.width = menu.offsetWidth + 'px';
	layer.style.height = menu.offsetHeight + 'px';
};

// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
{
	var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
	while(layers.length > 0)
	{
		layers[0].parentNode.removeChild(layers[0]);
	}
};

// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
	var menus = root.getElementsByTagName('ul');
	for(var i=0; i<menus.length; i++)
		this.hideSubmenu(menus[i]);

	this.removeClassName(this.element, this.activeClass);
};

// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
	return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
};

// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
	if(this.currMenu)
	{
		this.clearMenus(this.currMenu);
		this.currMenu = null;
	}
	
	if(menu)
	{
		this.addClassName(menu, this.subVisibleClass);
		if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
		{
			if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
			{
				menu.style.top = menu.parentNode.offsetTop + 'px';
			}
		}
		if(Spry.is.ie && Spry.is.version < 7)
		{
			this.createIframeLayer(menu);
		}
	}
	this.addClassName(this.element, this.activeClass);
};

// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
	if(menu)
	{
		this.removeClassName(menu, this.subVisibleClass);
		if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
		{
			menu.style.top = '';
			menu.style.left = '';
		}
		if(Spry.is.ie && Spry.is.version < 7)
			this.removeIframeLayer(menu);
	}
};

// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
{
	var opentime, closetime;
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);

	if(menu)
		this.addClassName(link, this.hasSubClass);

	if(!Spry.is.ie)
	{
		// define a simple function that comes standard in IE to determine
		// if a node is within another node
		listitem.contains = function(testNode)
		{
			// this refers to the list item
			if(testNode == null)
				return false;

			if(testNode == this)
				return true;
			else
				return this.contains(testNode.parentNode);
		};
	}

	// need to save this for scope further down
	var self = this;
	this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
	this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);

	if (this.enableKeyboardNavigation)
	{
		this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
		this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
	}
};
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
{
	this.lastOpen = listitem.getElementsByTagName('a')[0];
	this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
	this.hasFocus = true;
};
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
{
	this.clearSelection(listitem);
};
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
	//search any intersection with the current open element
	if (!this.lastOpen)
		return;

	if (el)
	{
		el = el.getElementsByTagName('a')[0];
		
		// check children
		var item = this.lastOpen;
		while (item != this.element)
		{
			var tmp = el;
			while (tmp != this.element)
			{
				if (tmp == item)
					return;
				try{
					tmp = tmp.parentNode;
				}catch(err){break;}
			}
			item = item.parentNode;
		}
	}
	var item = this.lastOpen;
	while (item != this.element)
	{
		this.hideSubmenu(item.parentNode);
		var link = item.getElementsByTagName('a')[0];
		this.removeClassName(link, this.hoverClass);
		this.removeClassName(link, this.subHoverClass);
		item = item.parentNode;
	}
	this.lastOpen = false;
};
Spry.Widget.MenuBar.prototype.keyDown = function (e)
{
	if (!this.hasFocus)
		return;

	if (!this.lastOpen)
	{
		this.hasFocus = false;
		return;
	}

	var e = e|| event;
	var listitem = this.lastOpen.parentNode;
	var link = this.lastOpen;
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);
	var hasSubMenu = (menu) ? true : false;

	var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
	
	if (!opts[3])
		opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;

	var found = 0;
	switch (e.keyCode){
		case this.upKeyCode:
			found = this.getElementForKey(opts, 'y', 1);
			break;
		case this.downKeyCode:
			found = this.getElementForKey(opts, 'y', -1);
			break;
		case this.leftKeyCode:
			found = this.getElementForKey(opts, 'x', 1);
			break;
		case this.rightKeyCode:
			found = this.getElementForKey(opts, 'x', -1);
			break;
		case this.escKeyCode:
		case 9:
			this.clearSelection();
			this.hasFocus = false;
		default: return;
	}
	switch (found)
	{
		case 0: return;
		case 1:
			//subopts
			this.mouseOver(listitem, e);
			break;
		case 2:
			//parent
			this.mouseOut(opts[2], e);
			break;
		case 3:
		case 4:
			// left - right
			this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
			break;
	}
	var link = opts[found].getElementsByTagName('a')[0];
	if (opts[found].nodeName.toLowerCase() == 'ul')
		opts[found] = opts[found].getElementsByTagName('li')[0];

	this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
	this.lastOpen = link;
	opts[found].getElementsByTagName('a')[0].focus();
  
        //stop further event handling by the browser
	return Spry.Widget.MenuBar.stopPropagation(e);
};
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
{
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);
	var hasSubMenu = (menu) ? true : false;
	if (this.enableKeyboardNavigation)
		this.clearSelection(listitem);

	if(this.bubbledTextEvent())
	{
		// ignore bubbled text events
		return;
	}

	if (listitem.closetime)
		clearTimeout(listitem.closetime);

	if(this.currMenu == listitem)
	{
		this.currMenu = null;
	}

	// move the focus too
	if (this.hasFocus)
		link.focus();

	// show menu highlighting
	this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
	this.lastOpen = link;
	if(menu && !this.hasClassName(menu, this.subHoverClass))
	{
		var self = this;
		listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
	}
};
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
{
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);
	var hasSubMenu = (menu) ? true : false;
	if(this.bubbledTextEvent())
	{
		// ignore bubbled text events
		return;
	}

	var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
	if(!listitem.contains(related))
	{
		if (listitem.opentime) 
			clearTimeout(listitem.opentime);
		this.currMenu = listitem;

		// remove menu highlighting
		this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
		if(menu)
		{
			var self = this;
			listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
		}
		if (this.hasFocus)
			link.blur();
	}
};
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
{
	var child = element[sibling];
	while (child && child.nodeName.toLowerCase() !='li')
		child = child[sibling];

	return child;
};
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
{
	var found = 0;
	var rect = Spry.Widget.MenuBar.getPosition;
	var ref = rect(els[found]);

	var hideSubmenu = false;
	//make the subelement visible to compute the position
	if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
	{
		els[1].style.visibility = 'hidden';
		this.showSubmenu(els[1]);
		hideSubmenu = true;
	}

	var isVert = this.hasClassName(this.element, this.verticalClass);
	var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
	
	for (var i = 1; i < els.length; i++){
		//when navigating on the y axis in vertical menus, ignore children and parents
		if(prop=='y' && isVert && (i==1 || i==2))
		{
			continue;
		}
		//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
		if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
		{
			continue;
		}
			
		if (els[i])
		{
			var tmp = rect(els[i]); 
			if ( (dir * tmp[prop]) < (dir * ref[prop]))
			{
				ref = tmp;
				found = i;
			}
		}
	}
	
	// hide back the submenu
	if (els[1] && hideSubmenu){
		this.hideSubmenu(els[1]);
		els[1].style.visibility =  '';
	}

	return found;
};
Spry.Widget.MenuBar.camelize = function(str)
{
	if (str.indexOf('-') == -1){
		return str;	
	}
	var oStringList = str.split('-');
	var isFirstEntry = true;
	var camelizedString = '';

	for(var i=0; i < oStringList.length; i++)
	{
		if(oStringList[i].length>0)
		{
			if(isFirstEntry)
			{
				camelizedString = oStringList[i];
				isFirstEntry = false;
			}
			else
			{
				var s = oStringList[i];
				camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
			}
		}
	}

	return camelizedString;
};

Spry.Widget.MenuBar.getStyleProp = function(element, prop)
{
	var value;
	try
	{
		if (element.style)
			value = element.style[Spry.Widget.MenuBar.camelize(prop)];

		if (!value)
			if (document.defaultView && document.defaultView.getComputedStyle)
			{
				var css = document.defaultView.getComputedStyle(element, null);
				value = css ? css.getPropertyValue(prop) : null;
			}
			else if (element.currentStyle) 
			{
					value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
			}
	}
	catch (e) {}

	return value == 'auto' ? null : value;
};
Spry.Widget.MenuBar.getIntProp = function(element, prop)
{
	var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
	if (isNaN(a))
		return 0;
	return a;
};

Spry.Widget.MenuBar.getPosition = function(el, doc)
{
	doc = doc || document;
	if (typeof(el) == 'string') {
		el = doc.getElementById(el);
	}

	if (!el) {
		return false;
	}

	if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
		//element must be visible to have a box
		return false;
	}

	var ret = {x:0, y:0};
	var parent = null;
	var box;

	if (el.getBoundingClientRect) { // IE
		box = el.getBoundingClientRect();
		var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
		var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
		ret.x = box.left + scrollLeft;
		ret.y = box.top + scrollTop;
	} else if (doc.getBoxObjectFor) { // gecko
		box = doc.getBoxObjectFor(el);
		ret.x = box.x;
		ret.y = box.y;
	} else { // safari/opera
		ret.x = el.offsetLeft;
		ret.y = el.offsetTop;
		parent = el.offsetParent;
		if (parent != el) {
			while (parent) {
				ret.x += parent.offsetLeft;
				ret.y += parent.offsetTop;
				parent = parent.offsetParent;
			}
		}
		// opera & (safari absolute) incorrectly account for body offsetTop
		if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
			ret.y -= doc.body.offsetTop;
	}
	if (el.parentNode)
			parent = el.parentNode;
	else
		parent = null;
	if (parent.nodeName){
		var cas = parent.nodeName.toUpperCase();
		while (parent && cas != 'BODY' && cas != 'HTML') {
			cas = parent.nodeName.toUpperCase();
			ret.x -= parent.scrollLeft;
			ret.y -= parent.scrollTop;
			if (parent.parentNode)
				parent = parent.parentNode;
			else
				parent = null;
		}
	}
	return ret;
};

Spry.Widget.MenuBar.stopPropagation = function(ev)
{
	if (ev.stopPropagation)
		ev.stopPropagation();
	else
		ev.cancelBubble = true;
	if (ev.preventDefault) 
		ev.preventDefault();
	else 
		ev.returnValue = false;
};

Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

And the corresponding css for the menubar:

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, a fixed width cenetered box with no padding */
ul.MenuBarHorizontal
{
	padding: 0;
	list-style-type: none;
	font-size: 1em;
	cursor: default;
	width: 799px;
	zoom: 1;
	margin: auto;
	position: relative;
	top: 284px;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	padding: 0;
	list-style-type: none;
	font-size: 1em;
	text-align: center;
	cursor: pointer;
	float: left;
	margin: 0;
	width: 133px;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	left: -1000em;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 133px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	color: #FFFFD1;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	background-image: url(../scripts/Buttonofflock.png);
	padding: 13px;
	background-repeat: no-repeat;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	color: #F90;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(../images/Button%20on.png);
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	color: #F90;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter: alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\\loat: left;
	}
}

Any suggestions/glaring omissions/spotted mistakes would be welcome!

you should post your code after reading the forum rules(wrap the code using bbcodes). Now the problem is that people searching your site will end up here since the code is indexed in search engines.

also the code is huge, it’s difficult to read through and debug this :frowning: is it hosted in any server hidden search engines) Meanwhile you can try this.I am sorry to say that its difficult to understand the problem unless you see it

Oops, sorry - anyway I or a moderator can remove my last code post?

I’ll get the code hosted and post back - cheers for your help so far.

I’ve just contacted the Green+ guys on your behalf, and if they decide to they’ll edit the code sample for you. :slight_smile:

Hi Fingle, welcome to the forums.

Well, you were asked to show code and you sure did!

AFAIK, there is no forum rule that you must wrap code examples inside bbCode tags. But as you can see it makes it immensely easier to read and it doesn’t take up so much space with the scrolling. Not to worry, not using bbcode tags ranks right up there with forgetting to turn off smilies when it comes to new member mistakes.
Name:<input
username:password
Hey, there’s lots to learn, whad’ya want?

I wouldn’t worry about search engines finding this thread instead of your site. But you do want to make sure any examples you post don’t include sensitive information such as database connection values, email addresses etc.

As for the amount of code, I don’t see where hosting the same information elsewhere makes any difference. But I admit, posting that much code can be overwhelming for most members. They’ll take one look at the amount of it and back away. Much better if you can narrow down the problem area and only show an excerpt of the code that is suspect. Not always so easy to do. If I knew where the problem was, I probably wouldn’t need to be asking for help.

Thanks xhtmlcoder and Mittineague,

Surer looks a lot prettier like that. I’ll get the site up - it may help describe visually what I’m trying to do and what the problem is.

Hi Guys,

Partial site now hosted at www.martinharris.co.uk.

Any comments/ideas on how to get the highlights/shading to appear in IE6 would be very welcome.

Cheers

if you could add this to the css


ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	color: #FFFFD1;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	background-image: url(../images/Buttonofflock.png);
	padding: 13px;
	background-repeat: no-repeat;
	zoom:1;
}


i think zoom:1 will bring the main transparent background. i couldn’t proceed further. can you try this at your end?

ravi_k47 - I bow to your massive knowledge and skill - that is superb!

I’ve reposted the site and, as you can see, the transparent buttons are their in there full highlighted/shaded glory. Presumably, to see the reverse focus image, I can just add the code below to the css?


ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	color: #F90;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(../images/Buttonon.png);
}

Fingle, that effect is so cool, I’d consider putting something else in that header to more fully use that transparency effect (i.e. jazz up that image so that the left three buttons have something behind them besides plain green). You don’t want to overdo it, obviously, but it’s something you might consider.

Hi Fingle,

i tried to fix the mouse over effect too. Seems like its some kind of “issues of IE” .Try moving the zoom:1 to the mouse over class, then the background image shows up. i’ll keep trying but in the meantime let hope someone who knows css more deeply can help you here. :stuck_out_tongue:

Do you have a picture of what it’s supposed to look like?

I RARELY use alpha transparency .png since it’s usually not just fat, bloated and problematic to implement on older versions of IE, 90%+ of the time it’s COMPLETELY unnecessary. Just precomposite the layers down to a single image and use that instead or fake it with opacity.

But again, I’d have to SEE what you are trying to do to say for certain. Simple fact of the matter might be you are getting to clever for your own good with the graphics…

… and people don’t visit websites for the goofy graphics on a menu - they visit for the CONTENT.

To that end, wasting javascript on the menus (uhg, stupid malfing spry nonsense), screwing around with z-index for no good reason, and a ‘hacks’ section that doesn’t make any sense…

… though as always, I consider a hefty chunk of your problems to be right here:
<!-- InstanceBegin template=“/Templates/template.dwt” codeOutsideHTMLIsLocked=“false” –>

Uhg - Dreamweaver. Which explains why you are trying to use that stupid malfing javascript train-wreck known as spry - you might want to consider doing yourself a HUGE favor and pitching that steaming pile of crap in the trash and forget that adobe even exists.

— edit – oops, didnae see your link to the partial hosted copy. Yeah, get rid of the alpha .png and just pre-composite those as separate images ahead of time. End of problem and no pngfix scripting nonsense needed. Sure you’ll need specific classes and separate hover states, but it’s a small price to pay to have it work everywhere.

There is RARELY a legitimate reason to be using alpha .png for anything, especially on so simple a layout.

Oh, BTW - using dynamic fonts behind fixed height images on your menu? Prone to breakage on large font machines (like mine) - it sucks, but those should be declared in PX (only time it’s ok to us PX on fonts in my book is when there’s a image interaction) and that header image of text with no images off fallback content? BAD accessibility.

deathshadow60 is completely correct. :slight_smile: don’t use dreamweaver. Its bad if you are a designer.

also what i would suggest is that you remove the menu from the big rectangular rounded box and put the menu outside of it. It will give a better look if the roots of the trees are exposed rather than hidden behind the menu. Secondly you can use gradient jpg’s for you menus as background. it’ll look cleaner i guess. btw these are my opinions, i don’t know if you are allowed to change the design :smiley:

Had a couple minutes to spare, so I rewrote your page “my way” to show how to take an axe to that javascript nonsense and do it without any need for alpha transparency .png - shrinking the page size and making the layout work all the way back to IE 5.5

As with all my examples the directory:

http://www.cutcodedown.com/for_others/fingle

Unlocked so you can grab the gooey bits.

The big trick is to make a single image that has your background already pre-mixed, and to put the hover states below it.

http://www.cutcodedown.com/for_others/fingle/images/mainMenu.png - 23k

Now it might seem wasteful to use a 23k image for what you were doing with two images that didn’t even total 2k, but chopping that bottom 43px off your top background image shrinking it 50k…

But, if we look at your top image we can see the left and right halves would each actually benefit from different encoding methods. The left side is fairly flat color-wise, and compresses really well using .png

http://www.cutcodedown.com/for_others/fingle/images/h1Logo.png - 24k

The left half on the other hand is effectively truecolor and few if any long runs of the same color - as such artifacting would likely be hidden by it’s existing patterns - so that’s jpeg’s territory.

http://www.cutcodedown.com/for_others/fingle/images/headerLeft.jpg - 37k

The outer border area also can get large amounts of compression as .png if we are willing to use maybe 200 bytes more markup… Saving 20-30k by using 200 bytes of markup? Worth it.

http://www.cutcodedown.com/for_others/fingle/images/headerBackground.png - 3K

Bringing us to 87k in four images vs your original 162k in three images. That one extra handshake and is well worth it to reduce the bandwidth used almost 50%.

The markup gets some radical changes for better accessibility and semantics.

First off, I wrote it in STRICT. Tranny is for supporting old/outdated/half-assed coding techniques, and as such has no real place on a modern website.

The outer DIV wrapping ALL other elements I call #pageWrapper. This lets me specify my width and centering information ONCE instead of on every little section.

To take that headerBackground.png and make it span around the header elements, we have a sandbag div called .headerTop to show the top part, a wrapping div called .headerSides to show the sides - allowing the height to auto-adjust to whatever you decide to put into it for content (good practice) and to use a much smaller image… and then another sandbag after called .headerBottom to show the bottom half of our rounded corner box.

Inside that I have a .siteInfo div - We can use this to show the right half of the image as it’s background and to set a images off color. You can see I put the site title in as a h1, the subtext in as part of the H1 inside a small tag, and the stuff you have in the image as text so again, images off users, screen readers and search engines actually have something to look at. The empty span is for gilder-levin image replacement which we’ll use to put the left half of the header image over the text.

The mainMenu is the same flat list, but I added classes so that we can target each one with the right part of our #mainMenu.png

You’ll see a few horizontal rules in my markup - those are for people who have CSS disabled - between them and the semantic markup the page ends up looking halfway decent even without the stylesheet applied.

I added a div.fauxColumns wrapping the two columns so if you want to apply a divider or other background effects as an image. It also gives us a convenient hook for float wrapping.

In my layouts usually I try to put the content first since what goes in my sidebar is usually of less import than the content - after all, content is what the user is visiting your site FOR. Thankfully on a fixed width layout that doesn’t really require any fancy chicanery to pull off.

In your original you had no h1 making the heading order make no sense, line-break tags doing the job of margin and/or padding for no good reason, non-breaking spaces for no good reason, empty strong tags - all the hallmarks of some trash WYSIWYG editor (like dreamweaver). All that gets scrapped.

You also had a non-entity copyright symbol, which explains why in Opera I got the ‘unrecognized character’ symbol instead. Entities are your friend.

Also, notice my commenting style. Having comments end up between floats and some types of positioned elements can trip IE rendering bugs, so putting the comment BEFORE the closing tag prevents this. The automatic comments that dreamweaver uses for it’s templating being one of the biggest causes of layout headaches that most programmers are blissfully unaware of being the root of their problems.

On the CSS side, I always start out with a reset. There are larger resets which are a bit to saggy around the midsection for my tastes, and smaller resets that can cause problems with elements like forms - the one I use is a nice middle-ground.

body - the text-align gives us IE 5.x support, I set what I consider the optimal font size for content, and of course your background color - which you had in the markup. Color is presentation, and as such has NO business EVER being in your HTML.

#pageWrapper - width, margin to center it in modern browsers. Nothing fancy.

.headerTop,
.headerBottom - these two share some properties, so we set those like properties here. They are both the same height, I put the IE font-size fix in just because you now have Win7 making 200% or larger default font-sizes a reality, and of course I assign our background image.

.headerBottom - only real difference on the bottom one is a different background-position to make it show the bottom left corner instead of the top left one.

.headerSides - Same background image, but slid over to let us tile the right half of it. The padding I tweaked by hand to make certain it looks like an even padding all the way around even when it isn’t. Helps to overcome the optical illusion the shadow provides.

.siteInfo - the position:relative is so we can absolute position our span in relation to the parent div. Height:1% is the ‘holly hack’ - a common haslayout trigger so IE doesn’t screw up the absolute positioning. One of my rules is never declare width or a fixed height the same time as padding, so to get our 260px of the image we’ll be placing over it I add up the line-heights of each line of it’s content. 48px top padding + 48px bottom padding + 4 lines of 18px line-height + 2 lines of 32px line-height + 20px line-height + 8px padding on “small” == 260. From there, it’s just fonts, colors and our right-side image.

h1 - since you should only ever have one h1 on a page, we don’t need a id or class to target it… all we do with it here is set our font size and style.

h1 small - the display:block rides up the line-height on the preceeding break, the bottom padding is just to space the normal text below the h1 out nice and pretty.

.siteInfo span - modified gilder-levin image replacement. Both FF 3.6 and some versions of Opera 9.5x can screw up conventional (span before, let the absolute fall where it may) gilder-levin, so I put the span after and set “top” and “left”. With this over the text and having the h1Logo.png as it’s background, we get the nice image effect, but if you are on a browser with images disabled/unavailable you still get meaningful content. Graceful degradation is the name of the game.

#mainMenu - strip the bullets off the list, overflow to wrap floats, holly hack haslayout trigger to wrap floats in legacy IE. I set a px font size here because of the image background. using PT or %/em would likely break the menu on large font/120dpi systems (just as yours was broken on my machine) so px is justifyable here - besides not many people are going to kvetch about 16px being ‘too small’. I also set a border on each side since your button widths don’t add up to the image above it.

#mainMenu li - because we are using sliding backgrounds (so called image sprites) for the menu I’m going to use a bit of positioning trickery so that we don’t have to declare a background-position for each and every class hover state. To do this we first set our LI to position:relative and overflow:hidden with the width and height of each button on it. I float them, and then toss the display:inline IE float fix in there for good measure - even though I’m not using margins (what it’s usually used for) IE7 can act really wierd around LI, and this seems to fix that.

#mainMenu a - I absolute position the anchor inside it’s parent LI. Again I do not declare a height on it and instead set up padding to add up to our 43px image height - from there it’s just color and our background image.

#mainMenu a:psuedo - for the hover/focus/active effect this is where things get cute. I slide the entire anchor up 43px, the height of our button, then increase the top padding by the same amount. This ‘reveals’ the bottom half of our hover image while making the text appear to stay in the same place - WITHOUT resorting to background-position on each and every class as a pseudo. Reduces the amount of CSS sliding backgrounds can take by about 50%.

#mainMenu .buttonClass a - each of the menu item classes we have to slide the background over to reveal the appropriate button.

#mainMenu .contact - on the last menu item I apply a negative right margin. IE can be really special about floats sometimes (as in how some olympics are special) and this prevents the pesky ‘float drop’ issue.

.fauxColumns - again overflow and haslayout to wrap floats, and I set up the content colors here too. Since it wraps both columns you don’t have to play with getting your content and sidebars the same height, you can just fake the appearance of such here.

Content - since it’s first, float it right, set the width, and top/bottom padding. I do NOT set the side padding since padding + width == headaches in legacy IE.

Content h2 - side padding, bottom padding, text-align, and make the text a pretty size. Nothing fancy.

Content p - same side padding, bottom padding slightly less than our line-height.

On both of those you’ll notice I only pad the right side - our center padding we can do on #sideBar.

#sideBar - rather than try to float this, a right-margin will just collapse under our float. Since that means we don’t need to declare a width on it, we can put it’s side padding right on it here.

#footer - text align and color - nothing fancy.

… and that’s it, how I’d approach what you have so far. No scripting necessary, works all the way back to IE 5.x, has graceful degradation for images off or CSS off, and takes the total page size from 470k to under 90k.

Nice work, DS.

Wow Deathshadow60 - I’m gobsmacked at what you’ve done - not only in terms of your own time spent on this but also the comprehensive overhaul and simplification of the code. Also, thanks to Ravi K47 for your help.

Been away for a long weekend and was surprised at the extraordinary help - almost feel guilty for going away while you were working on the code.

I’ll have to wander my way through it and try to understand what you’ve done - but loads of kudos to you for your effort and help. Would I be able to ask you questions on anything I don’t understand?

I see you’re not keen on Dreamweaver! Any WYSIWYG editors that are good for web designing (quicker learning curve) or is hand coding the best direction (steeper learning curve)?