Archive for the ‘CSS Tips n Tricks’ Category

I generally use Dean Edwards IE7/IE8 Javascript patch to fix those annoying little areas in IE6/IE7 that don’t implement everything correctly in CSS. However with one of my current developments I had to remove this entirely because it clashed with the Style Sheet switcher that the client required on their site.

This left me with having to fix as much as possible in the discrete style sheets for IE6 and IE7, which didn’t actually prove particularly onerous since I have a policy of developing a site without any patches applied and then only applying them right at the end to clear up any outstanding issues with IE6 and 7 - thereby having a site that degrades gracefully for those with JS disabled. However this did leave me with 1 issue to resolve - that of drop down menus on a LI.HOVER.

Now IE6 only implements the HOVER pseudo-class on an A element, which therefore left me with implementing a small piece of JS code to reproduce the HOVER function on the LI element. What about fallback for those without JS? Well, since the site is Joomla driven and the main menu item is for a section I set the parameters such that the section page displays a list of its categories (that are the same as the drop down menu items), so those with JS disabled can still get to the category content.


<script type="text/javascript">
liHover = function() {
var oLis = document.getElementById("mmenu").childNodes[0].getElementsByTagName(”li”);
for (var i=0; i

oLis[i].onmouseover=function() {
this.className+=” lihover”;
}
oLis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” lihover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(”onload”, liHover);
</script>


This JS code is place in the HEAD element within the following code to ensure it is only run against IE browsers below IE7:


<!--[if lte IE 6]>
JS code goes here………
<![endif]–>


I place the the menu UL’s inside a containing DIV called ‘mmenu’ and the JS code attaches a new class to each LI element contained within this DIV and an onmouseover is also attached to the LI. The LI can then be controlled via the new CSS class and the onmouseover event fires the drop down. Finally the code is triggered once the page is loaded to add the new CSS class and event to the LI’s, meaning you can add it to a menu that is being generated by automatically by Joomla, Wordpress or Drupal.

However if they have JS disabled they can’t switch styles anyway…….. which is a bit of a paradox really.

I often seen questions in forums asking how can you create horizontal menus in CSS without using tables.

This is actually quite straight forward and simply requires the use of UL within the HTML and a small amount of CSS (as opposed to all the table code required to achieve the same effect).

So the HTML for a simple menu then will be as follows:
<div id="menulist">
<ul>
<li><a href="item1.html">Item 1</a></li>
<li><a href="item2.html">Item 2</a></li>
<li><a href="item3.html">Item 3</a></li>
</ul>
</div>
Which will give a menu list that looks like the following:

• Item 1
• Item 2
• Item 2

So how do we turn it into a horizontal menu? This is where the CSS comes in!

In our CSS style sheet, we firstly we need to turn the bullets off, and set it to display inline, since by default UL is a block level element; thus:
#menulist ul {
list-style-type: none;
display: inline;
}

Now to get the menu items to display horizontally with a gap between each item:
#menulist ul li {
position: relative;
float: left;
margin-right: 20px;
}

And there we have it!

But what if you want the menu to be displayed on the right hand side of the page?

Well it’s as simple as changing the float: left to float: right. However, when you do this the menu items are reversed, i.e. Item 1 will appear on the right of the menu with Item 3 on the left. So you need to reverse the menu items in your list to counteract this.

This gives a menu list that is semantically correct without the need for tables.

Of course you can add background images, background color, borders, etc. to the list items to make them look as you desire, but the point is you don’t need to use tables to add any fancy graphics/style to the menu - it can all be done in CSS.

One last little trick to remember is to get the ANCHOR link to fill the whole width of the LI don’t specify any padding on the LI itself, put this on the ANCHOR and set the ANCHOR to be a block-element. This will mean hovering over the whole of the LI will activate the menu - rather than just the text.

#menulist ul li a { display: block; }

IE6 Issues
Now this all works fine in everything apart from IE6 or below, so we need to apply a fix for these old browsers, thus:

<!--[if lt IE 7]>
<style>
#menulist ul li a { display: inline-block; }
</style>
<![endif]–>

Be sure to place this code after your other styling, or any style sheets reference, otherwise it will get overridden!

So now we have it working consistently across all browsers.

Where this really wins overs tables is when you have sub-menus. With a table layout you would have to nest tables; and if you go to more than 2 levels of menu can become a real mess. For aural browsers this is a significant issue since the nested tables break up the correct semantic flow of the menu.

Whereas by using lists for your menu items the semantic flow is kept in tact, the code is neater, and if you need to amend it in the future (adding a new menu item for example) it’s a sinch!