Month: February 2015

Angry Explorer Extends Italics

If you’ve noticed this blog acting slightly erratic (on second thoughts, nobody would) it is because I have been stung by yet another IE bug. It makes a change; this time it isn’t directly down to CSS, and instead is a bug in the way the rendering engine handles italics.

The problem starts when the browser has to spread the individual characters of italic text over a larger space, as those leaning over will take up more room than their vertical counterparts, similar to kerning. Now that isn’t necessarily a bad thing, but as usual, throw IE into the mix and hair loss is imminent.

The example on the left shows the gap between the photo I took of the Alps and the light grey border; it’s only about 2px or 3px but is intensely annoying. The space Explorer made to compensate for the elongated italics has spilled out right over the margin because of the justified text. Luckily though, there is a remedy that does involve CSS.

Now this bug is apparent over all Explorer versions. Although as of yet, I can only fix this bug under IE 6 and 5.5 – unfortunately not 5.01. Or to put it rather more precise, I can’t fix it under 5.01 without sacrificing the text float functionality. That would be the way the text flows around an image like above.

So tell me already! Well I would be rather amiss if I didn’t credit my source; the excellent Position is Everything collection of CSS hacks. Now the code they suggest is below:

/* */
* html #main {
overflow: hidden;
o\verflow: visible;
width: 100%;
w\idth: auto;
h\eight: 1%;
}
/* */

I’ll explain this line by line. First of all it starts off with a comment hack designed to hide it from all non-Explorer browsers. Next it uses the star selector hack, which is mistakenly parsed by Explorer. In this case HTML is not the child of any element, so shouldn’t be parsed as it has a * in front. The next statement is kinda obsolete in the case of my blog, but I’ll explain it anyway. If you remember I said that the italics spill out, well basically hidden chops off the overhang. If you like 100% positions it up for the chopping. Unfortunately I also found that it upsets the nice way text floats around an image.

So why is it obsolete? Well the majority of the code above is only there because of IE 5. The attribute of visible is enough to correct the problem in 6 and 5.5. After a while it does get tiresome messing around with different attributes and hacks. You have to decide how important the trade off between time and who is going to benefit from it all.

* html #left {
overflow: visible;
}

Is enough for me. If you find your browser makes a little gap between the header picture and the division, get Firefox or Chrome!

 

How to Find CSS Hacks?

Ever wonder how people find their CSS hacks? No? Well I do.

They must sit at their computers typing in random stuff and abusing code, effectively torturing browsers into doing strange strange things. Maybe they construct programs that export malformed CSS so they can leave browsers stuggling night and day–possibly the system is rigged up to some sort of bell that makes a noise everytime a browser fudges something up. Maybe the reaction they get is similar to the little bell on a microwave: salivation, but instead over food, over code. Erm…anyway I found a hack by accident–this is probably how they find them.

I was trying out a couple of colours (for simplicity lets just say I was trying out the shades black and white) for fonts. I couldn’t remember the hexadecimal codes for them, so I just commented them out to see which was the best one:

.hack {

color: /* #ffffff */ /* #000000 */ #ff0000;

}

Obviously the class I was working on wasn’t called “hack” but that’s the sum of it. I found the nice shade (i.e. red[#ff0000]) but forgot to take out the commented shades. When I went to test the site on my variety of browsers IE 5.5 fudged it. The writing wasn’t red. I was seeing red. I didn’t know why it wasn’t working, but eventually found out it was the commenting to “fault”. Now if I had discovered that a while ago I could give it a name, but no doubt someone already has. Nice to accidently discover something though. Try it yourself–if you dare…

<style>

.hack {

color: /* #ffffff */ /* #000000 */ #ff0000;

}

</style>

 

<span class=”hack”>Hello World!</span>

I think I’ll start a trend for silly CSS blog post titles.