phoboslab

Posts tagged with “HTML”

My New Portfolio

Sorry for the lack of updates. I’ve been quite busy with a huge project that I can hopefully show you in some weeks. And I can assure you Yuckfu isn’t dead either.

Another thing I finished up yesterday was my new portfolio. Not that I haven’t done any of these before, but this is one new! And fancy! Did I mention its new?

This time I spent much more time on the actual layout and functionality of the portfolio itself. The main feature is that you can pan the document, just like you would pan the map on Google Maps. This is all done with a small JavaScript, based on the wonderful jQuery library. While the new portfolio makes heavy use of transparent PNGs, the site still looks okay-ish and remains perfectly usable in IE6. It also degrades gracefully for browsers that have JavaScript disabled or the iPhone, which has no notion of onmousemove events.

I also made sure that the print version from all major browsers looks good. The Hartija Css Print Framework is a great starting point for creating specialized print Style Sheets. I only had to tweak some values and remove elements, like the menu, that make no sense in print.

Sunday, February 15th 2009 / Comments (0)
Tags: Javascript, CSS, HTML

IE Textarea 100% Width Bug

I recently finished work on tinyprice.de, an online community for exchanging coupon codes. The programming part was not a problem at all – just simple database I/O etc. – the layout however was quite a challenge.

Of course, the only browser making problems was Microsofts IE6. It was quite a struggle, but in the end I managed to work around every bug, without using any dirty hacks.

One particular problem I encountered, was a textarea for user comments, that had a width: 100% style. In IE6 it always spanned over the whole page, not only over the parent element. The solution I found after a lot of research, was quite simple: just wrap the textarea in a fieldset AND a div element, and everything works fine again:

<fieldset>
    <div>
        <textarea style="width: 100%;" name="content"></textarea>
    </div>
</fieldset>
Monday, October 8th 2007 / Comments (26)
Tags: CSS, HTML