englishteeth.co.uk

I couldn’t leave this alone. A colleague was wrestling with some css to have a number scrollable tables within a larger scrolling area hold their column headers in place.

There were the plenty resources out there that nearly provided the solution, but each step had a draw back.

Did I mention that the target was IE6?

This post got us most of the way there.

Unfortunately, scrolling a table caused the header to bounce around horribly. Which through a bit of trial and error turned out to be caused by setting the background colour of the scrolling div containing the table. (Obvious! How didn’t I see that one straight off?)

Next there was the scroll bars.

overflow: scroll;

Causes both scrollbars to be always visible. Disabled if they don’t do anything,but always there.

overflow: auto;

Causes just the necessary scrollbar to show.

This was preferable for tables which were only ever going to have vertical scrolling. Unfortunately, when the table only had a couple of rows, there was a scrollbar sized gap on the right.

The fix for that…

div.scrollTableContainer table {
width: expression(offsetParent.clientWidth+"px");
}

A bit of javascript, dug up from here, to set the width to the visible width.

But these shorter tables also left blank space below them and as found before, we could not set the colour of this space without the horrible jumpy headers!

Searching around, if became apparent very quickly that css flickering in IE6 was a common problem with possible solutions.

• No more IE6 background flicker
• Fixing the abominable

But not quite… everything I found addressed the issues of images flickering, but although the causes of the flicker were the same, the jumping header as a side effect was not.

So, in order to have the desired colour while maintaining…

background-color: transparent;
background-repeat: repeat;

…was to add a small background gif of the desired colour.

No. Jumping headers are back! Seems that there is another IE6 bug whereby the the default background attachment is not implemented correctly.

background-image: url(colour.gif);
background-attachment: fixed;

Should handle that.

So in summary, we needed a bit of Scrolling HTML Table with Fixed Header, followed by a touch of No more IE6 background flicker and topped off with Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.

Not much then.

Next time, I’ll mind my own business.

I was needing to brush up a style sheet and wanted a clean way to apply drop shadows, which I found here.

I often use the in-line lists for page navigation, but I hadn’t come across the use of floats described in this post here and here. However, while looking for a slick way of producing “rounded corners”, I found an implementation using sliding doors that happened to have the drop shadow I was after as part of the border image here, though I must admit to preferring the variation I found here.

And when I needed to print CSS background images, this post proved most helpful.

Along the way, I stumbled across the site Position Is Everything which looked like it might be worth making a note of.

Following the news of the Spring Source Application Platform I need to look back at this post on web applications and OSGi.

I also enjoyed this post on converting Java to Groovy.

Following a little foray down the path of UML modelling XML Schemas for a colleague, this article articulated what I was trying to get across much better than I could have. Rational Software Architect unfortunately couldn’t quite grasp it quite as easily. No change there then…