Let’s try to find the differences that help you to make the right choice.

Horizontal Positioning

This can be called one of the most important differences. You can position inline block children with parents using the text-align property. In other words, a clock-property container can be centered even without knowing its horizontal dimensions. For example, we can take pagination that needs to be centered. Quantity of pages doesn’t matter. You just can align all children in normal source order to the right of the container.

Floats can’t be centered. While left-floated elements are quite similar to normal inline-block elements, right-floated elements will change order. Thus, you will get the first element at the far right, the second elements will be on the left of the first element, etc. Some may object that this is quite useful behaviour. However, it is not always wanted. The advantage of floats is that you can float children in separate directions avoiding direct influence on its peers. For example, you can float the “previous” link to the far left, the “next” link – to the far right, while the number navigation remains to be centered. That can’t be done with inline-block elements.

Flow

Inline-block elements aren’t taken out of the flow. In other words, you don’t need clearfix class, abuse of overflow:hidden or some other trick to make the parent aware of its children. Quite useful.

On the other hand, floats are taken out of the document flow. It can cause a lot of trouble, but still you can float text around an image. Thus, you can clear floats forcing elements to the next visual line. It can’t be done with inline-block elements. You can use the ::after pseudo-element in combination with a line feed to force the following elements down, but it won’t work.

ul li:nth-child(3n)::after {content:”–fake enter–”;}

The Baseline

Inline-block elements are positioned against the baseline of the text. Thus, you have more vertical control. In case an element breaks to the next line, you can be sure that it will never appear behind some of the previous elements. It will always start at the left-most side of its parent.

Floats align at the top and can also be used to hang behind a previous float. With a list of floats reaching the right side of the parent, the next element will be hitting the left-most side or the right side of a previous float. It can be quite useful in some situations.

White-space

The most important disadvantage of inline-block elements is that they, as other inline elements, take into account HTML white-space. Floats don’t have such a problem and it can influence your choice greatly.

As you can see there are some differences that help you to decide which method to use. It also depends on the situation. For example, if you need control over alignment, then inline-block is the best choice. In case you need more control over individual elements, you should use floats.

Reference: www.onderhond.com/blog/work/inline-block-vs-float

Thus, newer browser versions will render documents according to the specs set with the referenced browser version in the meta tag. In other words, we just freeze web documents into a specific rendering mode of a browser version.

Here is quite simple syntax of this trigger:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

Advantages

• It is a perfect solution for the IE team to make sure that if we render our documents in a specific version, these documents won’t break ever again. Thus, there are no worries about newer browser versions that can break your older documents. To upgrade documents for newer version you just need to change meta tag.
• The era of conditional comments referring to five different versions of a single browser is ended. You have one file to fix the bugs that makes things easier.
• All documents with no meta tag specified will get a default rendering. You also can render any version of the browser using special “edge” keyword. Thus, you can check rendering in all previous browser versions.

Drawbacks

• In case you don’t have the meta tag set, the default rendering will revert to IE7 rendering. Thus, the additions to newer browser versions won’t work unless the meta tag is specified.



• Anyway, the newer versions of IE still should contain the correct rendering of earlier versions. That may lead to some to unacceptable proportions. Of course, you can work with a separate set of rendering rules, but they cay be buggy too making things rather confusing.
• There is no good for people who have some other browser version than stated in the meta tag. Moreover, with updating their browsers often it can be a real problem.
• In case other browser vendors don’t accept this, it can be just another IE specific hack.

Some people can say that we should forget about unsavvy web developers and accept meta tag as something really great to live with. However, it is rather idealistic. Internet is not about web developers who build mean and slick websites. There is another big goal to achieve – web standards. Thus, IE can release its newer versions without breaking the web. Of course, meta tag is not a perfect solution, but perhaps, it is a good thing.

Reference: www.onderhond.com/blog/work/IE-meta-switch

Nothing is perfect in this world and CSS3 with its background color gradient proves this rule one more time. It is not for shortening CSS code, but only for making it more variable. For example, lately you can adjust a background color gradient using a background image only. In other words, you have to recut the image again and again in case the gradient needed tweaking. We all suppose that with CSS the necessary colours can be simply defined while the browsers do all the drawing. Sounds great, but don’t work in practice… at least as you expected.

To use CSS3 trying to solve the issues concerning the gradient property is quite time consuming because it doesn’t work across a range of browsers. Here is a sample of code to look through for the following explanation:

/* how it used to be */
background:url(“…”) left top repeat-y;
/* using automated gradients */
background:#FEF3D1;
background:-moz-linear-gradient(top, #FFF1CC, #FDF5D5);
background:-webkit-gradient(linear,0 0,100% 0,from(#FFF1CC),to(#FDF5D5));
-ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5)”;
filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFF1CC, endColorstr=#FDF5D5);

This makes the fade available in FF 3.6+, Safari/Chrome and IE5.5+. Opera users and IE users without filter support can see the fall-back color. In contrast, using an image makes it available in every single browser version out there without any issues.

As you can see CSS3 syntax is a bit longer and it looks like a block of CSS which could style half a site. And that only for one fade.

Quality vs Availability

Image is just an image. It should attract attention and display colors you want. If not consider some details, it displays the way it was made across all browsers. However, it doesn’t work with CSS3 effects. At least not always. For example, Firefox gradients are of lower quality if compare with other browsers. We all know that light fades over large areas creating unnecessary stripes. All this is just gaps in quality you don’t want to accept working with images.

Animation is the other thing to consider starting to work with CSS3. It is neat, but doesn’t run smoothly. Acceptable, but not perfect. To replace Flash animation with other open standards is allowed in case the same level of quality is provided.

Most things that are cool in theory appear to be disappointing in practice. CSS3 is not an exception to this rule. Hope that all the problems will be fixed soon to let us admire all the best provided.

Reference: www.onderhond.com/blog/work/why-css3-is-worse-than-ie6-debugging

First of all, it should be noted that block level link works perfectly in simple cases, but can spoil things dealing with complex issues.

Vomit Bug for Your Design

The definition of vomit bug is quite simple:

When the browser’s parser rearranges the DOM completely differently to the markup, resulting in content being placed outside its original container.

The problem can occur when you are nesting links inside other links. Because of vomit bug, DOM can be scattered in different directions, except the one you laid out initially.

Here is the sample of html code that was used to generate dom structures:

<div>
<a href=”#block”>
<div>
<div>2010</div>
<div>5.0*/5.0*</div>
<div><a href=”#test”>test</a></div>
</div>
</a>
</div>

It is quite simple setup providing a block level link with several other block element and one nested link. In case you remove nested link there will be no problem. In case you leave it, you will get the following samples of doms taken from Opera 10.5 (1), IE8 (2), Safari 4 (3) and Firefox 3.6 (4):

Only Opera 10.5 shows dom correctly. However, in case you give a background color to the block level link, Opera stop working. The best browser rendering the block level link quite perfectly is IE6. But still the click area is not corresponding. In other words, block level links with other links nested inside don’t work. At least now.

As usual HTML and CSS techniques are great… but are not working perfectly. Just remember that in case you nest another link inside links block, it will break down completely. Till all these things are fixed you should use the links on the title and “read more” text. You also can remove all links inside a block level link to make things better.

Reference: www.onderhond.com/blog/work/nesting-links-how-to-make-your-browser-v

Let’s try to use the following:

ul li {display:inline; zoom:1;}

Seems to be quite simple, isn’t it? Just use display:inline and add a zoom:1 for block properties support. This fix provides you with basic inline-block support in IE6 and IE7 as well. What is more, you can decrease the use of unnecessary floats, eliminating the need for fixing certain overflow:hidden declarations and floats in general.

You also make “add zoom to backgrounds” option less harmful because it behaves flawlessly inside inline-block elements (while in floats it pushes the element to 100% width).

Note that version 0.8 has some additional fixes and better png detection. The 0.7 version was not good in using different syntaxes for background image declarations. Thus, you can get all pngs fixed easier.

Reference: www.onderhond.com/blog/work/ie6-css-fixer-0.8

Sometimes, we take the advice too literary and this may lead to various unnecessary problems with HTML. For example, when the developers had to switch from table-based layouts to div-based layouts, they turned everything into divs forgetting about the semantic purpose of the elements. It caused demonization of the div element. So, we should try to avoid such things and find the balance between structural and semantic elements.

In case you ignore structural elements such as divs and spans, you just forget about the original function of these elements and make HTML poorer language than it could be. Don’t forget that HTML is not only semantics. It also structures your document. The main difference between these types of elements is that semantic elements explain the purpose of an element, while structural elements explain the relation of its content to the content of other elements within a document.

For example, you can create two layouts. The first one made with four divs, preferred by minimalists while the second made with five divs. It is not all about structure, it is also about some sort of relationship. Thus, layout with four separate divs indicates that structurally all of them are on the same level. In case we use five divs where the main content and context area are grouped in a content div, we show that the relation between context and main content is a lot stronger or at least different than the relation to the other element. However, the content area shares a similar relation with header and footer.

In short, layout with five divs provides us with more information concerning the relationship between the separate areas and extra div that is used to group main content and context adds useful meaning to the document.

It is recommended to use divs and spans to bring structure to your document. Just separate elements from others that share a different relationship. You also can use them with a meaningful class or id in case you don’t have a valid semantic element to describe your content.

Of course, such elements as footer, header, article, section and aside also help us to define structures in HTML documents. And the main thing to consider is that these elements also hold semantic meaning to indicate the relationship of the elements. Try to use structural elements to reveal relations between elements to write better structured code and keep the document as semantic as possible.

Reference: www.onderhond.com/blog/work/html-foundation-of-the-web

Google – The Best?

With growing internet it is more difficult to find valuable sources. Don’t you notice that while looking for something on the Web you can wade through irrelevant and outdate sites for a long while till find the things you are looking for. Google is the leader in search engine market. However, it lacks some important things to make our browsing easier. First of all, we should mention date factor. With enough time to build strong link base, older articles have more chances to rank higher than more relevant, but recent articles. Thus, we can get outdated information.

Lack of recognition of content types is another drawback of search engines we should pay attention to. Looking for some film reviews people want to get the list of reviews but not pages with this word. Thus, semantics can be quite useful.

As we know some attempts were made to extend the semantic power of html code. Today there are two methodologies used: Microformats and html5 microdata. There is also RDF, but we will discus it later.

Microformats extend html semantics using standardized (not necessarily semantic) class names. The most popular Microformat is the hCard which holds the data of a person or company (name, address, contact data,etc.) There are also some formats defined, but as a rule, they are ignored by the web.

The other thing to use is html5 microdata. Using four properties (itemscope, itemtype, itemid, itemprop) you can add extra semantics to your html. However, there are some problems and all of them make things much complex that they should be. For example, most values for the itemprop seem to correspond with the class names you’d normally put on there, which you still need for styling.

Perhaps, we just overreaching here. We are trying to automatically and fully process content types on the web and it is great, but still all the users need is to find their search queries.

Trying to provide a full standardized description of a content type, we make Microformats and microdata too complicated. The other thing to consider is that most people appreciate raw data itself. Deciding to buy another TV we need to be transferred for valid product pages. That’s all. But we try to process everything at once. Maybe basic recognition will be enough instead of complete definitions of content types.

What we are trying to say is that instead of defining a complex model for content types we can start to define standardized and semantic base identifier. Let them be simple enough. For example, use “product” for products, “holiday” for holiday, “review” for reviews. You can prefix them but that’s all. Let it work and process the data within. Microformat ideology works, but sometimes it is too complicated and makes search results irrelevant that also leads to disappointment of some users.

Reference: www.onderhond.com/blog/work/extended-semantics-simple-is-better

Using the following tips you will take advantage of a browser drawing the borders at angles. One side of the border is coloured while others are transparent.

.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}

That was right triangles in the square. And now you can change border size and get acute triangles as well:

.css-arrow-acute {
border-color: red green blue orange;
border-style:solid;
border-width:25px 10px 15px 30px;
width:0;
height:0;
}

Be creative and create a lot of shapes to try. For example,

border-style:dotted;

or

border-style:dashed;

or

border-style:groove;

as well as

border-style:double;

You also can try the following to create classic chat bubble with no images used:

Hello!

.chat-bubble {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
left:30px;
}

.chat-bubble-arrow {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:30px;
}

However, it doesn’t work for IE6, because this browser doesn’t allow transparent borders. Anyway, there is some tip to fix it. All you need is to give completely different color such as green to the “transparent” sides. Then use filter: chroma in order to turn that colour transparent.

/* IE6 */
.chat-bubble-arrow {
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}

Reference: hwww.onderhond.com/blog/work/css-triangles-issues

Let’s try to solve this step by step. For instance, the basic html is quite easy. Here is an unordered list with 4 items:

<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul>

We need to perform the following:

• To spread the list items evenly across the whole width of the container.
• There should be no gaps between the list items.
• It is necessary that the list keeps its behaviour in an elastic layout.
• Note that typical reset CSS statements and browser fixes are not included in the code previews.

If 4 times 25% isn’t 100%

ul li {width:25%; float:left;}

The most simple solution is to float all list items with a width of 25%. However, Opera and Safari result in width below 100%, while IE has a resulting width exceeding 100%.

There is also a problem concerning how Opera handles % sizing. This browser can’t handle fractions (it reverts 44.44% to 44%) that also makes the behaviour across other browsers unpredictable. You also can tinker with the percentages (34% – 35% – 34%), but still it doesn’t meet our requirements listed above.

More Practice with Floats, Margins and Paddings

ul {padding-right:75%;} ul li {float:left; width:100%;} ul li+li {margin-right:-100%; float:right;} ul li+li+li {margin-right:-200%;} ul li+li+li+li {margin-right:-300%;}

The next idea is to give ul element a right-padding of 75%. You can make all list items 100% just making them 25% wide compared to the whole container. Thus, the first item will be floated to the left while the following once will be floated to the right. All items except the first one will be repositioned to with a negative margin.

It works for Opera, Safari and Firefox. But it fails as soon as a border is applied to the ul element. It just doesn’t work with 75% padding calculation. However, we can just wrap the list and apply the border to the wrapper to fix it.

However, IE doesn’t support such a decision and set negative margins going above 100% to a default 100%. The other thing to consider is that IE6 can’t handle the + operator in CSS. In other words, each list item has to receive a separate class. Too complicated and unnecessary in case you are going to expand list with new items.

Column Layouts

ul li {width:25%; float:left;} ul li.last {margin-left:75%; float:none; width:auto;}

We also can give all elements a width of 25% and float them to the left while the last li element should be reset to normal behaviour with margin-left of 75%.

The good thing is that IE7 handles this correctly. Firefox, Opera and Safari show a little gap between the third and last item. To fix it you can apply a left margin that is slightly smaller, for example, 74.5%. However, Firefox doesn’t accept it and applies to left margin from the third list element, throwing the last element out of the container. So, any improvements to this are required.

Reference: www.onderhond.com/blog/work/spreading-list-items

HTML is all about structure and meaning. It allows you to publish content on the web, describe and structure that content. While CSS and Javascript are additions for certain clients, HTML adds meaning and context to the elements of a web document.

We try to define the content with html tags so that it will be readable for machines as well as for humans. It is not so easy for people with good vision, because our vision creates a context for content while machines and visually impaired users need a certain semantic value given to elements within a document. In other words, it is necessary to indicate what a certain element represents.

Today there are more semantic elements added to specification that allows machines as well as visually impaired users to understand published content better. The other good thing is that there are new elements defining its relationship to other elements.

A <header> tag is an element that represents a certain relation to the primary content. It precedes this content, giving us important information and context to better interpret the given content. The same can be said about <aside> tag. It tells that the contained content is related to the primary content, but not part of it. Thus, we can define which part of an element is the main content, what content is related to it and how it is related to it.

So, all you need is to think about the way you can better structure a document to make its content the best if talk about readability for humans as well as for machines. Always think about improvements and try to use new additions as well.

Reference: www.onderhond.com/blog/work/hardcore-html