Although the tradition of creating a logical and structured layout using CSS has received innumerous appreciations from web developers across the globe, there have been multiple pitfalls associated with the same. Even with the quick availability of handy tips and tricks on creating a CSS layout, some or the other kind of bugs/errors tend to enter into the code. In this post, I’ve jotted down a list of 15 common bugs encountered during creation of a CSS layout. So, let’s take a closer look at each of these bugs and get to know about their simple-to-follow fixes.
Conventionally, every web developer uses a set of lists for generating the navigation wherein he created the container element, some links and floats the anchors in the desired direction. The code snippets associated with the same are displayed below:
While a normal browser would render the effect as below:
The IE(Internet Explorer) will render the effect as below:
Well, a simple fix for this bug is to float the li elements instead of the conventional anchor elements. For this, you just need to add this code snippet:
As an Internet Explorer-exclusive bug, IE Double Margin Float is a situation wherein a particular element which is being floated and rendered a margin in the same direction as of the float ends up with having a margin size that is twice the original margin size.
A simple fix for this bug is applying a display: inline rule to the floated element. So, you need to replace the below code:
This is a bug which crops in when within the layout, you set the parent container’s overflow property to “auto” in addition to placing a relatively positioned item within it. This relatively positioned item tends to violate the parent element’s boundaries and overflows. The code associated with the same is shown below:
The expected output looks like this:
But, the output rendered on Internet Explorer is:
The simplest fix to this bug is to position the parent container relatively as shown in the below code snippet:
Although it is imperative to set a minimum height to an element for converting a design into a pixel-perfect design, IE ignores the min-height property and instead fetches the value for height which has been declared as the minimum height. A simple fix to this issue has been created by Duston Diaz. Here, you just need to include the below code snippet:
If the quirks mode has been triggered in IE6, the browser will use Microsoft’s traditional interpretation of box model, excluding borders and padding existing in total width of element. An easy remedy to this bug is to use a correct doctype. Also, you can eliminate this bug by avoiding the application of width property to a particular element which has the border or passing properties already applied to it.
IE6 adds unwanted vertical spacing between list items. The code used for including spaces between list items is:
While the expected output should look like this:
It looks like this:
A quick method to resolve this bug is to add display: inline to the enclosing li element as shown in below code snippet:
IE6 Handling the concept of floating elements using an aplomb where sometimes it tends to fumble. Here’s the code for the same:
While the expected output for the above code is similar to this:
The output rendered in Internet Explorer is:
An efficient way to prevent any such layout distortion is to apply overflow: hidden to the chosen element. The code associated with the same is displayed below:
Yet another IE6 exclusive bug, Float Drop is a scenario where the contains of a particular floated container exceed the width that has been specified for the container. Therefore, the other elements which have been floated adjacent to this container will drop below it. A possibly reasonable solution for this bug is to yse overflow: hidden or overflow: scroll.
This bug simply truncates the content available in a particular floated/non-cleared element which is larger as compared to its container element each time the links with non-floated content are being moused over. A simple fix for this bug is to add a new element towards the bottom of the container, followed by setting the element to clear: both.
On using the z-index property for positioned elements in Internet Explorer 6 or 7, the stacking index will be automatically reset to zero, leading to rendering error. A viable solution for this is to add a higher z-index to the parent element.
The hover state of every element doesn’t support IE6. This adversely affects the usage of mouseover effects. An easy approach to get rid of this problem is to use the hover property for conveying mission-critical functionality.
As per this bug, the page where a particular body element is centered and the layout has been fixed, the relatively positioned elements included within the same will probably become fixed if the page has been resized but not refreshed. A simple solution to this bug is to add position:relative to the body.
CSS stylesheets comprise of a unique declaration which forces the title to display in lower cases. Therefore, a possible remedy for this bug is to look out for selector which controls the title. This selector will include the following:
Just go ahead with removing or replacing the above with this:
While creating a vertical list containing <li> elements along with block-level children, IE6 will add a certain vertical spacing between the list items. A simple solution to fix this bug is to put a spacing between the last character of text in the closing tag and block-level child as shown in below code snippet:
Now that you are well familiar with an extensive list of common CSS bugs and their fixes, I’m sure the basic idea of handling CSS layout creation projects would no longer give you any kind of stress.