CSS Tips: Putting a space above and below a table row / line break into a table cell using CSS

Regardless if best practice coding calls for the use of “tableless” tables and CSS, the reality of working with HTML pages is that you will often have to deal with tables in your HTML. Here are two little tips for using tables that might help you.

Inserting padding above and below a table row

If you have a table and want to put a line break or some padding around the rows (for example if it’s a product list in oscommerce or a features list of your product on a Joomla site’s article page), then how do you?

The trick is to take advantage of the css operator that looks like a greater than sign (“>”) which tells the browser to apply a style to all of the html elements that sit directly underneath the one that the style is applied to. That is, the children of the parent element.

Here’s how it is done:

First, set up a class with whatever name you want (e.g. “myrow”), create an HTML table and add the class “myrow” to the HTML for that row.

<tr class=”myrow”>

Next, put this css into your stylesheet:

tr.myrow > td {
padding-top:5px; padding-bottom: 5px;
}

That’s it! You’ve put a 5px gap above and below

Here is an example:

Before:

After: (for the purposes of illustration we will put a 25 pixel gap over and under each row element, instead of 5.

Note: you can easily modify your HTML to do this by doing a find and replace on <tr> with
<tr class=”myrow”>

Putting in a line break without using a br tag

Let’s say you had a product image and a caption inside a table cell and you were pasting a whole lot in from a third party. If you wanted to make sure sure that the description of each one was underneath the image in the cell without editing every cell and inserting a br tag, how could you do it?

There are three parts to this:

First, use the greater than (>) sign in your CSS To refer to the children of the row in the table (the td)

Second, assign a “clear right” css tag to any image in the cells of the table – so that the element underneath each image (the caption) is hard aligned to the left of the container (which is the table cell).

The first two bits alone will not complete the job. You also need to ensure that your caption has a display:block tag attached to it, so that the “clear” works.

Here’s how to do it in summary: give your table a class name (e.g. “mytable”) and then use this css:

#mytable tr > td img { display: block; clear: right; }

Here is an example:

Before:

Web Hosting for Australian Business

After:

Web Hosting for Australian business

Remove formatting from Word HTML documents

If you want to paste HTML content into your website from a word document, one problem to overcome is the fact that Microsoft Word adds miscellaneous formatting to your HTML that rarely looks good on the website you are pasting it in to. You would be better off if you could remove that formatting, and use the formatting of the website to format your site.

Luckily we have come across a tool that can do that for you – it’s a free, online tool to strip MS Word formatting out of HTML. Here’s how to do it.

1. Save your Word document as an HTML document on your hard drive. Close it in MS-Word
2. Open the document in a text editor like Notepad++ and copy the HTML that MS-Word generates to Notepad.
3. Open a web browser and go to Word Off, the MS Word cleaning tool
4. Copy and paste the code saved in Notepad++ into the tool and submit it – clean HTML will appear that you can paste into your website. Easy!

This is a great tool that will save you endless time and pain! Well done to its author Tom Dyson!

SEO: How to check backlinks in Bing and Google

Link building is an essential part of growing your website’s search engine rankings so how can you find out how well you are doing? Yahoo Site Explorer was previously an excellent tool that you could use for this purpose but with the amalgamation of much of Yahoo!’s functionality into Bing, there are now two places you can go to find out your backlinks: Bing and Google.

Bing is the better of the two tools as it gives you more up to date information and makes it easy to check many websites (for example you and your competitors) quickly.

Here is how to check your backlinks in each of Google and Bing:

Bing

It’s easy to check the indexed links back to your website from other sites (the “votes” for your site from other websites). Go into the Bing search engine and type the following:

link: www.geekz.com.au

Substitute geekz.com.au for your own domain name and make sure you put the space between the colon (: character) and the domain name otherwise you’ll get no results returned.

Google

You can do a very similar thing in Google but you’re likely to get only a fraction of the links returned by Bing. You would type:

link:www.geekz.com.au

Substitute geekz.com.au for your own domain name and note there are no spaces between the colon (: character) and the domain name.

For one of your own sites you can see more than this fraction of links by going into the Google Webmaster Tools tool, verifying your website and checking the backlinks – but if you want to check a competitor’s site to give you an indication of how well you compare to them, Google is not the tool to use – Bing does it better in that respect than Google.

Prestashop 1.4: Urgent Security Update is Required – herfix.php

Attention Prestashop Users: The Security Fix email that has been sent out by Prestashop is legitimate and a fix is required to many 1.4 installations.

The procedure is to change your database password, download a fix file from the Prestashop website to the root of your site and run it. The file deletes itself once it has run with the message “OK” displayed.

How to change your database password with cPanel

If you don’t know how to change your database password, here’s how.

1. Using an FTP program open the config/settings.php file for your Prestashop 1.4 installation. It will tell you the database name and the username you are currently using. Look for the line that contains the line _DB_USER_ – note down this username
2. Log in to cPanel
3. Go to MySQL Databases
4. Scroll down to the section “Current Users”
5. Find the user referred to in the config/settings.php file and DELETE it by clicking the red cross next to the name
6. Under the heading “Add new user” and add the username again that you have just deleted but choosing a new password. The generate password button can help you.
7. The user needs to be added to the database. Under “Add user to database” on the same screen, select the user you just created and then the database that applies to your Prestashop 1.4 shop. Click “Add” and then choose “All Priviledges” from the screen that appears.

You’re done! Now follow the instructions on the Prestashop blog to fix the issue. Make sure that you substitute myshop.com for your own domain name when you run the fix file.

Why lowering the gst import threshold will not work

The latest and greatest idea to slow the growth of consumers buying online is to lower or eliminate the gst threshhold for imports. The argument for this is that by forcing people to pay gst on their overseas imports, fewer people will buy online and instead head back to the shopping malls. The reality of this is that since a large percentage of international orders are lower value, having to pay gst on those items will not significantly change consumer’s behavoiur – especially with the Australian dollar so high in value. Because shipping prices in Australia are very high compared to overseas, local retailers will still be competing with foreign sellers who can ship items to Australian consumers cheaper than an Australian seller.

What about the cost of collection? The paperwork required to complete customs forms can be long and involved, and if this process isn’t going to be streamlined (involving the cost of review, changing and communication of the change), then there will be significant costs in collecting the tax when items arrive. It will also push up shipping times for Australian sellers importing goods from all of the extra paperwork being performed by customs agents.

The solution to the issue is not applying a tax on consumer buyers importing goods into Australia, it’s helping Australian businesses be more competitive on their shipping costs within Australia. It should not be the case that it’s cheaper for a foreign seller to send an item to an Australian consumer from a foreign country cheaper and faster than a domestic seller can send it to that same Australian from here. Does Australia Post needs a review?