Random CSS tips and tricks

I wrote (as in handwritten) this a couple of weeks ago when I was having trouble sleeping, chances are you already know these things but, for the benefit of my rusty memory, I’ll still post it here. Besides, solving these problems took me hours of frustration, so I better chronicle it. :(

  • There are times when list items occupy a huge space in IE even though you’re sure that you haven’t specified excessive paddings and margins to it. Setting the list item’s display value to inline-block will solve this (I’m a little surprised that IE 6 can interpret this value because I’ve always thought that it only knows block and inline, that’s how little I think of it).

    Inline doesn’t allow paddings and margins at the top and bottom area of the elements, however, it also means losing the width and layout of the element. In inline-block, we achieve just that, lose the excess top and bottom spaces while still being able to maintain the layout of the element. (That is, based on my understanding)

    And in some bizarre cases, inline will do and yes, it will still look like it’s a block item and will just take out the excess margin, weird, yes? I wish I have an explanation for this.

  • There are numerous times and reasons why we want to set list-style to none. What sucks is that after you’ve turned off the list-style to the parent list item, you’d realize that you want the bullets to show in the children element.

    All hell breaks lose when no matter what head-banging you do, it just won’t show up. Thankfully, display: list-item is there to restore the bullets and is working in IE too!

  • List items are supposed to line up neatly even when a float is used to an image before it. However, there are times when that’s not the case in, you guess it! IE 6. Standards-aware browsers will be solved by adding:
    { overflow:hidden; list-item-position:inside; }

    The result may be that the bullet may be a little too close to the text but at least it’s not below the list item just like in IE. The trick is to use display:inline-block too.

  • Not all of the CSS problems are in IE. Sometimes the great Fx 2 has some quirks too. It usually happens in the useful, albeit a little used, autocomplete function. What usually happens is that the autocomplete items go under the div elements below it.

    Here’s what I usually do:

    HTML

    <div class="parent_element">
      <div class="autocomplete">
        <ul>
          <li>Value here</li>
        </ul>
      </div>
    </div>

    CSS

    .parent_element { position:relative; z-index:99; overflow:visible; }

    What my understanding of this is that once the z-index is set, then it lifts the entire div and everything within it above every other element in the page therefore eliminating the problem.

min-height in IE 6

Would you look at this, while everyone has finally decided that they will be dropping support for IE 6, that’s when I decided to create a tutorial for implementing min-height for the browser. Anyway, onto the post.

We all know that the min-height property doesn’t work in IE 6. Instead, the height property acts as both the element’s height and min-height. Its role will ultimately rely on the value of your overflow property.

If the overflow property is set to hidden then the height of the element is its max-height. If set on visible, however, then it will be its min-height.

Overflow: Visible

The element will take up the specified height and when the content of the element exceeds the height then the element will just expand vertically (or horizontally, if it needs to). You can define whether the it will expand vertically of horizontally by specifying the value for overflow-y (vertically) or overflow-x (horizontally) (your CSS document won’t validate for CSS 2.1 though, but it’s valid once tested against CSS 3).

So your CSS (for IE 6) will look something like this:

div.parent-element { height:300px; overflow-y:visible; overflow-x:hidden; }

The Complexities that hasLayout Brings

There are some instances when you have to define the height and overflow properties of an element (usually applicable to lists) to meet the demands of the hasLayout curse in IE. In these instances, you will have to add a bogus height and overflow:hidden thinking that it will not bring harm to your design.

That is until you wanted to add a min-height to the parent div.

If your bogus height is set to 1%, you element will collapse. Setting the height to auto will render your layout worse than before because that means that your element “will not have a layout” (ie, your hasLayout is nonexistent in IE).

Setting the height to 100%, however, will then expand your element to the height of its parent div (or element).

You can solve this dilemma by changing your overflow value from hidden to visible and setting the height of your element (usually, list items) to 1% just to retain the bogus height.

Being productive with CSS

I don’t know about other people but I, for one, use a lot of classes in every design project. So with every project that I have to code, I have to put all of them again and again and again that there are moments that I was not able to add some of them altogether.

For example are the classes that enables you to float a certain element (to use for images and whatnots), I always call it alignright or alignleft, always. I have never thought how slow that made me in creating CSS because every time I do one I tend to forget one or more class (or element) or worse, I forget how I was able to do it in one site (e.g. losing the quotation marks in quote tags) that I have to open the CSS file for that site again. I have always thought of creating a default CSS that will have all of the classes that I always use plus the default appearance of almost all of the elements.

Classes it is understandable but why elements you ask? Well, one main reason is still the pesky IE. IE does not render quote tags the same way that the new browsers do, i.e. they do not put quotation marks before and after the quote tags to signify that it is a quote. So what I do is take out the quote on all of the browsers in CSS and instead put the hex decimal for quotation marks — &ldquo ; (minus the space) for left quote and &rdquo ; for right quotes. If we have to lose support for IE 6, I have to say that it will be pretty hard to maintain. But that may not for how many years from now.

So, here is what my default CSS looks like, feel free to use it if you like:

a img { 
   border:0 none; 
}
q:after, q:before {
   content: '' 
}
code, samp, kbd, pre, tt { 
   font-size: 115%; 
}
pre code, code pre { 
   font-size:100%; 
}
acronym, abbr {
   border-bottom: 1px dotted #000; cursor: help; 
}
dfn { 
   font-style: italic; 
}
dl dt { 
   font-weight: bold; 
}
dl dd { 
   margin-left: 0; margin-bottom:.8em; 
}
ul li, ol li { 
   margin-bottom: .3em; 
}
fieldset { 
   border:0 none; 
}
th, caption { 
   text-align: center; 
}
legend { 
   font-weight: bold; 
   font-size: 120%; 
}
input, select, textarea { 
   padding:.2em; 
}

.clear { 
   clear: both; 
}
.right { 
   text-align: right; 
}
.left { 
   text-align: left; 
}
.alignright { 
   float:right; 
   margin-left: .8em; 
   margin-bottom: .8em; 
}
.alignleft { 
   float:left; 
   margin-right: .8em; 
   margin-bottom:.8em; 
}
.center { 
   text-align: center; 
}
.strong { 
   font-weight:bold; 
}
.italic { 
   font-style: italic; 
}
.navigation { 
   padding: .8em 0; 
   text-align: center; 
   font-family: Georgia, "Times New Roman", Times, serif; 
   font-size: 105%; 
   font-weight: bold; 
}
	.navigation ul, navigation li { 
            list-style: none; 
            margin: 0;
            padding: 0; }
	.navigation li {
            display: inline; 
            list-style:none; 
}

Have I missed to style any important element?

I used relative measurements so that I don’t have to edit it anymore whenever I have to use it. I also do not put any specific rule such as borders, background colors and those that depends on the look and feel of the site.

What do you do to make your coding easier?