ADM Blog » CSS

Zen Coding

admin — Tue, 11 May 2010 20:00:33 +0000

If you write HTML for a living, and you don't know Zen Coding yet, you are missing out big time.

Zen Coding is build as a plugin for commonly used editors (including Notepad++, yey!) that allows you to write HTML, CSS and XML code 20 time faster. So writing:

1	html:xt>div#header>div#logo+ul#nav>li.item-$*5>a

with a keystroke converts to:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	<div id="header">
		<div id="logo"></div>
		<ul id="nav">
			<li class="item-1"><a href=""></a></li>
			<li class="item-2"><a href=""></a></li>
			<li class="item-3"><a href=""></a></li>
			<li class="item-4"><a href=""></a></li>
			<li class="item-5"><a href=""></a></li>
		</ul>
	</div>
</body>
</html>

Don't get this wrong, like the man said, "The purpose of ZC is not to write a full HTML page with a single line, but to help you write smaller code chunks.". Here is a video introducing the system in further detail.

It is easier than it looks actually, and looking a bit over the syntax will make total sense. Printing the cheat sheet also helps

Also worth noticing that in Notepad++ (the only one I tried) the plugin added few more functions that help with the coding that I'm sure you'll enjoy (Jumping to the edit points is a God given). This project inspired another neat tool for PHP developers to output HTML using this syntax from code. You can find more here

I have only touched briefly on what it can do but I will certainly not author another single HTML document without the benefit of Zen Coding.

JavaScript Object-Oriented Programming (OOP) – jClass

Cheeky little tips that will help against email harvesting

admin — Mon, 27 Jul 2009 11:52:01 +0000

Prevent email address harvesting, image downloading, and image theft by using CSS Pseudo Elements in conjunction with the Content property. This is a pure HTML/CSS solution to the problems of email harvesting and image theft with one common method.

There is a little known feature of CSS called Pseudo Elements that allows for some special effects to be applied to elements. Using pseudo elements it is possible to add content before or after an element.

This will output: myemail@example.com
You can also use as content url('someimage.jpg'); to display images this way. A bit more detailed at amatoc.com

Another way to mask emails with css power:


moc.tset@tset

The CSS reverses the direction of the text, so you write your email backwards, the CSS sorts it out so it displays fine on your website, but this way, ’spam bots’ can’t read your email!

Handy CSS Debug Snippet

admin — Mon, 27 Jul 2009 10:46:21 +0000

Great little debuging snippet found while browsing. The code adds different coloured borders to the assets depending on its level. Leave commented out if not needed.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

How to identify at runtime if the swf is in debug or release mode/build

Cross browser inline-block

admin — Thu, 26 Feb 2009 17:40:11 +0000

Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. Too many times have I received PSD files like this:

and begin to cry.

Normally, this type of layout would be a cakewalk. Fixed width, fixed height, float:left and you’re done. Buuuuut, the design needs to work with variable amounts of content, which means if one of these blocks has more content than the others, it will break the layout:

Because the first gallery item is taller than the rest, the 5th item is floated left against it instead of below it. Basically we want a layout with the flexibility of a table, but proper, semantic markup.

We start with a simple page with an unordered list and display set to inline-block:


    
        This is awesome
        
    
...

And it looks ok in Firefox 3, Safari 3 and Opera:

Obviously, something is wrong with the vertical alignment. Well, not exactly wrong, because this is the correct behavior, but it’s not what we want.

What’s going on here is the baseline of each

is being aligned with the baseline of the parent < ul>. What’s a baseline, you ask? A picture is worth a thousand words:

The baseline is the black line running through the text above. Putting it as simply as possible, the default vertical-align value on inline or inline-block element is baseline, which means the element’s baseline will be aligned with its parent’s baseline. Here’s the first inline-block attempt with baselines shown:

As you can see, each baseline is aligned with the baseline for the text ‘This is the baseline’. That text is not in a < /li>< li>, but simply a text node of the parent < ul>, to illustrate where the parent’s baseline is.

Anyway, the fix for this is simple: vertical-align:top, which results in a great looking grid:

Except it still doesn’t work in Firefox 2, IE 6 and 7.

Let’s start with Firefox 2.

Firefox 2 doesn’t support inline-block, but it does support a Mozilla specific display property ‘-moz-inline-stack’, which displays just like inline-block. And when we add it before display:inline-block, FF2 ignores that declaration and keeps -moz-inline-stack because it doesn’t support inline-block. Browsers that support inline-block will use it and ignore previous display property.

>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
    }
>

Unfortunately, it has a small bug:

Honestly, I don’t know what causes this bug. But there is quick fix. Wrap everything inside the < li> with a < div>.


        
            This is awesome

This seems to ‘reset’ everything inside the < li>’s and makes them display appropriately.

Now, on to IE 7. IE 7 does not support inline-block, but we can trick it into rendering the < li>s as if they were inline-block. How? hasLayout, a magical property of IE that allows for all sorts of fun! You can’t set hasLayout explicity on an element with hasLayout:true; or anything easy like that, but you can trigger it with other declarations like zoom:1.

Technically, what hasLayout means is an element with hasLayout set to true is responsible for rendering itself and its children (combine that with a min-height and width, and you get something very similar to display:block). It’s kinda like magical fairy dust you can sprinkle on rendering issues and make them disappear.

When we add zoom:1 and *display:inline (star hack to target IE6 & 7) to the < li>s, we make IE 7 display them as if they were inline-block:

>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
    }
>

IE 6 doesn’t support min-height, but thanks to its improper handling of the height property, we can use that instead. Setting _height (IE6 underscore hack) to 250px will give all < li>s a height of 250px, and if their content is bigger than that, they will expand to fit. All other browsers will ignore _height.

So after all that work, here’s the final CSS and HTML:

>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
>


        
            This is awesome

How To – get Cross Browser Compatibility Every Time

admin — Fri, 20 Feb 2009 17:15:05 +0000

Working with Internet Explorer can be a pain for the everyday web designer. But it doesn't have to be. Many, if not all, of the bugs can be fixed quickly and easily by understanding how the occur. I've put together a list of the major problems beginners have with cross browser compatibility.

I'm only going to be concerned with the major browsers - Firefox 2+, Safari 3+ and Internet Explorer 6+. IE6 is slowly declining. If you know the IE6 bugs you can generally know if your site will break before you even check it in a browser. This isn't an article for the super-experienced web designer, but hopefully will give some insight to some people who don't understand the mysteries of IE6 and cross browser compatibility.

Summary

Here is a quick summary for those of you who don't want to read the whole article:

Always use strict doctype and standards-compliant HTML/CSS
Always use a reset at the start of your css
Use -moz-opacity:0.99 on text elements to clean up rendering in Firefox, and text-shadow: #000 0 0 0 in Safari
Never resize images in the CSS or HTML
Check font rendering in every browser. Don't use Lucida
Size text as a % in the body, and as em's throughout
All layout divs that are floated should include display:inline and overflow:hidden
Containers should have overflow:auto and trigger hasLayout via a width or height
Don't use any fancy CSS3 selectors
Don't use transparent PNG's unless you have loaded the alpha

Element Inconsistencies

Every browser renders particular elements differently - different amounts of padding, margins, borders etc. This means your site can look different in every browser if you use default styles.

Solution

The first thing you should do, which most people most likely know about, is to reset your styles. A reset is some css you place at the start of your styles that removes the padding, margin, border and other inconsistencies from elements, and rebuilds them in a standard way.

Download Eric Meyer's reset.css and place the code at the start of your styles. Bam! Clean, cross browser styles.

Image Rendering

IE6 and IE7 both render resized images extremely badly. When you change the size of an image with CSS or in the HTML, it appears blocky and edgy.
Solution

Don't do it. Always size your images to your desired size before you use them on your site

Font Rendering

I told you not all issues were with IE. Safari 3+ has an issue with the way it renders light type on a dark background. Some would argue whether this is good or bad, but there's a way to make it appear lighter. Here's an example of standard white on black text rendering in Safari 3.1:

Solution
Easy fix. You need to add this to your code.

p {
   text-shadow: #000 0 0 0;
}

Where #000 is your background colour. You will probably have to be more specific with the elements you select. I wouldn't suggest using this fix on the body tag. Other elements you might need to fix are the li, dt, dd, blockquote etc. Use this on any text element you want to appear 'thinner'

To make this fix in Firefox, you use the opacity fix:

p {
    -moz-opacity: 0.99;
}

You need to be careful with this fix, as it will break any Flash element that it touches in Firefox. There appears to be no workaround for it.

The type will now be rendered like this:

Font Selection

There are common web fonts that we use - Arial, Georgia, Verdana etc. But there are some fonts that are common to both PC and Mac and can be used - Century Gothic, Arial Narrow etc. However, different browsers and OS's render type different, and you need to be aware of these differences, as your site could look dam ugly if you use the wrong font.

Solution

The font you choose is ultimately up to you. As long as it's a safe font you will be fine. However you should be aware of these rendering issues. One font you should probably not use is Lucida Grande/Sans. It renders awful in IE. Take a look at its rendering in Safari(Mac):

Looks nice doesn't it? Too bad it looks like this in Internet Explorer(PC):

Some people have stated that Lucida Sans will look fine in IE with ClearType, and others have said that it still looks bad. A smart alternative is to just not use Lucida Sans as your 'fallback font', and instead use Arial or another san-serif font.

Font Sizing

The ability to resize text differs amongst browsers and OS's. IE won't resize text thats set in pixels. If we set all text in em's, IE will exaggerate the text sizes when resized.

Solution

The best reference for font sizing is the article How to Size Type in CSS by Richard Rutter. The results - You need to specify the size as a percentage in the body element, and then size it in em's through the rest of the sheet. For line height, you need to define it in em's, rather than pixels, for consistent rendering.
One thing to remember is that the default font size is 16px. So to resize our type to 12px we use:

body {
   font-size: 75%;
   line-height: 1.5em;
}

Now you can size your type in em's like so:

h1{
   font-size: 3em;
}

Another suggested technique is to resize it down to 10px, which makes it easier to size upwards in em's. For example.

body {
     font-size: 62.5%;
     line-height: 1.5em;
}
 
h1 {
      font-size: 1.8em; /* 18px */
}
 
p {
      font-size: 1.2em; /* 12px */
}

here is an issue with this however, if people use small font option in Internet Explorer, it could be so small that it's unreadable. It's only a small chance. But worth noting.

Double Margins on Floats

We create CSS layouts by floating div's up against each other, like some form of horizontal tetris. When it reaches the end of a row, it drops down to the next. The common method for creating a grid is this:

#content {
     float:right;
     width: 300px;
     margin-right: 10px;
}
 
#sidebar {
     float:right;
     width: 100px;
}

This is what it should look like in a browser:

This is what IE does to it:

The margin width is doubled. Any margin that is on the same side as the float will be doubled. Don't ask why. It's just IE. This means the element on the left will have that margin stretched out to 20px, which will probably break the layout.

Solution

To fix it, all you need to do is put display:inline on your layout divs.

#content {
     float:right;
     width: 300px;
     margin-right: 10px;
     display:inline;
}
 
#sidebar {
     float:right;
     width: 100px;
     display:inline;
}

Now that margin bug is all fixed. Even though it only effects margins on the same side as the float, it can still be useful to include this fix. You never know when you might use a margin on the float side. It won't effect any other browser, so you can use it safely.

Expanding Box

The expanding box problem is a big issue with many css layouts. When you have a standard layout, with floats sitting next to each other, with set widths, but an image or long string of text is longer than this width, the layout will break in IE6. Take a look at this example:

#content {
     float:left;
     width: 300px;
     margin-right: 10px;
     display:inline;
}
 
#sidebar {
     float:left;
     width: 100px;
     display:inline;
}

This will render like in this most browsers:

However, in IE6, it will break like so:

Solution

The solution is to use the overflow property. If you place overflow:hidden; into the layout divs, the layout won't break in IE6.

#content {
     float:left;
     width: 300px;
     margin-right: 10px;
     display:inline;
     overflow:hidden;
}
 
#sidebar {
     float:left;
     width: 100px;
     display:inline;
     overflow:hidden;
}

This could, however, cause some issues with layouts depending on how complex they are. It also won't cause the text to wrap, and it will just remain hidden. It's unlikely you'll have a string long enough to break a layout, but it could happen. Another option is to use word-wrap: break-word; in an IE specific stylesheet. This won't effect images though, so you'll have to make a choice about with method is appropriate for your situation.

Clearing Floats

What we mean when we talk about clearing floats, is when a container or wrapper div doesn't correctly wrap around the containing divs. Take a look at this example:

See how the container is correctly containing the div's? This is what should happen. However, sometimes it does not clear correctly, like so:

The container isn't correctly wrapping around it. You probably won't notice this until you try and put a background on your container.

Solution

There are a few different solutions for clearing. The best solution however, is a simple overflow:auto or overflow:hidden in your container

#container {
     width: 966px;
     margin: 0 auto;
     overflow:auto;
}

You need to keep in mind that overflow:auto might cause some issues in Firefox. If you do have any issues, use overflow:hidden instead. If this is still causing issues, take a look at some other forms of clearing floats. Apart from just adding this, you'll need to make sure hasLayout is triggered in IE6. You can do this by specifying a width or height. If you don't have a width in your container, you can use height:1% to trigger it, or zoom:1; if you can't afford to give it a height.

CSS Selectors

Although we would like to use all the brand spanking new CSS3 selectors, IE6 doesn't support all of the major ones. There are also still some CSS2 child and sibling selectors you simply shouldn't use if you want to support IE6:

E > F
E + F
E ~ F
:root
:last-child
nly-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
nly-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
Any of the E[attribute] Selectors
:first-child
:lang()
:before
::before
:after
::after

f course, a lot of these selectors aren't supported by even Firefox 3. For a full list of supported selectors, check out evotech.net's post on browser css selector support

Solution

Stick to your standard selectors. Nothing fancy. Only use E + F, E > F, E ~ F when it won't make a huge difference in IE. If you really need to use these selectors, you should look at using IE8.js which gives IE6 better selector support. However this will slow down your site. But we don't really care about IE6 users do we?

PNG Transparency

IE6 doesn't support alpha transparency in PNG's. This is possibly the most annoying bug/issue with IE.

Solution

There are a few solutions for this problem. You can either use AlphaImageLoader in an IE specific stylesheet, link to a behaviour file in an IE specific stylesheet or use JS to fix the issue. Not matter which way you choose, there is no way to have transparent repeating background images.
To use AlphaImageLoader, it's a little bit tricky. Add these properties to any png image you want to have transparency. (You need to put this code in an IE specific stylesheet if you want your CSS to validate)

.trans {
     background-image: none;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

Let's say you've given all your png image tags a class "trans", you select them with your css and use the filter property. You need to create a 1x1 transparent png file and link to it in the src attribute.

An even better way to do this is via a behaviour. It's similar to the AlphaImageLoader, except that you link to a behaviour script that triggers the transparency.

The third method is to use IE8.js which I mentioned earlier. It's even safer than the previous method, and you are very unlikely to run into any problems. Link to the script in your HTML, and it will make any png ending in -trans alpha-capable. eg. myimage-trans.png.

With all this methods, you need to be aware that you might still run into problems with transparent pngs. Make sure you test it in IE6 extensively