On Having Layout

If you’ve got some free time, check out this article titled On Having Layout.

It’s probably the best document I’ve seen on trying to break down the hasLayout related bugs in IE. Give it a peek.

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.

Thanks.

rayarray.com

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
</Location>

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.

Cheers!

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?

Utility Stylesheets

I find myself doing a lot of copy+paste of stylesheets I’ve created over and over whenever putting together a new layout. The reason being that a lot of the CSS is reusable and very handy. Rather than rewrite what I already have, I just keep copying it over and over.

So I’m starting to create a collection of utility stylesheets. These are stylesheets that you can reuse over and over.

visual_consistencies.css is a stylesheet that sets font sizes on headings and margin/padding values for heading, paragraph, lists, and similar elements. There are a few other rules in there as well. The overall goal is to provide a consistent visual experience for your users. This is because default heading font sizes, and padding/margin values on headings, paragraphs, etc.. change from browser to browser. This brings all of those values together and keeps things consistent.

hnav.css is something I’ve been using for over a year now (with tweaks every now and then). It allows you to create a horizontal navigation element out of an unordered list. It does not use floats (all the items are inline, not block) but is still able to provide some vertical padding to each item.

The Next Layout

The next layout I plan to release will be an updated version of a layout I put together about 8 months ago for a small project. It’s a layout I’ve gone back to a few times and still find the layout enjoyable. That’s pretty rare for me. I often come back to a layout months after I made it and despise the look. But this one I keep liking. It’s got a couple nice, new features, such as forcing the #pageWrapper element to go the height of the browser window even if the content isn’t long enough to do that. It’s also somewhat asymmetrical, which I think is visually interesting.

The layout, as used in the project, has no vertical menu and just has one column. But there is room reserved for a second column, which I plan to add. The menu will be located on the right-side of the screen. I like right-side vertical menus. It keeps the mouse cursor close to the scroll bar, allowing the user to rest their mouse hand.

I plan to also add one or two more visual tweaks.

Underscore Hack

My point here is that while originally developing the stylesheet, I started with skidoo lean and added a couple hacks. One of the hacks was something I’d never used before: the underscore hack. It’s a nice way to provide separate rules for IE and other browsers without resorting to an entirely new selector using the * html hack.

So give that page a look.

Also be sure to check out the associated min-height hack page. I think some of you will find a lot of uses for that particular hack.

Cheers!