Fixing bugs with the colorful css blocks

With this post, I would like to share an idea about bug fixing when you are working on the looking of XHML+CSS page.

As you can see in the picture above, there are some colorful blocks in that picture, I would like to call it as the “visual tool” for bug fixing of CSS&XHTML, a quiet simple “tool” for bug fixing, I think. You know, though it’s 21st century, but there are still a few different browsers on this planet, as a web designer or developer, sometimes(most of the times for me) you have to “fight” with the browser compatibility when you are coding your webpage, you know what I mean, right? {And IE 6 is suck to waste my life}. This will make the objects you want to check on the webpage you are editing or fixing bugs visual, it highlights the objects with the colorful background with a few quiet simple CSS attributes.

How to get started:

Get started with this “tool” is quiet easy, just add the “background” value into your CSS file, like below:

.object {
	background: yellow; /* you can define the color whatever you like */

or write a single CSS attribute then add it next to the object CSS name you want to go with bug fixing, like this:

.bgYellow { background: yellow; }

and do it on the XHTML page with this <div class=”object bgYellow“>…</div>

Really simple, isn’t it?

How it works:

After you add the “background” value into the Object CSS attribute, go to the webpage you are working on, refresh it, then you will see the change that you made in the CSS file. As the picture shown above, you would get the looking of your page with the colorful blocks.

What do those blocks do?

In shortly, now you can see the looking of your objects with these attributes:

  • Width – how wide it is.
  • Height – where it reaches vertically
  • Position – where it is and what relationship with the other elements on the page
  • Proportion – to the other elements in size of the page.

That means, you can control everything on the page because you can see everything now, people usually can’t control something that they are hidden.

as the example of my own site, right here

What you can do with it:

  • Looking checking
  • Adjusting the objects with an easy and visual way
  • Better to work with Navigation bug fixing and positioning, the navigation which is non-text
  • Once again, everything is in control.

It’s better to work with the non-text navigation of a site, as the example of my own site

After you are done with your work, you can just delete the “background” value in the CSS file.

Well, this is not a big deal with the powerful CSS, but it would be good method to control something with CSS.

  • design tech
  • short url

Comments are closed.