Idiot Banter

Facebook Is Fed Up With IE6

Posted By:

Matt

Posted On:

February 25th, 2008

Posted In:

CSS & XHTML

Comments:

4 Comments

My friend Dave and I always joke about creating a style sheet that we’d only serve to people browsing with IE6 that just has * {display: none;}. For all you non-geeks this means that everything would be hidden, you’d see a blank page. I have seen a few personal blogs with messages that show up saying something along the lines of “your browser is old, get a new one” but until now I have never seen a “corporation” with a similar message.

When you visit Facebook using IE6 you get a message above your news feed (see above). The message reads:

Please Read This!

You may want to upgrade your browser.

You’re using Internet Explorer 6 to browse Facebook right now. Facebook will work better if you upgrade to Internet Explorer 7 or switch to another browser.

The message then lists links to upgrade to IE7, switch to Firefox, Safari or Flock.

I wonder what it took for the Facebook developers to convince their higher ups that this was something they should do. As far as I can see the site works fine in IE6. Lucky guys, no more IE6 for them….

The New Comedy Network Video Player

Posted By:

Matt

Posted On:

January 27th, 2008

Posted In:

CSS & XHTML

Comments:

1 Comment

For the last few months the CTV Digital Media Group (where I work) has been working really hard on a new video player. It went beta last Thursday on The Comedy Network, check it out.

What I Had To Do With It

I am responsible for all of the HTML and CSS in the new video player. I cut the Photoshop mocks into a working static model and advised on best practices when it came time to make the player work by dynamically adding/changing HTML and CSS using JavaScript. I wrote all of the CSS which is pixel-perfect in every major browser. The video player had to be 100% skinnable for easy use on any CTV property so if you look behind the curtains you’ll find colour.css, by switching this style sheet we can change the entire look and feel of the player instantly. If time is tight we can launch a new video player with a default skin and the appropriate logo in 30 minutes. If we have more time, I can fully customize every aspect of the player in as little as 4 hours (you’ll see as more are launched). This is by far the biggest project I have ever worked on and I think I did alright. I even used surprisingly few CSS hacks (in my opinion).

What You Can Do

Go watch some videos! They have every episode of South Park ever, for free, whenever you like. The new Tom Green show is hilarious and Reno 911 is always good for a laugh.

Submit some feedback, let us know what you think of the player.

Read what Jonathan has to say about it, he’s the boss.

Overflow-y CSS Property And Safari 2 For Mac

Posted By:

Matt

Posted On:

January 7th, 2008

Posted In:

CSS & XHTML

Comments:

2 Comments

At work we are making a web application. We have a "Library" set up that allows users to easily navigate through a huge amount of content. This library consists of 4 vertically scrolling divs side by side, think columns. At first I was using the overflow: auto; property and value so that a vertical scroll bar would show up only when necessary, otherwise there would be no scroll bar. As we started testing with real content it became obvious that not only did it look funny when some columns had vertical scroll bars and other’s didn’t, it was also slightly harder to use due to the inconsistency of the columns.

My solution was to use overflow-y: scroll;. overflow-y: scroll; tells the browser that the divs should always have a scroll bar on the y axis (vertical) even if the content doesn’t need to scroll. This allowed for a better looking, easier to use "Library".

Here’s the catch, I didn’t properly test this in all browsers and it doesn’t work in Safari for Mac. overflow-y is an Internet Explorer proprietary property and it just happened to work in Firefox. The W3C has recommended that overflow-y and overflow-x be added to the spec for CSS3 but for now, no luck. Safari just treats the divs as though they have overflow: hidden; declared so anything that doesn’t fit in the div gets cut off and you have no way to access it.

I suppose the convention of only having scroll bars when necessary is a Mac thing but I would still like the option to control the scroll bars in cases like this. I guess I’ll have to "hack" my style sheet and pass overflow: auto; to Safari while passing overflow-y: scroll; to IE and Firefox and just live with the fact that the scroll bars won’t be consistent in Safari.

***UPDATE: This post only applies to Safari 2 for Mac but I’m gonna post it anyway.

Internet Explorer Does One Thing Right

Posted By:

Matt

Posted On:

November 22nd, 2007

Posted In:

CSS & XHTML

Comments:

4 Comments

Internet Explorer does everything wrong except for zoom!

When you type ctrl+ in Firefox, only the text is enlarged. This causes the page to either re-flow to make room for the larger text, or explode if your containing divs have a fixed height. When you type ctrl+ in Internet Explorer 7, the entire page zooms in. The text gets larger, the images get larger, everything gets larger proportionally, it’s amazing. Why does Firefox assume that if you have trouble seeing the content of a web page you’d like only the text to get bigger? It’s wrong and it only leads to people using ctrl+ as a test for how well I did my job, no matter what the restrictions (fixed height).

When Internet Explorer 7 zooms in on an entire page everything is easier to read and the page doesn’t break. It’s a better user experience.

This concludes the only good thing I will ever say about Internet Explorer.

XHTML & CSS: The Complete Beginners Guide

Posted By:

Matt

Posted On:

November 20th, 2007

Posted In:

CSS & XHTML

Comments:

No Comments

Over the past few months I have been writing CSS & XHTML tutorials. These tutorials are aimed at beginners and I write them hoping that they are easy to follow. I hope that they will steer those interested in Web Standards in the right direction.

To make things easier to find, all of the tutorials are listed below. Take a look and feel free to ask if you have any questions.

XHTML Tutorials

• A Beginners Guide To XHTML
• XHTML DOCTYPES, Divs, Spans and Tag Attributes

CSS Tutorials

• An Introduction To CSS
• CSS Selectors
• CSS: The Cascade
• CSS Specificty
• Using Multiple CSS Classes

Useful Things

• CSS Tips And Tools For Web Designers

Disabling Deprecated HTML Using CSS

Posted By:

Matt

Posted On:

November 11th, 2007

Posted In:

CSS & XHTML

Comments:

No Comments

CSS beauty linked to an amazing article by David Hellsing at David’s Kitchen titled Disabling Deprecated HTML Using CSS. In the right situation these techniques could be amazingly useful, check it out.

"I have made some experiments from time to time with disabling deprecated HTML using CSS only. The idea is to preserve the natural cascade and inheritance in all browsers, while gracefully disabling the HTML we don’t want the client to use. That way the client will stop using it, simply because it doesn’t “work” anymore. A graceful and gentle way of guiding the client in the right direction."

Does your CMS allow content people to use font tags to make the text huge and pink? Does the text editor on your message board allow junk HTML tags that break your beautiful design? Do you have to fix a page using CSS but you’re not allowed to touch the HTML? You need to use David’s style sheet. Get it.

The Article: http://monc.se/kitchen/140/disabling-deprecated-html-using-css

CSS Specificity

Posted By:

Matt

Posted On:

November 6th, 2007

Posted In:

CSS & XHTML, Tutorials

Comments:

3 Comments

The second key feature of CSS that makes it so powerful is Specificity. Specificity is how specific your selectors are. p {color: #000;} will make everything in <p> tags black, body p {color: #F00;} is more specific and it will make everything in <p> tags red no matter where the selector is called in the style sheet.

Getting More Specific

To make a CSS selector more specific add more HTML elements or attributes to the selector. p {color: #000;} selects all <p> tags, not very specific. To get more specific we can target the <div> the <p> tags are in (let’s pretend they are in a DIV with an ID of “Header”).

The HTML


<div id="Header">
  <p>This is the paragraph text.<p>
</div>


The CSS


p {
color: #000;
}



#Header p {
color: #F00;
}


Everything in <p> tags will be black except for the stuff in the <p> tags inside <div id="Header">, that will be red. Specificity allows you to use less classes and IDs to target HTML elements. If you were using the “Header” div already for other purposes and you wanted only the <p> tags inside that div to be red, why add another class when you can just get more specific?

A Crazy Example

Here’s a crazy example that shows you just how you’d avoid writing out a bunch of CSS just to change one property of one tag in one div.

Let’s pretend you want everything in <p> tags to be black and 12px big with a padding of 5px and a line height of 24px. You also want everything in <p> tags in the “Header” div to be red and everything in <p> tags in the “Footer” div to be white. Instead of writing the font size, padding and line height out 3 times, just do it once and use specificity to change the other colours.

The Crazy CSS


p {
color: #000;
font-size: 12px;
padding: 5px;
line-height: 24px;
}



#Header p {
color: #F00;
}



#Footer p {
color: #FFF;
}


Everything in <p> tags in the “Header” and “Footer” divs will keep the padding, font size and line height but the colour will be over-written because those selectors are more specific.

Conclusion

Specificity will save you time and bytes. It will make your CSS easier to follow and it will prove to all of your friends that you understand CSS better than them.

CSS: The Cascade

Posted By:

Matt

Posted On:

November 4th, 2007

Posted In:

CSS & XHTML, Tutorials

Comments:

No Comments

Most people new to CSS think it’s great for changing font sizes and colours. It is. But as you start to learn more about CSS you eventually realize that it’s a lot more powerful than it seems. The two key features of CSS that make it so powerful are The Cascade and Specificity. Here’s everything you need to know about the Cascade.

The Cascade Within A Style Sheet

The C in CSS stands for Cascading. Cascading means the CSS is read from top to bottom and whatever property value is called last is the property value that will be used. Here’s an easy example:


p {
font-size: 12px;
}
p {
font-size: 14px;
}


The second font size will overwrite the first one and the text will be 14px.

The Cascade Within A Document

The cascade works within a style sheet as well as outside of style sheets, within a document. If you call two style sheets in the head of your HTML, the cascade works from the top to the bottom and from the first style sheet to the second. If you have p {font-size: 12px;} in your first style sheet and p {font-size: 14px;} in your second style sheet, the font size of your <p> tags will be 14px.

The cascade also applies within the three different places you can declare styles, a style sheet called in the head of your HTML, styles declared directly in the head and inline styles. The cascade works in the order I just listed. Inline styles will overwrite styles declared in the head which will overwrite styles within style sheets.

Conclusion

The Cascade itself may not seem all that useful when you first look at it but when it’s used in combination with Specificity the true power of CSS is unleashed (haha). Next time, Specificity.

CSS Selectors

Posted By:

Matt

Posted On:

October 24th, 2007

Posted In:

CSS & XHTML, Tutorials

Comments:

No Comments

Now that you know the basics of CSS we’re gonna get into some of the different ways you can select HTML elements.

Selecting Elements Directly (Type Selectors)

You can use CSS to select elements directly. If you want to target all <p> tags your selector will just be p, like this:


p {
font-size: 12px;
}


This will give all <p> tags a font size of 12px.

Selecting Classes and IDs

If you don’t want to select all <p> tags you can give one or some of the <p> tags classes, <p class="SoCool">. You can use the above selector to give all <p> tags a font size of 12px and then you can use the class to select only the <p> tags with the class of “SoCool” and make them pink (pink is cool).


p {
font-size: 12px;
}

p.SoCool {
color: pink;
}


The dot between the p and SoCool means “with a class of”. So all <p> tags with a class of SoCool will be pink. IDs work the same way but instead of a dot you use a hash (#). Let’s pretend SoCool was an ID instead of a class:


p {
font-size: 12px;
}

p#SoCool {
color: pink;
}


Just remember, you can only use an ID once on a page so if you need more than one <p> tag to be an awesome shade of pink, use a class instead of an ID.

Descendant Selectors

You can select HTML elements based on the HTML elements they are inside. If you want to target every <p> tag that’s in a <div class="SoUnCool"> your CSS would look like this:


div.SoUnCool p {
font-size: 10px;
}


The CSS above says “All <p> tags inside a <div> with a class of “SoUnCool” should have a font size of 12px.”. You can get very specific with CSS selectors:


html body div#SoCool div.SoUnCool p {
font-size: 10px;
}


I’ll get into why you’d want to be more specific or less specific in a different article.

Child Selectors

You can select elements based on their parent elements.


div > p {
font-size: 10px;
}


This says that any <p> tag that is directly inside a <div> should have a font size of 10px.

The Difference Between Descendant and Child Selectors

The difference between parent selectors and descendant selectors is slight but important. Parent selectors select only those elements that are directly inside them, Descendant selectors select all elements inside a specific element. Here’s an example:


<div>
  <p>The first paragraph.</p>
  <span>
    <p>The second paragraph.</p>
  </span>
</div>


With a child selector like this div > p, you would select only the first paragraph because it is a direct child of the <div>. The second paragraph is not a direct child so it would remain untouched. With a descendant selector like this div p you would select both the first and second paragraphs as they are both inside the <div>. The descendant selector doesn’t care how far inside the <div> the paragraphs are, the child selector will only go down one level.

Adjacent Sibling Selectors

The final selector is probably the least used selector (in my opinion) but it can be very useful in certain situations. The sibling selector selects elements that are directly beside each other.


h2 + p {
margin-top: 0;
}


This says that any <p> tag that directly follows an <h2> tag should have no top margin. If you have a bunch of <p> tags following an <h2> tag only the first <p> tag will be changed.

Conclusion

Now you know about the different types of selectors available in CSS 2.1 that work in all major browsers. As you gain more CSS experience knowing which selector to use when will become easier and you’ll be a pro, almost.

Using Multiple CSS Classes

Posted By:

Matt

Posted On:

October 22nd, 2007

Posted In:

CSS & XHTML, Tutorials

Comments:

No Comments

I get the feeling that it might not be common knowledge that you can give HTML elements multiple classes and use those classes to target those elements using CSS. I find multiple classes useful in specific situations, they can really save on the amount of CSS you have to write if you use them properly. Here’s the HTML for multiple classes:

<div class="class1 class2 class3" id="id1"></div>

The code above has 3 classes separated by spaces. You’ll probably only usually use 2 classes at once. I’d use 2 classes in a situation where I need to apply one class that sets the font size, color and line height on a bunch of elements and I’d like a couple of them to also be a different color. One class has all of the formatting and the second class changes the color. This saves me writing 2 separate classes with all of the same properties.

The classes work the same as any class. Whichever one is called last or whichever one has the most specific selector is applied. Multiple CSS classes are a simple thing that will save you a bunch of mark up and make people ask "Can you do that? Its that legal?!".