No Roots

CSS: Works in IE but not Firefox?!

So you've put together a template that looks great in IE. But when you check it out in Firefox it's a mess! Are these bugs? Purists will tell you that the Firefox is reading the CSS right... it's your IE that is wrong. Whatever. The point is you need a fix. But before going to a lot of work, make sure you have the latest Firefox installed as previous version have bugs you needn't waste time trying to work around.

So here are the big three noob errors:

1. Divs centrally aligned in IE but not in Firefox.
In IE it looks like this:But in FF it looks like this:

<div style="text-align:center; border: 2px solid black;">
<div style="border: 2px solid red;"></div>
</div>

Solution: IE has applied the text-align property to alignment of the inside div however FF interprets CSS strictly: you need to align centrally using auto side margins.

<div style="text-align:center; border: 2px solid black;">
<div style="margin-right:auto; margin-left:auto; border: 2px solid red;"></div>
</div>

2. Divs floating outside containing box
In IE it looks like this:But in FF it looks like this:

This problem is well addressed by Holly 'n John here. Once again, IE is doing it "wrong" but it takes a huge amount of effort to do what you want in the "right" way. What's you're looking for is the Holly hack: application of :after properties to the containing div:

.blackbox:after { 
                  content: "."; 
                  display: block; 
                  height: 0; 
                  clear: both; 
                  visibility: hidden; 
 }
 

There's some further tweaking required to look nice on Mac IE so read details of the entire hack.

3. Missing backgrounds
In IE it looks like this:But in FF it's like this:

Once again, Firefox is right. The problem is that your div probably has no content (as its contents have been "floated away") and so it has zero height thus no background showing.

You can fix this by actually specifying the height, or removing the float properties of the divs within this container or applying the holly hack explained above to stretch the containing box. If that doesn't work, try moving the relevant style definitions to the bottom of your style sheet as some of your other code may be overriding it. The DOM inspector (see below) makes finding this much easier.


Still stuck? You should do this:

  • Run your page through the WC3 Validator and fix ALL those stupid parse errors and the like no matter how benign they may seem. I couldn't get borders to show up on one div and it turned out that using HTML between the <STYLE> tags was messing it up. The validator spotted this.
  • Install the Mozilla DOM inspector (just reinstall Firefox selecting "Custom Installation" and "Developer Tools"). This takes 2 minutes and is worth every second. It makes it easy to see what properties are applied to elements of your page (more here).
  • And while you're at it, now is as good a time as any to figure out the difference between CLASS & ID elements.
  • If you've gotten this far then of course you should thoroughly read Position Is Everything.
  • Still hungry? More links listed here - by the guy who brought you the cool fonts-resize code that I use.

With all that said, you are probably looking at my page from a browser I haven't tested this with and it looks like crap. If so, your snarky comments are welcome.

Labels:

Gunung Lambak

Gunung Lambak is a hill (read: very small mountain - 510m) near Kluang in Malaysia. It's a good day trip for trekkers out of Singapore - which is what I was this past weekend.

The trek was rated easy - this is rather misleading. It is relatively short but the upper part of the trail is very steep and much of the climb involved scrambling on all fours instead of hiking. Pictures from this guy's album puts it into perspective:

  

Length: If you are very fit then you should be able to get up and down in about 2-2.5 hours. The group I was with took about 4-4.5 hours with many breaks along the way.

Gear: I would highly recommend gloves (leather padded cycling gloves would do fine) as you will find yourself grabbing rocks, trees and rope along the way. Good hiking boots with a deep tread are ideal as some of the incline was a bit muddy and slick. Some people did the climb in running shoes but with difficulty. A few people had Leki poles. Personally I think the terrain was too steep to make use of walking sticks as you'll want both hands free to climb monkey style.

Fitness Level: Not for couch potatoes. About a quarter of the group I went with decided not to do the entire hike as it was too arduous. Again "easy" is misleading. It's easy if you hike all the time and are in good shape. You can't do this if you never exercise. Let me put this in perspective - I was able to huff and puff my way through it and was in the front pack of the group... saying that, two weeks ago I was outpaced at MacRitchie by a little French woman in open-toed sandals. Moderate fitness is enough to survive this hill.

 

Training: Train for this by doing the MacRitchie Tree Top walk (if you can do two circuits of the 1.5km Tree Top walk, you'll be fine) and/or climb stairs. You should be able to climb 10 flights of stairs without dying. Practice climbing stairs two at a time as that's the kind of work your quads will be doing.

Also:

  • Distractions: Bring a book or some music. The bus ride from JB is about 2 hours. The trip was an incredibly shocking yet boring display of monoculture: palm trees lined the road the whole way.
  • Clothes: Bring a change of clothes, a towel and some soap: there are shower facilities at the pool at the bottom of the hill. Cost: RM2.
  • Cash: Bring about RM20 in small bills: You have to pay for every toilet you use. There are also some small food stalls selling fruit and drinks at the hill.
  • More cash: If you're going with a tour group on the cheap, bring small change for Singapore public transportation on the causeway between the two checkpoints.
  • The usual: 2 litres of water, passport, light hiking gear, bug spray, snacks. Sunscreen not really required as you're under foliage the whole way.

FYI: Looking for a place to eat? We ate at Cin Cin restaurant in Kluang after the hike and it was not bad.

Labels:

Raw Foodie Singapore: Green Bags

One problem with having a lot of fresh fruits and vegetables is that they can spoil and there's wastage. Many foods ripen and spoil due to the release of ethylene. For detailed info about this process see here.

There is a solution in the form of ethylene absorbing bags. The most well known brand is Evert Fresh but these are not available in Singapore. There was another brand called Ever Fresh from japan that used to be carried by Cold Storage but no more!

Fortunatley, I hunted down the local distributor who still carries the bags. At S$50 for 100 bags, this is cheaper than the Evert-Fresh product available at Amazon.

You can buy them here (call first to confirm stock):

Tantraco Ent Pte Ltd
32, Ang Mo Kio Ind Pk 2
#04-17, Sing Ind Complex
Singapore 569510
Phone : (65) 64823575
Fax : (65) 64824398
Email : info@tantraco.com.sg
Open 9-6pm weekdays.

I got some and will test in coming weeks to compare to normal bags. I use them now - so far so good but cannot say how much better they are than normal plastic bags. But they are sturdy and re-useable and so far nothing has spoiled using them.

Labels: , , ,