MoonKat Creations

When you have text mysteriously repeating after a series of floated elements in Internet Exploder 6, the general consensus is that it is due to comments being sandwiched between floats, as explained here:

http://www.positioniseverything.net/explorer/dup-characters.html

However, when I faced this problem today, I systematically removed all of my comments from my html, and the problem still persisted. I also tried adding a 3px negative right margin to the element as the above article recommended, as well as ‘display:inline;’ with no luck. So, still not knowing the issue, I took a stab at a solution, and it worked.

I applied the style ‘position: relative;’ to the element containing the repeated text. (Not the element that contains the unwanted text, but the original text.)

As with other positioning bugs, this one seems to be rectified with relative positioning. As for the actual cause of my repeated content as separate from the usual cause of float-sandwiched comments, I guess it will remain a mystery.

I created this accordion menu rather on accident. (See my previous post, ). I was actually writing jQuery to make a show/hide question answer list, and realized it would be really easy to turn it into an accordion menu.

Here’s the result:

• Our Company
  • About Us
  • History
• Products/Services
  • Custom Web Design
  • Content Management Solutions
  • Website Optimization
  • Email Campaigns
• Portfolio
  • Static HTML
  • Wordpress Themes
  • Emails
• Contact
  • Phone
  • Email
  • Request a Quote

How to create it:

1. Include the jQuery library in your page with a script tag. Example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>

This example links directly to the jQuery library hosted on google. You may link to your own copy.

2. Create a new .js document, and add this code:

$(document).ready(function(){
	$("ul.hidden").hide();
	$("a.toggleLink").click(function () {
		$("ul.hidden").not($(this).next("ul:first")).slideUp();
		$(this).next("ul:first").slideToggle("normal");
	});
});

Add this file using the <script> tag.

3. Add this to the body of your page:

<ul id="accordian_menu">

     <li><a href="#" class="toggleLink">Our Company</a>

     <ul class="hidden">

     <li><a href="#">About Us</a></li>

     <li><a href="#">History</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Products/Services</a>

     <ul class="hidden">

     <li><a href="#">Custom Web Design</a></li>

     <li><a href="#">Content Management Solutions</a></li>

     <li><a href="#">Website Optimization</a></li>

     <li><a href="#">Email Campaigns</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Portfolio</a>

     <ul class="hidden">

     <li><a href="#">Static HTML</a></li>

     <li><a href="#">Wordpress Themes</a></li>

     <li><a href="#">Emails</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Contact</a>

     <ul class="hidden">

     <li><a href="#">Phone</a></li>

     <li><a href="#">Email</a></li>

     <li><a href="#">Request a Quote</a></li>

     </ul>

     </li>

</ul>

4. Add these classes to your stylesheet:

a {
	text-decoration: none;
}
a.toggleLink {
	display: block;
	padding: 5px;
	background: #936;
	color: white;
	border-bottom:1px dotted #CC99CC;
	}
ul#accordian_menu {
	margin: 0;
	padding: 0;
	width: 150px;
}
ul#accordian_menu li {
	list-style-type: none;
}
ul#accordian_menu li ul {
	padding-left: 0;
	background: #FFDAEE;
}
ul#accordian_menu li ul li {
}
ul#accordian_menu li ul li a:hover {
	background: white;
}
ul#accordian_menu li ul li a {
	color: #936;
	display: block;
	border-bottom: 1px dotted #C9C;
	padding: 5px;
}

These classes could probably be refined a little, but I kept them pretty specific so they won’t conflict with any similar markup that might be in your page. Feel free to rename or change them to suit your needs.

Take it further:

Use divs or paragraphs instead of list items to make a show/hide section of content.

Note: If you’re new to jQuery, you only need to include the $(document).ready(function()) once in your javascript document–wrap it around all of your functions.

Okay, this one really stumped me. My non-repeating, centered content background was shifted one pixel to the left in Firefox, but looked correct in Safari and Internet Explorer. Something that looks right in Safari (the most compliant browser) and Internet Explorer (no comment) … hmmm. This was more perplexing than the usual randomness of IE’s bugs. After checking everything from floats to margins, I came across this post:

http://wordpress.org/support/topic/246908

The solution: move the css background-image from the body tag into a container, like the content wrapper. I would have done this initially by instinct, but since I’m using a CMS template, most of the layout was already done for me. Apparently, the body tag in Firefox is shifted one pixel to the left, and styling it with a background image results in that image being shifted also.