Tip for IE6 fixes in Dreamweaver

By Tim Priebe on November 27, 2009 at 5:03 pm in How-To, Technical, css

Dreamweaver and conditional IE6 CSSIf you’re a Dreamweaver user and you try to make sure your sites work in Internet Explorer 6, this tip is for you.

When using Dreamweaver templates, one of the things that Dreamweaver does well is automatically correct paths for you. This is extremely helpful, because you don’t have to worry about what directory you’re in when linking to files.

So you might link to a style sheet in your template Templates/main.dwt like this:

<link href="../_css/reset.css" rel="stylesheet" type="text/css" />

Then, when you look at a file index.php one directory up, it looks like this:

<link href="_css/reset.css" rel="stylesheet" type="text/css" />

Or, in a file /misc/news/index.php, it looks like this:

<link href="../../_css/reset.css" rel="stylesheet" type="text/css" />

Internet Explorer 6 often requires several CSS fixes to get your website to look like it does in other browsers. The method I personally prefer (and that we use at T&S) is a separate CSS file for IE6 that’s applied only when IE6 is used.

Here’s what that looks like:

<!--[if lte IE 6]>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

The only problem when using this technique in Dreamweaver-based sites is that Dreamweaver sees the entire thing as an HTML comment, and therefore does not update the CSS file’s path when it’s in a different folder. So it might work in some files, and not in others.

If your files are PHP files, there’s a workaround. You can use the following code:

<?php echo "<!--[if lte IE 6]>\n"; ?>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<?php echo "<![endif]-->\n"; ?>

And there you go. Now Dreamweaver will skip over the PHP code, and will assume that the IE6 stylesheet is just a normally linked stylesheet. Your browser will interpret the code correctly, but Dreamweaver will still update the path for you.

Easy Guide To CSS Drop Down Menus

By Nick Little on November 4, 2008 at 2:31 pm in css, html

Drop down menus are one of the most useful tools in a website. They can make a big site very easy to navigate through. However, for the web developer they can seem like such a daunting task. This short tutorial can help anyone get started with a simple drop down. The drop down will work in all current browsers (Opera, Safari, Firefox, Chrome, and Internet Explorer 6+) if done correctly. IE will need a little bit of help using javascript.

The first thing to do when creating a CSS drop down is to write the corresponding HTML or XHTML. I have seen many people use DIV tags to code drop down menus. However, I would argue that the best menu, including drop down menus, is always a list. Here is how we should start our list:

<ul id="mainmenu">
  <li><a href="#">First Link</a></li>
  <li><a href="#">Second Link</a>
    <ul>
      <li><a href="#">Drop Down One</a>
      <li><a href="#">Drop Down Two</a>
    </ul></li>
  <li><a href="#">Third Link</a></li>
</ul>

Next, we need to add a little bit of javascript to the head tag to make sure that IE7 and below will work correctly. Note that since we are adding javascript for the drop down and the CSS for the drop down may not work in all older browsers, it is highly recommended that you still include all the subitem links on the item page. (ie. Include links to “Drop Down One” and “Drop Down Two” on the “Second Link” page.) The javascript tells IE and below to add “hover” to class attribute when mouse hovers over a list item, since it doesn’t support the :hover modifier for list items inherently.

<!--[if lte IE 7]>
<script language="javascript" type="text/javascript">
function makeDropDownMenu(ul) {
  var lis = ul.getElementsByTagName('li');

  for (var i = lis.length - 1; i >= 0; i--) {
    lis[i].onmouseover = function() { this.className += ' hover'; };
    lis[i].onmouseout = function() { this.className = this.className.replace(new RegExp('\\bhover\\b'), ''); };
  }
}

function loadIEHover() { makeDropDownMenu(document.getElementById('mainmenu')); }
window.attachEvent("onload", loadIEHover);
</script>
<![endif]-->

And now for the fun part! Styling the drop down with CSS can be a tricky process at first. Here are a few basic suggestions for troubleshooting your CSS if it does not work:

  • Know the cascading rules for cascading style sheets and make sure that one of your previous rules for the drop down is not overriding the rule that is not working.
  • Make sure that everything is positioned absolutely and that overflow is set to visible.
  • Make sure that you have overridden any default browser styles and/or styles used by the rest of the site (especially margin and padding).

If your drop down is not working the way you think then one of the above suggestions will probably be the answer. At least those were the issues that I regularly ran into the first few times I designed drop down menus. Below is some sample CSS that can at least help get you started. Note that many times IE6 and sometimes IE7 will need different styles than more standards compliant browsers.

<style type="text/css">
body { background: #A9DEEF; }
#mainmenu { margin: 0px; padding: 0px; overflow: visible; position: relative; }
#mainmenu li { background-image: none; display: inline-block; min-height: 15px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; }
#mainmenu li a { color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#mainmenu li a:hover { color: #000; }

#mainmenu ul { background: #000; left: -9999px; margin: 0px 0px 0px -63px; opacity: 0.8; padding: 0px; position: absolute; top: 15px; width: 127px; z-index: 1; }
#mainmenu ul li { border-top: 1px solid #FFF; display: block; margin: 0px; padding: 0px; }
#mainmenu ul li.First, #mainmenu ul li:first-child { border-top: none; }
#mainmenu ul li a { color: #CCC; display: block; font-size: 10px; font-weight: normal; padding: 5px 15px; text-decoration: none; text-transform: none; }
#mainmenu ul li a:hover { color: #FFF; text-decoration: underline; }
#mainmenu li:hover ul, #mainmenu li.hover ul { left: 50%; }
</style>
<!--[if lte IE 7]>
<style type="text/css">
#mainmenu li { display: inline; }
#mainmenu ul { filter: alpha(opacity=80); }
#mainmenu ul li a { display: block; }
</style>
<![endif]-->

Putting it all together, we have:

<html>
<head>
<title>Drop Downs are Awesome!</title>
<style type="text/css">
body { background: #A9DEEF; }
#mainmenu { margin: 0px; padding: 0px; overflow: visible; position: relative; }
#mainmenu li { background-image: none; display: inline-block; min-height: 15px; overflow: visible; padding: 0px 10px; position: relative; vertical-align: top; }
#mainmenu li a { color: #444; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#mainmenu li a:hover { color: #000; }

#mainmenu ul { background: #000; left: -9999px; margin: 0px 0px 0px -63px; opacity: 0.8; padding: 0px; position: absolute; top: 15px; width: 127px; z-index: 1; }
#mainmenu ul li { border-top: 1px solid #FFF; display: block; margin: 0px; padding: 0px; }
#mainmenu ul li.First, #mainmenu ul li:first-child { border-top: none; }
#mainmenu ul li a { color: #CCC; display: block; font-size: 10px; font-weight: normal; padding: 5px 15px; text-decoration: none; text-transform: none; }
#mainmenu ul li a:hover { color: #FFF; text-decoration: underline; }
#mainmenu li:hover ul, #mainmenu li.hover ul { left: 50%; }
</style>
<!--[if lte IE 7]>
<script language="javascript" type="text/javascript">
function makeDropDownMenu(ul) {
  var lis = ul.getElementsByTagName('li');

  for (var i = lis.length - 1; i >= 0; i--) {
    lis[i].onmouseover = function() { this.className += ' hover'; };
    lis[i].onmouseout = function() { this.className = this.className.replace(new RegExp('\\bhover\\b'), ''); };
  }
}

function loadIEHover() { makeDropDownMenu(document.getElementById('mainmenu')); }
window.attachEvent("onload", loadIEHover);
</script>
<style type="text/css">
#mainmenu li { display: inline; }
#mainmenu ul { filter: alpha(opacity=80); }
#mainmenu ul li a { display: block; }
</style>
<![endif]-->
</head>
<body>
<ul id="mainmenu">
  <li><a href="#">First Link</a></li>
  <li><a href="#">Second Link</a>
    <ul>
      <li><a href="#">Drop Down One</a>
      <li><a href="#">Drop Down Two</a>
    </ul></li>
  <li><a href="#">Third Link</a></li>
</ul>
<p>This is a test paragraph below the menu.</p>
<p> </p>
</body>
</html>

Each drop down is different, but the underlying principles and most of the base code is the same. As you deesign more and more drop downs you will come across more and more oddities in browsers that do not work the way you think. Thankfully, with more experience also comes the ability to troubleshoot the problems a lot quicker.

Min-height, Min-width, & IE6

By Nick Little on September 17, 2008 at 6:30 am in General, Technical, css

There is a way to get elements in IE6 to have a min-height and a min-width. However, both require hacks that isolate IE6 from other browsers. We’ll start with the easy one.

Min-height can be achieved in IE6 by using a conditional HTML comment and the height CSS property. It turns out that Microsoft decided that the height CSS property in IE6 and below should actually be the minimum height. We can put this inside a style tag in the HTML comment after the initial CSS. This way all other browsers will not see the CSS.

<style type="text/css">
  .minheightclass { min-height: 100px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minheightclass { height: 100px; }
</style>
<![endif]-->

Make sure that the element with the min-height does not have overflow: auto. It will not work in that case. You will need to override the overflow in the IE6 conditional comment in order for it to work.

Min-width in IE6 is a little bit trickier and it requires javascript to be enabled. We will still use the conditional HTML comment, but we will have to add a Microsoft proprietary CSS expression. A CSS expression allows some javascript code to dynamically determine the value of a CSS property. We will apply the expression to the width property.

<style type="text/css">
  .minwidthclass { min-width: 350px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minwidthclass { width: expression(this.clientWidth > 350 ? "100%" : "350px"); }
</style>
<![endif]-->

Be careful when using this hack as it can cause the browser to lock up if you get the values wrong.