Case study: border lines and spacing

In an earlier post the question was raised about how to handle css problems between a theme and a plugin.  That post described how to either remove the default css or to create a custom css file.

Before one creates a custom file, one needs to know what css changes are needed.  This is where the firebug add on for firefox is incredibly useful.  It allows one to easily see what css is affecting the html and where it is coming from.

Following are my notes at looking into the problem for a website.  The website uses the Portal Colorido theme and as you can see two problems are evident

• the dashed lines don’t line up
• there is too much space above the events

See the ical widget html compared to the categories widget above

Without even getting into firebug, it appears

• by looking at the category widget above that side bar list items have css that generates a dashed line underneath
• The spacing is probably a combination of list item spacing (once one has lines, one usually has extra spacing), on top of table cell spacing.

With the firebug add on enabled, I can right click on a piece of html – say the 4:00 pm, and see what css is affecting it.   And yes, the list items are defined in the css to have a bottom border of dashed lines.

The li s have a bottom border

How to fix the dashed lines alignment?

The quandary here is that we probably want to keep the dashed lines to maintain consistency with the rest of the theme.  So we have I think 2 options:

1. Just for the ical widget html, cancel out the list item border and add it back in on the bottom of the table cells, or
2. align the table cell contents to the bottom. Tthis will force the time information down.  This is my preferred suggestion.  Firebug allows one to try out remotely on the site!  To make this permanent, the change must be made to a custom css file.

Editing with firebug

Table cell contents forced to the bottom

How to fix the spacing?

Using firebug (or view source), I can see the html elements that may have css causing the spacing – the tr, td, ul, or li.

The html affected

Checking each in turn, one can see that

• the tr has no padding,
• the td has padding of 10px top and bottom
• the ul has a margin of 5 px at the bottom
• the li has padding of 5px at the bottom

So in total above each subsequent  “event” will appear a total of 35px:

• 5px  – ul bottom (from the event above)
• 10px  – td bottom (from the event above)
• 10px – td top
• 10px – li top

the li is not a problem since it has the dashed border and creates the consistemt look with the other widgets.

the td has padding

the ul has a margin

Aim for consistency

To maintain consistency with the rest of the widgets, I think the thing to do here would be to zeroise the table cell padding.   In fact that would probably be a useful bit of css to add to the default for the widget only – for the page events, we probably want to keep any table styling.

Again we can test this out temporarily in firebug, by editing out that 10 px.  The result looks quite acceptable:

Effrect of zero ing the table cell padding

In summary

To make these changes permanent for the ical events widget,

• copy the icallist.css to say icalcustom.css in the plugin directory and
• add something like the following code:

#wcompprop0 td {
    padding: 0;
    vertical-align:bottom;
}

Related posts:

1. Plugin and theme css not working well together?
2. Ical events list items
3. Hovers, Lightboxes or Clever CSS?
4. Tidetables?
5. V2.9.1 simpler default css, Neg bymonthday messages removed