CSS Computed Styles

I have not been blogging here because I've been doing a lot of web design research lately which does not involve ASP.NET. I'm really slacking off on improving my programming skills. I went on a fabulous vacation and never came back mentally. However I'm still making the effort to master web design so I will share some of my recent discoveries.

Yesterday I learned about the "computed style" in CSS. I don't know why I've never come across this term before now. There are so many little details in web development. I'm always finding holes in my knowledge. Any way, a computed style is the value a CSS property will have when the browser needs to calculate the value based on a percentage or a value relative to another value. For example, if you specify a div to have a width of 50% and it contains an element that inherits its width from the div, then that element will have a computed value.

I had to figure this out because I'm using the http://www.plaintxt.org/themes/sandbox/ WordPress theme as a template for a custom theme. The web design community seems to be very keen on WordPress. You can find many tutorials on how to design for WordPress. I was working on the header for my design and found it would not appear at the top of the page in Firefox. There was a gap between the top of the page and my header. I examined the layout in Firebug and saw a 16 pixel offset on the top of the header element:

I could not figure out where that 16 offset was coming from. There was nothing in my CSS to set any height to 16px. Eventually I tried the developer tools in other browsers. Opera told me that there was a top: 16px computed style for my header element. So I had to learn about computed styles and how to deal with them.

The height for a block-level element is calculated in CSS. If such an element has no height defined, it will be set to auto, which is the default height for block-level elements. You have to change the height of the div by either adding a border or a padding to avoid the computed style.

So to eliminate that computed value I had to add a little padding to the top. As you can see I did have its height defined so I don't know why there was still a problem.

   1: #header {
   2:     background: #FFFFFF url(images/header_img.jpg);
   3:     height: 145px; /* height of image */
   4:     padding-top: 1px;
   5: }
The following CSS property values will result in a computed value; ‘auto’, ‘inherit’, ‘50%’, ’smaller’, ‘1.5em’ etc.

1 Comment

  • where did you find the information about how to combat the computed offset? i've got a similar problem with background and text colors, and i've been unsuccessful in tracking down what property i need to set in order to prevent the automatic style from being assigned to the controls i'm using.

    thanks.

Comments have been disabled for this content.