When we redesigned the RoundedDesign site, there were several interesting things I discovered, as I tried to make the site work in the omni-irritating Internet Explorer 6. One of these was the problem IE 6 has with the overflow:visible CSS property.

in IE 6, if you give a fixed-height element the overflow:visible property, instead of keeping the element at the height you gave it IE will expand that element. This is what happened to my menu, for instead of allowing the tabs to overlap the border of the body it pushed the bottom of the header down. Irritating!

However, after searching for a while I found a good (if slightly weird) solution: if you give the element overflow:hidden and its child that overflows position:relative, IE 6 will consider this overflow:visible. This unfortunately doesn’t happen in IE 5.5 and under, but since their market share is so low we don’t really need to consider them.

Therefore, the fix is simple. Say you had the .overflows element (100px) inside the .fixedheight element (50px) then you just have to use an IE 6-only hack (such as my favourite, the star hack), to assign overflow:hidden to .fixedheight and position:relative to .overflows.

/* Normal CSS */
.fixedheight { height:50px; overflow:visible; }
.overflows { height:100px; }
/* IE 6 CSS */
* html .fixedheight { overflow:hidden; }
* html .overflows { position:relative; }

Simple but weird.

Normally, I try not to use hacks, because they are… hacks, but there are sometimes irritating problems in IE that just won’t go away, like the overflow:visible bug in IE 6.

So, we have to resort to something that will allow a CSS selector to be read only in IE 6 and below.

Enter the star (*) hack. It is cool, primarily because it is valid, but also because it is more logical than some of its weirder contemporaries.

In IE 6 and its microsoft predecessors, there is a strange “element” that surrounds your html node – the <*> element. This doesn’t occur in other browsers, so to use the star hack all you have to do is place the asterisk character followed by the html tag, and then your normal selectors. For example:

.myclass {
  /* these properties will be parsed by all browsers */
}
* html .myclass {
  /* these properties will only be read in IE lte 6! */
}

Because the * is a valid CSS selector (but meaning “all children”, not as a tag), this CSS code will still validate perfectly. And it works!

View ›

Isn’t the <canvas> element wonderful? In this experiment, I made a small snake game, with five speeds.

The script is actually adapted from a snake game I wrote for the TI-89 calculators in TI-BASIC, which is why the method may seem a bit… unusual.

Feel free to use the code, but attribution would be nice.

Oh and by the way, this game only works in canvas-supporting browsers, i.e. not Internet Explorer. There also may be bugs in non-Firefox browsers.

Conditional comments are specially formatted comments not normally parsed by HTML browsers that allows you to have certain sections of your code read by certain browsers or not. Importantly, though, conditional comments only work in IE!

<!--[if IE]>
  IE only content or tags.
<![endif]-->

However, is it wrong to use these tags?

Personally, I believe so. Primarily, because they go against web standards. The HTML 4.01 specification states that “Information that appears between comments has no special meaning” – so no matter what you put between the it shouldn’t change in any way the appearance of your page. Conditional comments, however, do – against the specification.

Read more...

Since at RoundedDesign we have a philosophy that indicates that we will not use third-party code and attempt to create everything ourselves, I was quite unhappy about the fact that our blog was previously run using WordPress. Therefore, I am happy to anounce today that we have created a new blog system based entirely on our own work, with the RoundedDesign Blog System’s codebase completely unique.

However, since we have absolutely no idea how to create a JavaScript WYSISYG editor, the RoundedDesign Blog System (RDBS) will continue to use the wonderful TinyMCE until our knowledge improves.

The RDBS is very simple, with only one page acting as the front-end, but with a fully function administration system meaning no direct database querying. Comments are open for anyone to submit, and there are several categories. Alot of the features resemble those of WordPress, and we have drawn much inspiration from that system, though none of their code was used.

What more can I say? If you have any comments or suggestions, you can leave them in the comment area below. Enjoy.

View ›

View

One of the most common layouts I find people asking for are two or three column layouts that expand to fit the browser’s width and have both columns the same height always. I have seen several solutions to this, but none of them were able to incorporate images as the borders and backgrounds for the layout. So, I decided to attempt to make one.

I also made it so that no image tags were used, which is why there appear to be a lot of division elements.

I won’t attempt to walk through the entire structure, as I did start to do that and found I’d never finish. So I’ll just highlight some of the features that make it work.

Read more...

For really cutting edge things which I have made but don’t have time to post about, or can’t think of what to say about (I write pretty weird things sometimes), you can check out the Lab at http://lab.aspektas.com/. Feel free to use things there but credit would be nice. Copyrights on individual files must also be retained.

By the way, some things on there may not work as I just randomly upload code sometimes.

In my time designing, developing and publishing websites, and also during my time on the W3Schools Forums, I have come to discover various things, some of which seem not to be generally known. Therefore, I have decided to create a blog where I can post the things I have found interesting, discovered, or invented along my journey. Join with me on the road, and see what you can learn.

Enjoy.