Category: CSS

Changing the window scope in Firebug

Posted on by

If I had to choose one piece of advice for new web developers, I’d tell them to learn to use Firebug. Firebug is probably the most valuable debugging tool available, but if you are just getting started, it may seem pretty opaque at first.

In addition, some things do not appear to work as advertised. In particular, the “cd” function does nothing as far as I can tell.

The page that documents the commands you can use within Firebug lists the cd command as a way of changing the window scope:

Picture 23.png

Continue reading

Detect browser support for style properties

Posted on by

It is common to use object detection to discriminate between browser capabilities (See Quirksmode: Object Detection.

However, sometimes it is necessary to detect whether or not a browser understands a particular CSS style property, and it is not obvious how to do this.

You can’t test for the existence of the property directly but you can test for the data type of the value of the property. If the data type is anything but “undefined”, the property is understood by the browser.

The example below shows a couple of rows from an automatically generated table of items. Each row has a corresponding editable version which shows up when the “edit” button is clicked. The original, non-editable row is hidden at the same time the editable row is displayed. If “display=’block” is used to display the TR, Safari will render it as a TD. To correct this, “display=’table-row” must be used on browsers that understand it.

Continue reading

When colspan property doesn’t appear to work in Firefox or Safari

Posted on by

When building web applications I often use display styles to show or hide divs or table rows as needed. On one project, I found that the “colspan” property did not seem to work in Firefox or Safari. This was because I had incorrectly used display:block to style the TR element, instead of display:table-row. A demo is below, and the code follows.

Continue reading

Debugging and troubleshooting HTML and javascript

Posted on by

Spreadfirefox Affiliate Button

Firefox, the web developer’s debugging tool of choice

The best browser to use to check javascript errors is Firefox, hands down. Other browsers have some error reporting, but none give you anywhere near the detailed information as Firebug, an addon to Firefox. The extensions available allow you to snoop into every aspect of your page, and into the communication between page and server.

You will need to get several Firefox extensions:

Firebug
Firebug is the one extension I can’t live without. It shows errors in javascript, css, allows you to inspect the HTML source, computed style, events, etc.

Continue reading

No table padding on IE for PC

Posted on by

A small difference in the way IE and other browsers interpret table attributes:

Browsers other than IE will show padding if it is applied to the table tag.

table {
padding:6px;
}

IE does not recognize table padding, and will show contained elements as flush with the edges of the table.

For example:

This is the way Safari 2.0 renders the code below. Note the 6 pixel white padding area between the edge of the table and the edge of the tr.

Continue reading

Firefox more sensitive to malformed comment tags

Posted on by

Firefox is much stricter in parsing comment tags than Safari or IE.
Comments should have 2 hyphens after the exclamation point, no more, no less, and there should be no hyphens within the body of the comment.

So:
<!--
is OK, but
<!----
is not, particularly in Firefox.

Example 1 shows a table surrounded by a properly formed comment tag.
Example 2 shows the same table surrounded by a tag with too many hyphens – the table and all code between comment tags disappears – in Firefox.

Continue reading