Skuunk Works

In CSS, you can override a style on a class simply by declaring a new style further down the page i.e. p { padding-top:5px; } p.custom { padding:10px; } Basically the above code sets the padding-top on all paragraphs to 5px, but sets the padding to 10px on paragraphs with the "custom" class. So we are overriding padding on our custom class. However, you can actually prevent an attribute's style from being overridden if for some reason you really really don't want the padding to change in your design. Perhaps you are working with multiple people and you really don't want someone to accidentally override your design. Perhaps you just want to ensure your padding-top is always 5px even if padding is reset somewhere else. In order to do this we use !important. p { padding-top:5px !important; } p.custom { padding:10px; } In this case, the padding-top on a paragraph will always stay at 5px regardless of whether or not it has a "custom" class. It...

So I guess CSS is not obvious to everyone. One of my coworkers asked today why you sometimes had 1 value after a "padding" attribute and sometimes you had 2 or 4 values. Basically, padding: 5px; Puts a 5 pixel padding on an element. padding: 5px 3px; Means you have 5 pixels of padding on the top and bottom and 3 pixels on the sides padding: 3px 4px 5px 10px; Means you have 3 pixels of padding on top, 4 on the right, 5 on the bottom and 10 on the left. A good way to remember this is the acronym TRBL (like "trouble"). The same applies to "margin". As well as this, you also have extra attributes which can specify the top, bottom, right and left paddings on their own i.e. padding-left: 10px; Sometimes, if only one side is unique, it's better to refer to it in the following way (for readability). padding:5px; padding-left: 10px; The "padding-left" of 10px will override the "padding" of 5px, but only on the left side of the element. paddi...

There are many similarities between using CSS hacks and lying. First of all, what is a CSS hack? A CSS hack is a means by which you can get different browsers and browser versions to see and render your stylesheets differently so you can give them different directions (ironically though it's normally done to achieve pixel perfect cross platform web pages). They are also mostly done for Internet Explorer (which for some reason refused to implement standards based CSS until recently). CSS hacks mostly exploit bugs in a particular browser such as the Star HTML hack . This hack was used to get code to run in IE6 and lower in a different manner than other browsers. IE also introduced conditional comments which allow you to add an extra stylesheet to "fix" any CSS issues. This is not technically a hack, but it does require you to write and maintain extra CSS. There are also more subtle types of hacks to make up for some things that are missing in IE like the IE min-height hack ...

I know people have done in depth reviews etc..., but here is a quick a low down of what you need to do as a web developer to support IE8. I am going to assume that you have been a standards based web developer for the last couple of years and that you have not been doing too many hacks to support IE7. 1) Add the new metatag in the top of the to force IE8 to render in standards mode. <meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" /> Without this tag a little button appears next to the location bar which allows the user to view the site in IE7 compatibility mode. You probably don't want to do this because you want people to view your nice standards compliant website and also the render mode is slightly different from real IE7 in any case. 2) If you were using conditional comments to catch IE and add some extra CSS, you will probably need to update the condition from <!--[if IE]> < link rel="stylesheet" type="tex...

Continued from yesterday... Firefox 3 and Safari both support rounded corners in CSS (now if only IE would catch up). You can use the following tags. -moz-border-radius: 3px; /** for Firefox **/ -webkit-border-radius: 3px; /** for Safari/webkit **/ If you use these tags on a div it will be rounded in FF or Safari and display square in IE. If you only want to round some of the corners (as opposed to all of them) here is the additional syntax in an example (where I rounded the top corners only). -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px;

Been back in CSS today. Here are some things I learnt today. 1) text-transform will allow you to transform the text to uppercase, lowercase or capitalize i.e. h1 { text-transform: uppercase; } This is a handy alternative to typing everything out in upper case (which is bad because the designer may change his mind to switch away from all caps at some stage). 2) If you are going to use jQuery to show/hide a table, wrap it in a div and toggle that instead. This is because show/hide/toggle in jQuery changes something from display:none to display:block. A table's display is inline-table by default and setting it to block will lead to some unexpected results. 3) If you have to write CSS (or anything) for IE only, you can use conditional comments <!--[if IE]> Special instructions for IE here <![endif]--> It's best not to use special CSS code for IE at all, but in some cases it's unavoidable. 4) You can modify the sliding doors technique by using a single image (instead...

I recently read an article which talks about writing MVC for the web using jQuery ( http://welcome.totheinter.net/2008/08/05/mvc-pattern-for-the-web/ ). In any case, the author proposes building a full MVC controller in JavaScript (the example article is still in progress), which is interesting, but I think in some ways it is a little misguided, for I believe that the front end of the web is already MVC. Model = HTML (provided it is written semantically and not structurally) View = CSS (updating the style) Controller = JavaScript As long as you follow the principles of Unobtrusive JavaScript and keep your (X)HTML clean then you have MVC built in. XHTML is a form of XML after all (and XML is used to represent data/model). Just a thought...

http://leakedtech.blogspot.com/2008/03/internet-explorer-8-beta-1-sneak-peak.html So it looks like IE 8 Beta 1 is out. Even using VM with Parallels I am not prepared to try it out for myself. It doesn't look like there are an JS changes but mainly CSS ones. Now if they could just hurry up and kill IE6 then that would make my life much easier...