Design

Using CSS to Fix Anything: 20+ Common Bugs and Fixes

June 15th, 2008

Without a doubt, a logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. Today we wanted to share with you some quick tips on how to avoid easy pitfalls when creating your CSS layout.

This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better methods, then post a comment below or email me. I will do my best to include it in our next post in this series.


You might be interested to check our other related post for some inspiration:


IE Bug Fixes

1- Bug Fix: IE Double Margin Float Bug- It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. The fix is extremely simple. All you have to do is apply a display: inline rule to your floated element. So you simply go from something like this:

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px; }

To something like this:

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px; 
    display:inline;
}

CSS Tips


2-Overcoming the Box Model Hack- If you want to specify a width to any div, do NOT specify padding or margins. Just create an inner div with no width set and specify its padding and margins instead. So instead of doing this:

#main-div{
width: 150px;
border: 5px;
padding: 20px;
}

Do something like this:

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}

3-Min-height attribute ignored in IE- “min-height” attribute works well in Firefox but IE ignores it. IE’s height act as FF’s min-height. Note: in IE 7 problem was fixed.

/* for understanding browsers */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em; 
height:auto;
}
/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

4- Min-Width for IE -A fix for the lack of min-width in Internet Explorer.


Centering a Block Element

5-Centering Block Element- There are multiple techniques for centering a block element; and the choice for the technique depends on whether you have the size set in percentages or in more absolute values.

Centering an entire page’s contents:

body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}

6-Vertical Align with CSS- If you want to know how you can achieve vertical-align functionality the right way, simply specify the line-height for your text the same height as that of the container’s.

#wrapper {
	width:530px;
	height:25px;
	background:url(container.gif) no-repeat left top;
	padding:0px 10px;
}
#wrapper p {
	line-height:25px;
}

Column Issues

7- Top reasons your CSS columns are messed up- An easy-to understand article on how to fix common CSS Column issues with helpful diagrams and code snippets.

CSS Tips


8- The Expanding Box Bug-When you try to create a two-column float layout, IE will create a “float drop”, and it’s caused by having over-sized content in a fixed-width floated div that must fit into a particular spot in the layout. Several possible workarounds are detailed in this post.

CSS Tips


CSS Positioning

9- Understanding CSS Positioning part 1- An interesting series of articles that doesn’t only cover positioning, but also properties that define layout such as display and float, and a preview of the new CSS3 layout modules. The first part will introduce the positioning and display property. Part1, Part2, Part3 gives you a deep understanding of the possibilities you have in positioning.

CSS Tips


10- What is the difference between relative and absolute positioning?- Whether to use relative or absolute positioning can be extremely frustrating to people just getting started with CSS. The answer to this question will add a bit of clarity to this confusion.

#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}

To get this:

CSS Tips


11-HangTab- Create a Sticky Tag from the Edge of the Browser Window (Even with Centered Content). Check out Panic’s website for their software Coda.

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

CSS Tips


CSS Float Concept

12- CSS Float Theory: Things You Should Know- SmashingMagazine browsed through dozens of related articles and selected the most important things you should keep in mind developing css-based layouts with floats.

<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>

13- Floatutorial: Simple tutorials on CSS Floats- Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

CSS Tips


14- Clear Your Floats – The Right Way- Float clearing can be one of the most frustrating aspects of CSS development, one of the best ways is to use the EasyClearing on your site.

/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container
{display: inline-block;}

/* Hides from IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}
/* End hide from IE-mac */

CSS Tips


Easier Rounded Corner Solutions

15- Mike asks the CSS Guy for recommendations on rounded corners- “Simplest way is to use a giant gif, then I’ll markup my box”

<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
  <div class="boxBottom"></div>
</div>

“And give it the background”

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}
.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

Also Askthecssguy explains the technique used in Google Analytics, which works by leaving a 1px notch in every corner to get the rounded corner effect which is a new way of creating rounded corners without using static images. You can see an example here.

CSS Tips


16-3 Simple Steps in Coding a Rounded Corners Layout- Alen Grakalic’s approach to coding a fixed width, rounded corners layout in 3 simple steps. He also created a demo here.

CSS Tips


CSS Form Issues

17- Tips For Creating Great Web Forms- Cris Coyer shares with us some tips for floating labels, :focus Pseudo Class, using hints and more. He also created the Nice & Simple Contact Form, which he first posted about here.

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
}

CSS Tips


18- Clean and pure CSS FORM design- For CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables. You can grab the code here.

CSS Tips


19-Autopopulating text input fields with JavaScript- Sometimes we need to explain to users what they are supposed to enter into text input fields. One common workaround when no label can be displayed is to put some placeholder text in the text field and let that act as the label. This tutorial introduces a nice solution, with JavaScript enabled, the label element is hidden and the value of the input element’s title attribute is copied to the value attribute. If JavaScript is disabled, the label is displayed above the text input, which is left empty. A simple demo, where you can see this in action is here.

CSS Tips


Worth checking CSS Tricks

20- Cross browser Horizontal Rule with Background Image- You’d like to create a cross-browser horizontal rule that utilizes a custom image as the content separator.

div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center; 
height: 10px
}
div.hr hr {
display: none
}

Your tag should look like this:

<div class="hr"><hr /></div>

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags:

74 comments for „Using CSS to Fix Anything: 20+ Common Bugs and Fixes
  1. Billco on June 15th, 2008 at 8:25 pm

    Excellent article, but some of the links are incorrect, and the first example does not show the fix. Nevertheless, this will make a great cheat-sheet for my CSS-challenged coworkers :)

  2. Ahsan Altaf on June 15th, 2008 at 8:32 pm

    Well yes the first example which i think is the most important one here dosnt show the fix. Any how good finds there.

  3. Welcome to Paradise on June 15th, 2008 at 9:23 pm

    I was familiar with the above examples except “Easier Rounded Corner Solutions”, “Worth checking CSS Tricks”, and “CSS positioning” also took quite a lot of time. This article did help to sort out quite a lot of things and will help me to work efficiently.

    Thanks mate.

  4. Rakesh Gupta on June 15th, 2008 at 9:24 pm

    Fix for the first example:

    #content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px;
    display: inline; }

  5. jbj on June 15th, 2008 at 11:21 pm

    Very good article, thanks for sharing!

  6. David on June 15th, 2008 at 11:26 pm

    hacks! :D

  7. Noupe on June 16th, 2008 at 12:02 am

    Oops, i totally forgot to add the display:inline; in the first example. Thanks for pointing this out, i am sure it was due to lack of coffee ;)

  8. Rajnish Singh on June 16th, 2008 at 12:15 am

    Hi

    I have a cross browser problem. thing is I have created a login page with using css style sheet which is created as seperate css style doc. and linked with the main login page. there are tables created in login page using table tag. And now the problem is that the login page displays in IE in centre of page but in fire fox it dispays left of the page I dont know why.

    could you please guide me on this.

    thanks

  9. Darren Yin on June 16th, 2008 at 12:35 am

    in the first tip, isn’t the “before” code the same as the “after” code?

  10. Noupe on June 16th, 2008 at 12:42 am

    @Rajnish Singh, Please provide a link to the login page so we could have a look at the code.

    @Darren Yin, in the “after” code of the first example, we added the display:inline rule to make it work in IE

  11. web design company on June 16th, 2008 at 1:34 am

    Some quick tips for common CSS issues and how to avoid easy pitfalls during your CSS coding process.

  12. blancus on June 16th, 2008 at 2:57 am

    Really good list. Thanks for sharing!

  13. Rajaie AlKorani on June 16th, 2008 at 5:09 am

    Definitely worth a bookmark! Thanks!

  14. Xarc on June 16th, 2008 at 5:40 am

    Really good list!!!

    Thanks.

  15. Matt on June 16th, 2008 at 6:04 am

    Neat use of CSS!

  16. MyRule on June 16th, 2008 at 7:10 am

    Very nice article, some of the examples really helped me! Thanks for sharing

  17. Moni on June 16th, 2008 at 8:54 am

    Noura, wicked post as always girlie :)
    Sure some of them have been discussed before, on u75 and even http://www.shoutingzone.com but this is a better more comprehensive list of fixes/hacks. The rounded css corner was a nice read too!

    *hugs*

  18. Erik on June 16th, 2008 at 11:27 am

    Why use a comment hack on #3 when only IE recognizes “* html”?

  19. sakib on June 16th, 2008 at 11:43 am

    IE6 is nightmare for all new web designers but after sometime they learn how to deal with it.

    —–one from me :D——

    IE6 assign 12px height to all div tags by default. It cannot be fixed by adding height:5px; etc. to fix it, add

    font-size:1px;

    OR

    Overflow:hidden;

    OR

    line-height:1px;

    —- Another tip —–

    display:table-cell; has ever been very helpful to me. I will allow you to make divs behave like tables, that will help you fix many problems. Make sure to add width attribute also cause you div will not use block width 100%

  20. Patrick Sweeney on June 16th, 2008 at 11:56 am

    Excellent article! I have sent this link to quite a few people because these are things people always ask me.

  21. Jake Rutter on June 16th, 2008 at 12:13 pm

    Great List, ever use spiffy corners? Those are pretty nice!

  22. Jon Aizlewood on June 16th, 2008 at 12:22 pm

    Great list once again. I was hoping to find an easy/easier hack to make dotted borders in IE6 like those in Firefox? I’m sure I speak for everyone who has wished IE6 simply rendered ‘dots’ instead of dashes.

  23. Bankai on June 16th, 2008 at 12:34 pm

    Good articles, but the horizontal rule one makes no sense wrapping an hr element into a div then styled it with css. What’s the point? Might as well put just a div there with a class and forget the hr element and styled it.

  24. Crankyman on June 16th, 2008 at 12:51 pm

    Laying things out was a lot easier with tables and spacer gifs. But try saying that to an HTML developer today and you’ll be burned at the stake for heresy. Laying things out with DIVs is a fad.

  25. Figaro on June 16th, 2008 at 1:17 pm

    yes, i agree with you, css based web design provide less afford for coders.

  26. Limied Edition iPhone on June 16th, 2008 at 1:23 pm

    Nice Tips! I used the first one!

  27. Nox on June 16th, 2008 at 1:26 pm

    @ Crankyman
    DIVs is not a fad, layouts with DIVs is easier for search engines to read. Your site will be index faster and cleaner than a table layout.

    Tables layouts might be easier, but if you are using table layouts why even bother with CSS? You are writing dinosaur code anyways.

  28. steve on June 16th, 2008 at 1:33 pm

    How come there’s no FIX for website background image flickering in IE6 and IE7? http://www.ahzhou.com/net

  29. Mondo Libero on June 16th, 2008 at 2:46 pm

    Thanks a lot for this wonderful list of tips, they are more useful.

  30. Noupe on June 16th, 2008 at 2:50 pm

    Hey everyone,

    Thank you for the comments! I’d like to address some of them:

    @sakib, Thanks for pointing this out. The CSS display:table-cell is to mimic the display properties of a table cell, but without actually having the table semantics at the markup level.
    For better understanding of the display rule, please check this post.
    http://www.quirksmode.org/css/display.html

    @Bankai, the HR tip was to use an image as an HR while preserving the web page backward compatibility and better phone browsing. I think it is a smart tip, as you might use them as a separators.

    @Jon Aizlewood, dotted borders in IE6 is one of the many issues we have to deal with. Personally i create a nice dotted borders for Internet Explorer using a repeating background graphic. A good example can be found here: http://kalsey.com/2003/07/css_dotted_borders_in_ie/
    If anyone has a better solution, let me know about it.

    Thank you all for your participation!

  31. Steven Snell on June 16th, 2008 at 3:21 pm

    Excellent bookmarkable list. Thanks.

  32. Joh thomas on June 16th, 2008 at 5:01 pm

    CSS Style Sheets ROCK. Frames are a thing of the way past!

    JT
    http://www.Ultimate-Anonymity.com

  33. dale tan on June 16th, 2008 at 5:10 pm

    here’s a tip for IE6 and doing css rollovers:

    aside from assigning the anchor’s containing element withe the same background image, apply overflow: hidden style to prevent text wrapping. by doing so, this avoids the “shadow” effect of seeing the rollover state.

  34. Brandon on June 16th, 2008 at 6:49 pm

    Nice list! I learned some great stuff from your post. Can’t wait to try out the 1 px notch for rounded edges!

  35. Amy on June 16th, 2008 at 7:08 pm

    is there any mention of conditional comments? It’s much better to place “hacks” in browser-specific style sheets targeted by conditional comments.. that way, good browsers don’t have to read hacky css.

  36. Thierry Schellenbach on June 17th, 2008 at 12:09 am

    Point 14 about clearing floats can be done quite easily with the following code

    Prefer this:
    .clearer {
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }

  37. Rajnish Singh on June 17th, 2008 at 1:29 am

    how i can link the file?
    please guide

  38. tib on June 17th, 2008 at 5:29 am

    this is complicate…

    The easyest way is to go on rentacoder.com, make a project where you fill all your css problems, put a maximum price of 5$ and then wayt. You will see at less 10 indians who will offer to do your job for free!!!

    In the mean while, you drink a beer.

  39. W3prodigy on June 17th, 2008 at 10:37 am

    I disagree with #8, using those methods is hacky and unnecessary. If you simply create a container div around the elements above the footer, then by setting an overflow:hidden to the container you can achieve a flowing design that matches with the floating content.

    Something like this (obviously in an external stylesheet):


    Left
    Right

    Footer

  40. W3prodigy on June 17th, 2008 at 10:41 am

    I apologize for the double post. see above post for reasoning

    #site_container { width: 950px; }
    #site_container #content_container { overflow: hidden; }
    #site_container #content_container #left { float: left; width: 250px; }
    #site_container #content_container #right { float: left; width: 700px; }
    #site_container #footer { width: 950px; } (if you feel this is necessary)

  41. dale tan on June 18th, 2008 at 5:20 am

    the only issue with Thierry Schellenbach suggestion is that unnecessary markup is added to the dom. rather than putting all the hacky markup in the css, they can be put into their own IE specific stylesheets which then can be added with IE conditionals.

  42. Stevan Ljuljdurovic on June 18th, 2008 at 11:06 pm

    This article was very helpful. I was having a bunch of problems with IE and this helps me fix a lot of them.

  43. Jane on June 19th, 2008 at 8:28 am

    Great list, thanks for sharing!

  44. Adrian Kelly on June 19th, 2008 at 10:02 am

    Some great points and I particularly found #15 for getting rounded corners of interest. I wonder if IE8 will smarten itself up?

  45. BadDream on June 19th, 2008 at 11:41 am

    oo 2490 digg very good

  46. modaser on June 20th, 2008 at 1:30 am

    thank you

  47. Internet and Design on June 27th, 2008 at 7:13 am

    Thanks for the article, with css positioning you can make a lot of nice websites!

  48. salwa on June 28th, 2008 at 12:22 pm

    good article. thanks for sharing!

  49. Felicity on June 30th, 2008 at 8:40 pm

    Some great tips, some I use and others I will need to add to my growing arsenal!

  50. jd on July 10th, 2008 at 12:12 pm

    Thanks for the tips. I’ll be sure to digg it!

  51. Jon S on July 11th, 2008 at 8:57 am

    Thanks! CSS can be a cruel mistress, always good to have a list of fixes to refer to.

  52. Altamira on July 17th, 2008 at 8:02 am

    Excellent article! I have sent this link to quite a few people because these are things people always ask me.

  53. jdzzle on July 27th, 2008 at 11:55 pm

    #1 is retarded why should i make a block element inline just to make IE happy, seriously M$ got this one wrong, wtf

  54. perdeci on August 9th, 2008 at 11:52 pm

    nice tutorial :) thanks

  55. Dwayne Charrington on September 9th, 2008 at 9:17 pm

    Fantastic list. Thanks for the great, useful resource. I regularly peruse this web-site on a daily basis, lot’s of handy resources.

  56. Rudy Herman Sinen on September 20th, 2008 at 7:52 pm

    This is a life saver. Thanks for posting this.

  57. Daniel on September 28th, 2008 at 4:44 am

    Wow I have saved this url for further projects. :)
    Thank’s

  58. boris on November 16th, 2008 at 1:40 am

    hey! can you suggest how i can repare font style for firefox http://www.aproduction.com.ua (in safari everything works great).

    font.subname 30px should work just for left column, but now it destroy my main block…

    best,

    b.

  59. Nick on December 12th, 2008 at 4:50 am

    Centering a Block Element

    Hi, i’m from brazil and i dont speak (write) english very well (sorry). But to align the div #content this way is better:

    #content {
    /*the values is a example you can change it!*/

    width: 900px;
    position: absolute;
    left: 50%;
    margin-left: – 450px; /*half of the width*/

    }

    to center the content in extreme middle of page use:

    #content {
    /*the values is a example you can change it!*/

    width: 900px;
    height: 600px;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: – 450px; /*half of the width*/
    margin-top: – 300px; /*half of the height*/

    }

    Sorry for the poor english…

    Thank’s!

    Nicholas

  60. Martin on March 13th, 2010 at 3:54 am

    it is really hard to write valid html and css so i always use a validator like validator.w3.org – although i really often have problems in using divs next to each other because i don’t know the real alignment. thank you for the links i will take a look at it to improve my css skills.

  61. Ranjit on March 24th, 2010 at 3:14 am

    Very nice article. Thanks for sharing..

  62. diseño web on June 22nd, 2010 at 3:40 pm

    Nice tips is very cool, I like it very much.

  63. Dauom on July 3rd, 2010 at 1:43 am

    nice tutorial :) thanks

  64. posicionamiento web on August 31st, 2010 at 3:18 pm

    Good articles, but the horizontal rule one makes no sense wrapping an hr element into a div then styled it with css. What’s the point? Might as well put just a div there with a class and forget the hr element and styled it.

  65. njmehta on September 7th, 2010 at 6:49 am

    The best thing about this list is not just the tips themselves but easy to understand illustrations. Love it.

  66. Rob Stathem on November 1st, 2010 at 8:40 pm

    Excellent resources here; thank you!!

    I’m having a CSS problem and maybe I’ll find the fix here on this site…but, I’m having an issue with browser resize and CSS positioning. I’ve got a BG image that is fixed to the top right of the browser window, but when I resize the browser window, the image moves. I tried putting this BG image within another div container elment, and that did not resolve the issue. If anyone has any thoughts, I’m open ears!

    Thanks,
    Rob

  67. Christin Poczobut on November 5th, 2010 at 9:43 pm

    Seriously! Photograph researching search engines for hours for this and i also last but not least found it listed here!

  68. php community on December 22nd, 2010 at 11:15 am

    thank for your blog i find the solution

  69. archana on June 12th, 2011 at 9:15 am

    I am new in web designing and i struggle a lot with IE.Your ie bug fixes helped me a lot.Thanks.

  70. Popcorn on July 2nd, 2011 at 11:03 am

    Nice post..I use most of them!!!

  71. muslimpribadi on December 19th, 2011 at 2:29 pm

    Now I know what z-index for, Thanks for the enlightenment

  72. Dheeraj on June 16th, 2012 at 11:39 am

    How to prevent zoom in and out in CSS?

  73. ruvaseguridad on March 9th, 2013 at 9:40 pm

    It’s been nearly five years, but the code has changed little.

  74. Extintores on March 11th, 2013 at 3:44 pm

    Quality code changes very little over the years.