⁄wordpress⁄wp-content⁄themes⁄default

For other themes the path will vary so make sure you have identified the correct one for the theme you have in use.

Then using your favourite text editor open up the following files:

• sidebar.php
• header.php

Note: Before you make any changes to these files make sure you have a backup

Next look for the following code fragment in sidebar.php which is used by WordPress to generate the list of page links.

<ul><?php wp_list_pages('title_li='); ?></ul>

Copy the line of code above from the sidebar.php file and paste it in to the header.php file

This will copy the page links from the sidebar to the header. The end result may look strange because of the CSS styles in use. To get the result seen above in the header of this blog I changed the stylesheet to make the page links float right, where you place them is down to personal preferences.

⁄wordpress⁄wp-content⁄themes⁄default

Then using your favourite text editor open up the following files:

• sidebar.php
• header.php

Note: Before you make any changes to these files make sure you have a backup

Next look for the following code fragment in sidebar.php which is used by WordPress to generate the search box (What this code does is to insert the contents of the searchform.php file at this point in the page. The searchform.php file contains the code to produce the search box and the search button).

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

Cut the line of code above from the sidebar.php file and paste it in an appropriate location in the header.php file.

This will move the search form from the sidebar to the header. The end result may look strange because of the CSS styles in use. To get the result seen above in the header of this blog I changed the stylesheet to make the title float left and the search form float right, where you place the search form is down to personal preferences.

The website for this ride was built using Microsoft FrontPage 2003 and looks fine if viewed with Internet Explorer but looks a real mess if viewed with Firefox.

The problem is that FrontPage out of the box has default settings that assume that websites will be viewed with IE. This includes allowing the use of VML Graphics which are the main culprit for things going wrong.
We tried changing the settings on FrontPage and then re-publishing the website but that didn’t improve things at all. The only solution was to create a totally new website then edit the pages manually to remove the VML stuff that was causing Firefox (and other standards-compliant browsers) to go bananas.
As an example of what happens, where content was positioned manually using FrontPage this would be placed in the correct place by VML if the browser was IE. For other browsers there was a jpg image of the content that was displayed instead. The most obvious sign of this happening is where links don’t work when using browsers other then Internet Explorer (how could they as they are just part of an image).
The only sensible solution was to rewrite everything manually removing hundreds of lines of VML. This had the effect of improving performance as the size of the pages is reduced pretty dramatically. Also used CSS to reproduce the table based design of the original website, so FrontPage out of the box didn’t use any CSS at all.
FrontPage 2003 is hardly leading edge these days but there are quite a few websites out there that were built with this tool, and a lot of them have problems with cross-browser compatibility and modern browser standards. With some refactoring work they can be bought up to modern standards without having to re-create them from scratch.

There doesn’t seem to be an easy answer to this question that will work with most browsers. The method shown here works fine for my requirements but that’s not to say there aren’t better ways of doing this out there.

The requirement I had was for a restaurant that required a table with three columns; the text of the menu item, special colour characters for vegetarian or wheat free dishes,  and the price of the item. The image below shows an example of the menu.

The text column is left aligned text with a width of 85%. The second column is centre aligned with a width of 5%.  The third column with the price has to be horizontally right-aligned, vertically top aligned, with bold text and a width of 10%.

There are several ways of doing this, one approach is to style each cell in the column but the resulting code is not easily changed and can be very tedious for tables with a large number of cells, plus it is going back to using tables for presentation

An alternative approach is to use pure CSS by constructing the table with <div>tags and not using html table markup at all. This works but does result in divitis with loads of nested div tags.

The best solution I’ve found, and no doubt there are others as good or better out there,  is to use the :first-child pseudo-class.  This pseudo-class matches the first occurrence of the specified element within another element. You can request the first cell within each row in the table with the end result being a column.  So the the CSS  style sheet containing:

div.menu_box td:first-child {
width: 85%
}

Would result in the first column of the table having a width of 85% of the enclosing element, in this case the menu_box div.

To select the second column in the table just use the adjacent sibling combinator which is a plus symbol. This will select an element that immediately follows another element with the same parent,  in this case we select a <td> tag that immediately follows another <td> tag when they are both children of the same menu_box div parent.

Adding this to the style sheet results in:

div.menu_box td:first-child {
width: 85%;
}
div.menu_box td:first-child + td {
width: 5%; text-align: center;
}

Following the same pattern, to make the third column right-aligned and bold we just need to add another adjacent sibling plus (+) sign and another td selector to give:

div.menu_box td:first-child {
width: 85%;
}
div.menu_box td:first-child + td {
width: 5%; text-align: center;
}
div.menu_box td:first-child + td  + td {
width: 10%;
text-align: right;
font-weight:800;
vertical-align: top;
}

This works with most modern browsers, but doesn’t work with IE 6 or previous.

That requires some extra CSS (shown in bold below) to make up for the fact that older versions of IE don’t have support the solution outlined above, but does have support for some non-standard attributes in the

tag (which the more modern standard-compliant browsers like FireFox do not support).  So to get something that works correctly with most browsers you have to use two different methods combined as shown below.

div.menu_box col.c1, td:first-child {
width: 85%;
}
div.menu_box col.c2, td:first-child + td {
width: 5%; text-align: center;
vertical-align: top;
}
div.menu_box col.c3, td:first-child + td  + td {
width: 10%;
text-align: right;
font-weight:800;
vertical-align: top;
}

The col.c1, col.c2 and col.c3 selectors are used within a tag in the HTML table as shown below.

<div class="menu_box">
<table border="0">
<colgroup>
  <col class="c1"></col>
  <col class="c2"></col>
  <col class="c3"></col>
</colgroup>
...table rows and cells go here....
</table>
</div>

To test browser compatibility I used the free service at http://browsershots.org where you can test a page and receive images of the page for each platform/browser/version combination.