Dropdowns and IE/Mac CSS Hack

The drop-down menus are becoming a rather large frustration. What little time I’ve had these past few weeks has gone into continuing to develop the drop-down menus. Getting IE/Mac to play along has been an interesting bit of research. I’ve found that whitespace is needed before the opening UL and after the closing UL tags, otherwise IE/Mac sticks some whitespace below the parent list item when you hover over it. And IE/Mac requires widths set on all floating elements, whereas virtually every other browser will default to an automatically calculated width based on the content of the float.

So be it.

Netscape 6.x will not work with the drop-downs (at least not in my first attempt). But this isn’t a big concern since not even the CSS drop-down menu example does not work with Netscape 6.x.

I’ve got drop-downs working exactly as I want, looking the same, in IE 5.0 and later, Netscape 7, Gecko 1 and later (firefox/mozilla), Safari, Opera 6 and later, and that’s it. I’ll look at iCab (never did before, but I’ve now got iCab 3 beta to test with) later.

So now I look at IE/Mac.

IE/Mac and Hack

Long story short, I get things working in IE/Mac 5.2. Dropdowns work, they look fine, hooray. I fire up IE/Mac 5.1 (OS 9) to have a look and things aren’t doing so well.

I’m not even trying to get the CSS to work with IE/Mac 5.1 right now, I want to just hide the popups alltogether and I’ll figure out if it’s possible to work around IE 5.1 later.

Well hell, that approach turned into just as much work on its own.

How do I hide CSS from IE/Mac 5.1 but keep it visible in IE/Mac 5.2?

Well, after a lot of mucking about, I’ve come up with something.

I’d like any/all IE/Mac users to try this out and make sure it’s working as intended.

It’s a mish-mash of the same IE/Mac backslash hack applied in different ways. It requires 3 copies of the same rule with different hacks applied to 2 of the 3 lines in order to get things working. It’s a bit cumbersome, but it works.

I really would love to hear from anyone who knows of any other solutions to hiding CSS from IE/Mac 5.1 (and assuming 5.0 as well) but still applied in IE/Mac 5.2.



There’s a coffee shop near where I work that has an art gallery in its back. Today I popped into grab a coffee and spent some time checking out the artwork that was on display.

I dug what I saw.

So here’s a shameless plug for Rachel Maguire just because I like her style.

If you find the interface a little hard to navigate, we’re lucky enough that directory browsing is enabled. So you can take the backdoor, if you so please, I suggest starting with the big door.

The octopus in the back sticking his tentacle out of the jar cracks me up. I don’t know why.

Virtual Mechanic

I’ve been busy with other things these past couple weeks and haven’t made much progress on my new template. I’ve been troubleshooting some performance issues on a web server I help maintain. All I learned was that the problem was not with the application server software nor the web server software. Then, as if by magick, the problem fixed itself.

No not really, although it seems that way.

But right now, it appears that somehow this Windows server had its paging file set to 2mb in size. So that may have been the problem.. or at least one of perhaps two or three problems.

So I’ll try to get to some e-mail today and maybe get my drop-down menus working. I’ve tried so many different ways to implement them that my head spins at the mere thought of CSS-based drop-down menus.

So be it.

In other, non CSS news, it looks like this blog server my pioneer an attempt to consolidate hardware. We’re getting a rather powerful machine in the coming month or two which will be home to several virtual machines. This weblog server will most likely become one of the first virtual servers on that machine. It should be interesting.

Suckerfish & IE/Mac

In a previous blog entry I talked about about CSS-based drop-down menus using the Son of Suckerfish approach.

Well now that I’m going to really use this in a layout, I’ve had to take a closer look at the compatibility of this.

Long story short, IE/Mac wasn’t working. In the SoS article there’s a line of Javascript that only loads the system up if the window.attachEvent function existed. Since it doesn’t exist for IE/Mac browsers, the script never loaded and IE/Mac never saw the drop-down menus.

In my implementation, IE/Mac was set to load the system up. However when I went to test it, something was broken. The script was definately loading, but some very odd things were going on and made the drop-down menus unusable.

After a little searching, I finally came across this webpage which has an altered version of the SoS code that works with IE/Mac.

I’ve since updated ruthsarian_utilities.js with this revised code, and now the drop-downs look to be working.

Kind of.

Somehow…. for some reason… the drop-downs are transparent! Or what’s happening is the text that sits below the area a drop-down menu sits on peeks through, but the background color and text of the drop-down menu are still there, giving the menus some kind of odd opacity-like look to them.

I’m starting on on figuring that out, but I wanted to give a heads-up to anyone else use CSS-based drop-down menus that there is code out there that works with IE/Mac and definately give it a peek.

SSL Reverse Proxy With Apache

This is in response to a comment by Carlos on a previous blog entry.

We’ve got a web-based application that does not work with SSL, but we need to put this application over SSL to protect user data, confidentiality, etc… What I eventually came up with was to use Apache as a reverse proxy server. Requests would come into Apache and Apache would forward the requests to the web application, take the application’s response, and return it back to the user.

Everything you need to know about how to configure Apache as a reverse proxy can be found in this article at Apache Week.

How to setup SSL with Apache is something better covered by many others, so I suggest searching around and see what you find.

What little expertise I might have to bring to this topic is what follows.

First is that I wanted to force everyone to SSL. This means taking requests on the default, non-ssl port (80) and redirecting to the SSL side. A simple mod_rewrite

RewriteCond %{SERVER_PORT} !443
RewriteCond %{REQUEST_URI} !^/robots.txt [NC]
RewriteRule ^(.*) https://www.example.com:443$1 [R=301,L]

This includes a rule to allow requests for robots.txt to come through the non-ssl channel, but probably isn’t necessary.

The only other bit I can offer some insight into is a problem I found when users tried to download files (other than webpages and images) through this proxy. The problem was that default cache-control headers for SSL transactions would block the storage of the content. So very strict browsers (IE) would not even store the file in a temporary location. When the external application was called to open the file, there was no file or temp file to load and so the user received a “file not found” error message.

To fix the cache-control issue I used mod_headers to change the cache-related header values. That looks something like this:

<Location ~ "/*.(doc|pdf|ppt|txt|mdb|xls|mp3|wma|ram|rm|wav|wmv|avi|mov|mpg|qt|swf)">
Header	set	Cache-Control	private
Header	unset	Pragma

And you can add to that list of file extensions as you see fit. I’ve used that list for about a year now and I haven’t heard of any more “file not found” errors from users.

That’s about it. Anything else I might offer is already better covered in the article I linked to.


Utility Stylesheet: hnav_floated.css

Here’s another utility stylesheet for you: hnav_floated.css.

This isn’t a complex stylesheet, but it’s something I can share with you now so I figured I would.

Basically, it takes an unordered list and transforms it to a horizontal menu/list. So what’s the big deal, my previous hnav.css already does that.

Well, as I work on this new layout, I want to do CSS-based drop-down menus from a horizontal menu. The problem with any CSS-based drop-down menu is that you need to make sure the drop-down menu is either overlapping or immediately next to the menu item that triggers the drop-down. If there is even 1 pixel of space between the two, when your mouse moves over that 1px gap, the drop-down will disappear because of the loss of focus (loss of :hover state).

So positioning that drop-down menu is key.

Drop downs triggered from an inline element (which is what I use in hnav.css.) are not consistently positioned relative to the parent (:hover triggered) element across browser platforms.

As a result, I need to turn those inline elements into block elements. The way to do that and still keep the menu items on a single line is to use floats.

This is what hnav_floated.css does. It floats the list items to create a horizontal menu. It’s a far less complex stylesheet, but requires a little more HTML markup.

Drop-down Menus

I’m working on a utlity stylesheet for CSS-based drop-down menus as well. I want it to be fairly comprehensive with several styles that can be used to determine where a drop-down menu pops relative to the parent element. (straight down, down and to the left, down and to the right, maybe more).

I keep calling the drop-down menus “pops” in my own head, because they are more pop-ups than drop-downs (at least in my head).

How do you differentiate between pop-ups and drop-downs?