November 28, 2008 by romuald.halasz

The world is beginning to move on from IE6 and hopefully, we won’t need to code with IE6 specifics in mind anymore. However, if you have to test your websites on IE6, then this information might be of some use to you.

Let’s consider the following situation. You want to make a custom form, and besides the usual ‘input’ elements, you have some other components, like divs or images. In this case, it is very likely that you might need to float the elements to have them positioned correctly. To be even more specific, let’s say that you need to have an input box next to a div, so both will be floated to the left.

Ok, that sounds simple enough, let’s have a look at some mark-up:

<div id="ref"></div>
<div class="float-left">
	<input type="text" id="inputBox" />
</div>

Now for the CSS code:

.float-left
{
	float:left;
}

#inputBox
{
	background-color:#006699;
	border:0;
	margin:0;
}

#ref
{
	background-color:#006699;
	float:left;
	height:18px;
	width:75px;

We’ll use the first div as a reference point to fully understand the issue presented in this post.

So, like I said, we have a left-floated div, and another one which contains an input box. You can see the result here. Notice how it looks on IE6, as opposed to Firefox, Chrome and Safari. If you don’t have IE6 (I salute you for it), here is a photo of what this issue looks like (on the left is the reference div and on the right, the input box):

Why does this happen, you ask? Well, it seems that IE6 adds some margins to input elements, or it adds some padding to containers of input elements, even if you specify that no margin or padding is to be applied, using CSS.

And now, for the moment we’ve all been waiting for. The actual fix. I must admit, I found the solution by accident. In order to fix this issue, you need to float the input box, instead of the container. Some of you might say that it’s logical to be this way, however, I have to disagree. An input box is not considered to be a structural element per say, unlike a div. I know that you shouldn’t overuse divs to define the structure of a page, but it’s useful to contain other elements in divs, since IE and the rest of the browsers have different methods of rendering them.

Remember this simple idea, and hopefully some time from now you will have saved hours of nail-biting, hair-pulling, teeth-grinding, IE6-cursing agony… oh yeah, we have all been there before.

So consider this mark-up, as opposed to the previous one:

<div id="ref">
</div>
<input type="text" id="inputBox" class="float-left" />

Before we end another article, I have to point out one more thing. IE6 is notorious for minding blank spaces in the page code. This means that if you like to write clean, structured, easy-to-read code, you might run into problems similar to this one. The easiest way to fix this problem, is to specify the ‘font-size:0px;‘ property for the whole page, and then redefine the text properties for span, p etc. elements.

November 27, 2008 by romuald.halasz
Deprecated: Function split() is deprecated in /home/inh2ive/devtalk/wp-content/plugins/google-analytics-for-wordpress/googleanalytics.php on line 379

Deprecated: Function split() is deprecated in /home/inh2ive/devtalk/wp-content/plugins/google-analytics-for-wordpress/googleanalytics.php on line 379

Hello people. Let me start by saying that I know an article is overdue. However, when work piles up, and then you add a certain amount of WoW to your free time, you have a genuine recipe for no free time whatsoever… But I have been thinking hard about the next topic so today we will discuss another cool-looking, and useful effect.

Let’s say you have a website, in which the header is centered and the background image is asymmetric. What does that mean? Well, it means that the left margin is different than the right in terms of aspect, and furthermore, it means that if you tile an image with a width of 1px (height equal to the header’s) you won’t get a correctly tiled header.

Here is an example: link

So, the first thing that comes to mind is how to get an element with two background images. Searching the internets, I found no quick solution, so here is my way of solving this problem:

Having two tile-images (left and right), both with a 1px width, we can make two divs that overlap and on top of them, the header. Well, that seems simple enough, and it really is. Here is how to do it:

1. You make one div with a width of 100% (width of the page), and the height equal to that of the header, also with the background image created using the first column of pixels from the header background. This is how you would normally go about making an symmetric header.

2. Make a div with a width of 50% (half of the page’s width), same height and a background image created using the last column of pixels from the header image. This div has another property unlike the first one, it has the margin-top property equal to the negative height of the header. Now we’ll have two divs that seem to have a 50% width next to each other.

3. Finally, we add the header div, width the same margin-top property of the second div.

And here we have it! An asymmetrical header that tiles on both sides. This technique can be used also to tile the footer. If you want to tile the content div this way, you need to take into account the fact that its height can vary. This means that you have to modify the height of the left and right divs to match the height of the content. Some simple Javascript code can do the trick.