Vertical scrollbar problems in IE6

The real story of the scrollbar width problem in IE6 is easier circumvented than I thought.
This is the actual problem: when declaring an inner box inside a scrollarea having a width of 100%,
the inner box takes over the width of the scrollarea, and the scrollarea gets bigger with the width
of the scrollbar. I guess it's the IE6 box problem revisited, although I was taught that it only happened
in quircks mode, so I never actually bothered about it..

220 px ruler

Here, the width is not as expected in IE6
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0  1  2  3  4  5  6  7  8  9  0

This is a solution I found on the net, but it is not satisfying for me: part of the content is also
hidden by the scrollbar, and it also assumes the scrolbar width is exactly 16px.

220 px ruler

Here, part of the content is hidden in IE6.
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5  6 7 8 9 0  1  2  3  4  5  6  7  8  9  0

Of course, we could remediate that by having another box inside like below, but that means
inserting extra HTML code only to fix this item...

220 px ruler

Here, no content is hidden in IE6.
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0  1  2  3  4  5  6  7  8  9  0

But the simplest solution is not use a width of 100%: the content seems to scale automatically
to the right width.

220 px ruler

This is the best solution.
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0  1  2  3  4  5  6  7  8  9  0

New device, new inspiration

Tuesday, I bought a new device: a Mio Moov 510 GPS device. As usual, it took me quite some time to come to a decision, as I want to spend as less as possible and have as much functionality as possible. The reason I realized I needed a route planner after all is the usual annoyances when I'm driving and my wife needs to read the map. Last year, I borrowed a GPS enabled Mio PDA to drive to my holiday destination, and that was such a good experience that we decided we should never go on holidays without one anymore. And now with hew holidays to be planned, I had to made a decision on what to buy. As my wife needed a new mobile phone, I first tried to see if we could get a device that would do both. Choices seemed quite limited: I found one PDA device from Mio that had both functionalities, but the price including navigation software was about double the price of a standalone gps module, and the damn thing didn't have Wifi. Other choices included an Android phone, but the only turn by turn navigation system there is based on openStreetMap, but I didn't want to take the risk to use that a only database for driving around on my holidays. (Professionally, I would care less ;)). IPhone also fell off as there were only vague plans from TomTom on supporting the device, and the pricing would be too high anyway. So I decided to go for the Mio 510, and buy a low budget Bluetooth receiver so I could play with it from J2ME on my current mobile phone (Nokia 6300).

So I bought the Mio, and started to explore the stuff a bit. It turned out
that the Mio can store logs, which can be interpreted by the open source application GPSBabel, and thus allows me to export my tracks to google earth. As it also exports to gpx, chances are that I can use it to geotag my pictures too, which was the first case I wanted to do on my mobile!

So I am currently investigating how to get the Mio to store enough data for two weeks holidays, as the logs seem to grow very rapidly. I should try to get some statistics some day...

This is what currently is in the gpslog.ini file:

[GPS logging]
enabled = 1
maxfiles = 10
rotate = 1
maxfilesize = 2097152
location = \My Documents\


First thing I am trying now is to change the data location to store the data on the SD disk, as the space on the device is surely too limited to store this amount of data. I tried \Storage Card\, but that didn't seem to work. I found on gpspassion that the name of the folder is apparently in the registry, but I got no idea how to get there. Searches on the net also gave no results. So next thing I will probably try is to unlock the device using the informations on gpspassion.

Another problem I discovered is the short battery life: the device only has a 700mAh battery, which according the the manufacturer gives you 2,5 hours. I also have the feeling that this is rather exaggerated. Probably I should try to hook up extra NiMh batteries, since 4.8 volts is actually enough to drive the USB port. (USB specs claim 4.75 to 5.25 volts) Using2900mAh batteries should get me up and running for 5 times the current duration... Another track to investigate is solar panels, but I think I will be hard to found something that delivers (700 /2.5) 280mA * 5V. Probably, this problem is even more urgent than the previous one, as we were also planning to use the device on bike/walking trips...

Next thing to find out is an application to change the exif data inside my pictures...

Internet explorer 6 AND 7

Yes, it is possible to install both: solution from tredosoft
Now that I know this, I can starting our application as well on IE6 as IE7 too, as I already heard there are some problems with IE7. More topics on this will folow shortly!

Maintainable CSS

For the project I'm currently doing, I need some IE hacks in my CSS stylesheets.
Up to now, I've been using the following approach: I have one base.css, which includes a layout.css, a color.css and a typography.css. This approach seems to be working well until now, but my css code is getting dirty by the various CSS hacks I've been applying to get IE6 to do whatI want it to do.

So now I'm thinking to split off all the IE6 anomalies in a separate baseIE.css, using the conditional include in the html file:

<!--[if IE.xx]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/IEstylesheet.css">
<![endif]-->

This way, base.css will be much clearer, and the whole code will be easier to maintain.

Scrollable part above fixed part in html container

As a follow-up of the previous post, I also want to publish a solution for the next situation: what if there is no fixed part above the scrollable part? Problem here is that setting top undoes setting the bottom in IE.
So we have to make sure that the top is not set in IE6 (using ones of the infamous CSS hacks):

html>body .content{
/* this part is moved out of the common part,
and will only be taken into account if the browser is not IE6 */
top: 0;
}


Now we still have to make that the height is correct in IE6, as the height is set to auto by default:

height: expression((offsetHeight +offsetTop)+'px');

The problem is that we can't retrieve the bottom from javascript,
so we have to rely on the fact that the height is set automatically, and the top will be set accordingly. We want the following: newHeight = parentHeight - bottomOffset, while bottomOffset = parentHeight -topOffset.

Non-scrollable pages with fixed header/footer in CSS

I had a lot of trouble creating pages that don't have scrolling pages when the data on them gets too large. However, I think that it's an important asset if you're creating web applications: an application should always have all its functionality visible on loading (without having to scroll down). (I often refer to this as the dashboard feeling.).

This is how I did it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
body, html{
height:100%;
margin: 0px;
position:relative;
}
.content{
top: 10em;
/*next line is here because IE6 ignores bottom when top is defined.
The line itself will be ignored by other browsers */
/*take care because the value for the bottom offset is calculated in function
of the top, because we want to be dependent on em units */
height:expression(offsetParent.offsetHeight - offsetTop*2 + 'px');
bottom: 10em;
width:40%;
position:absolute;
background-color:red;
}

</style>
</head>
<body style="background-color:yellow">
<div class="content">
test
</div>
</body>
</html>


Note the tricks I had to do for getting the thing working in IE6: since top and bottom are not working correctly together (see bug report on quirksmode), I had to use expression here, which introduces sone javascript in the css. Also important: the header and footer have fixed heights defined as em, so if the user chooses the increase/decreaase fonts, the header/footer scales along.

My Flex and Maven experiments

Trying to mavenize the as3mock project last days, as I need for a customer. However, flexmojos seems to be in some intermediate state now, meaning documentation is quite fuzzy now.
However, I got the archetype for libraries working using the following sequence:

• mvn archetype:generate -DarchetypeRepository=http://repository.sonatype.org/content/groups/public -DarchetypeGroupId=org.sonatype.flexmojos -DarchetypeArtifactId=flexmojos-archetypes-library -DarchetypeVersion=3.1.0

  That is similar to the explanation on the flexmojo wiki, but with changed version number.


• applied the changes as described on Carsten Schlipf's blog.


• if you want to run the tests, you should also make sure that flashplayer is in the path