PMRS Inc.

PMRS, Inc.

What the client wanted:
A newly-redesigned website to represent their corporate face on the internet. They had concerns about the site being visible in IE6, possibly without JavaScript enabled, due to their target audience using almost exculsively large corporate internet connections with older technology and security restrictions.

What I delivered:
The design itself has a number of floating elements, including Flash and irregularly-repeating backgrounds with alpha-channel elements. PNGs were going to be necessary, and to make sure they worked in IE6, I employed the TwinHelix IE6 PNG hack. This lead me to the horrible realization that positioning background PNGs is problematic in IE6, so there were a few concessions made for IE6 support, but largely, the site looks identical in all browsers.

There was no concern with SEO friendliness, so I went with a JavaScript-based dropdown menu for multi-level support. To compensate for the possibility of a JS being disabled, each top-level menu item has its own landing page, and there is a separate stylesheet loaded with a noscript tag.

Gone are the days when a nicely-styled text link was sufficient for main navigation. Heck, designs are even sporting graphical sub navigation these days. While this is a pain in the proverbial backside for easy updating, it’s what life has given us. And when life gives us graphics and demands SEO compatibility and semantically correct HTML, we make lemonade. And then we charge $125/cup.

So, how do we tackle this without all of that pesky JavaScript which is likely to break on any given browser (I’m glaring at you, IE6. And IE7. And IE8. And Firefox. And particularly Safari.) More to the point, how do we do this in a way that’s not just images and can actually be picked up by search engines? We say Screw the JavaScript! (I say that a lot.) The W3C has given us all the tools we need with HTML and CSS! We just need to find new and interesting ways to abuse them.

The root of the issue here is that we have an image that we want to change when we mouse over it, AND we want text to show up for spiders. The Spider isn’t going to understand nav_contact.gif as well as it will understand Contact Doylestown Web Design, so we need to scrap the image tag altogether. We also need to put that text in there and not have it display. These two things are not quite intuitive, but hey, we’re left brain geniuses, are we not?

So, here’s our HTML construct:

  <div id="navigation">
   <ul>
    <li id="nav_01"><a href="/item_1.htm" title="Top Item 1">Top Item 1</a></li>
    <li id="nav_02"><a href="/item_2.htm" title="Top Item 2">Top Item 2</a></li>
    <li id="nav_03"><a href="/item_3.htm" title="Top Item 3">Top Item 3</a></li>
    <li id="nav_04"><a href="/item_4.htm" title="Top Item 4">Top Item 4</a></li>
    <li id="nav_05"><a href="/item_5.htm" title="Top Item 5">Top Item 5</a></li>
   </ul>
  </div>

What we have here is a container <div>, an unordered list, and list tags with links inside. Now, that’s not going to look very good if we leave it like that, so off to the CSS we go.

First, we need to set the stage with the width, height, and background:

#navigation {
	width:740px;
	height:30px;
	background:url(/images/navigation.jpg) top left no-repeat;
}

For that background image, you want to have your entire navigation as it looks normally. No need to cut up individual images for your default state!

Next, we need to whip that list into shape:

#navigation ul {
	width:740px;
	height:30px;
	margin:0px;
	padding:0px;
	list-style:none;
}

We make sure that the <ul> tag is the same exact dimensions as our containing div, and then strip all the margins, padding, and bullets from it. Viola, no more list! Just a happy semantic construct.

Now, we need to trim the <li> tags:

#navigation ul li {
	height:30px;
	margin:0px;
	padding:0px;
	list-style:none;
	float:left;
	display:block;
}

Define the height (because this is horizontal, and they’ll all be the same, right?), strip the margins, padding and bullets again, and finally, make it sit horizontally instead of vertically like it wants to. That’s what the float:left and display:block achieve.

Moving right along! We need to get that pesky text out of there, don’t we?

#navigation ul li a {
	text-indent:-9009px;
	display:block;
	height:30px;
}

So, we take it and shoot it 9009 pixels to the left. Unless someone’s on a 10,280 x 7,680 screen, that’s text is not showing up. But they’ll have other problems, too. Anyway, an important thing to note is that you cannot use <br /> tags inside those links or everything after it will still show up. text-indent only affects the first line.

Now, we are almost done. We just need to tackle the individual cells (hence the unique IDs on the <li> tags). Every <li> tag is going to have two lines in the CSS: one for the tag, and one for the link inside it.

#nav_01 {
	width:148px;
}
#nav_01 a:hover {
	width:148px;
	background:url(/images/nav_01.jpg) no-repeat 0px 0px;
}

In the first line, we declare the width of the <li> tag. We’ve already defined the heights before. This ensures that we’re filling the space of the <ul> tag. In the second line, we make sure that the link is constraining to the same width, and we set the hover property to change the background image. This is the big payoff here. When the user mouses over, instead of doing some fancy JavaScript image swap, we’re using the native CSS functionality to simply change the background to what we need. When they mouse out, the hover expires. Easy as changing the color.

So that’s it for horizontal navigation. Easy, right? But wait! you say. What about dropdowns? Dropdowns require an ID tag, which we’ve already defined. But what if you’ve got a nav parent that has no page? What if nav_02 doesn’t go anywhere? Well, that’s easy. Let’s change the construct a bit:

  <div id="navigation">
   <ul>
    <li id="nav_01"><a href="/item_1.htm" title="Top Item 1">Top Item 1</a></li>
    <li id="nav_02"><a href="/item_2.htm" title="Top Item 2">Top Item 2</a></li>
    <li id="nav_03"><a href="" title="Top Item 3" onclick="return false;">Top Item 3</a></li>
    <li id="nav_04"><a href="/item_4.htm" title="Top Item 4">Top Item 4</a></li>
    <li id="nav_05"><a href="/item_5.htm" title="Top Item 5">Top Item 5</a></li>
   </ul>
  </div>

See nav_03? We take out the URL altogether and add an onclick event. Return false; tells the browser that when the link is clicked, just don’t do anything at all. Effectively makes it a non-link. Then, we change the CSS slightly.

#nav_03 {
	width:148px;
}
#nav_03 a {
	cursor:default;
}

This tells the link to keep the same happy pointer you get for any other element that’s not a hyperlink. So now your link not only doesn’t act like a link, it doesn’t look like a link. But you keep all of your functionality (and the dropdown beneath it).

-pb

Apparently, IE6 throws a royal conniption fit when you attempt to have Flash do anything that involves pointing to an anchor tag on the page.

I tried a number of different methods, from a simple getURL to putting all of my functionality directly into JavaScript, but every time, it blew up.  More explicitly, it blew up after the second time it was accessed (so, click one functioned fine, click two functioned fine, click three went haywire).

For the issue I was working on, the workaround was to tell the browser to scroll to a certain point on the page instead of jump to an anchor, but I can imagine that’s not going to be a lasting solution, and certainly not dynamic.

-pb

Remember, folks, if you’re looking to affect an element’s height or width with JavaScript, you have to add “px” to the end if you want it to work in Firefox.