Semantic Website Heading Trick

Ok this is thinking outside the box to solve a somewhat annoying and completely arguable problem.

The problem: I want my websites heading to have two words and one of those words I want to be in bold, or, and maybe even in a different colour.

The usual solution:
{code type=php}

firstWord secondWord

{/code}

Looks something like this after some CSS – “firstWird secondWord

The question I ask myself is simple, does Google like me putting spans, an element with no semantic value inside of my h1’s, h1’s being an element with very important semantic value?

If it doesn’t, why should I be punished for using text instead of an image to make my title stand out? Seems annoying doesn’t it. Well it annoyed me so much I came up with a solution.

Keep Reading...

Opera CSS Integer bug

Ok found this bug while working on a project that required a scrolling content bar that wound up needing widths defined in the stylesheet greater then 32,767 px.

Some people will immediatly notice the 32,767 as the programatic max value for an ‘Integer’, which is exactly what the problem is. Opera for some reason, and it is completly alone here, as all other browsers even the dreaded Internet Explorer 6, can handle CSS values that exceed this limit. Opera will silently fail, throw no warning about it and ignore all styles that follow non integer numbers in your selector.

There was no way around this I could find to make it work in Opera, simply put.

Any number bigger then 32,767 for a value in CSS when displaying with Opera 10, will be ignored and cause all following styles in that selector to be dropped.

Heres an example.


div #myElement {
    position:absolute;
    height:500px;
    width:50000px; 
    background:#444;
    font-weight:bold;
}

The above code will cause the div ‘myElement’ to have no selectable width, and will never apply the background or font-weight properties!

Keep Reading...