How to Troubleshoot CSS Styles on a Live WordPress Website

I was browsing through the WordPress.org support forums today and came across a question by a user who was creating an image grid on a page. There was a border around the table he created and it wasn’t clear on how to remove it.

Here’s how I found what was causing the border and how it could be removed…all without having to touch a single piece of code on his/her live website.

How to Create an Image Grid in WordPress

First, there are many ways to accomplish a grid of images on a WordPress page or post.

• The built-in Gallery Feature included in WordPress. Nice step-by-step here.
• A multitude of image gallery plugins. The most popular by far being NextGen Gallery.
• Creating a customized page template in your theme.
• Writing HTML directly into a page and inserting your images and links.
• Using the Grid Loop feature of the Genesis theme framework. This is what I do mostly, but it’s because my image galleries tend to be links to posts in a certain category.

Method Used and Problem

This user was using #4 in the list above. They chose to create a table in HTML directly inside the page and insert their images and links in each table data cell. The problem that this user was seeing was a border around the table even though they specified that there be no border.

The Unwanted Borders

This is the code they have:

<table height="100" cellspacing="0" cellpadding="0" bordercolor="#808080" border="0" style="width: 205px;">

Cause

Even though they specified border=0 above, the table was still being given a border around it. I suspected that the table border was being defined by the CSS styling included with the theme they were using. I took a look at the CSS code and here’s what I saw.

Table HTML on Left - CSS Styles Affecting it on Right

Solution

You can see in the image above that there is definitely CSS there that is specifying a 1px solid border for tables, table headings, and table data cells.

To see if these were the cause of the borders, I simply turned these styles off with my handy web development tool as seen in the image below.

You’ll also notice I can see the .css files where this code exists on the right side.

Turn Off CSS Styles for Tables

How I Found and Offered a Fix

This is no mind blowing secret and many of you reading this may already be familiar with this tool and using it yourself. It’s one of the most popular free Add-ons for Firefox named Firebug.

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

While using Firebug and looking at the CSS for that that website, I could see the .css files as in the above image. Firebug also allowed me to simply right-click and copy the full path to the stylesheet file in order to share that with the user. Check it out in the image below.

Hover or Copy Location to Grab Full URL to CSS File

Summary

At the time of this writing the user hasn’t responded to the thread to update on whether this was the ultimate solution to their issue, but if not, I’m confident that just knowing that the CSS styles were affecting their code was enough to lead them in the right direction. At least I hope so;)

Do You Use Firebug?

Please share your advice and tips with us in the comments section below so we can all learn more.