Site check please: 2 flexible columns, equal height

[Richard Jenkins]

Hi. I'd appreciate some comments/help with this site:

http://www.moonremovals.co.uk/new

The aim is to use css positioning to recreate something similar to:

<table>
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td nowrap>Navigation</td>
<td width="100%">Content</td>
</tr>
</table>

I've gone round in circles a bit by removing the HTML table and adding a CSS
one. Am I correct in assuming that it's okay to layout a page design with
CSS tables?

Anyway, I've tested it as follows:

Works fine in Internet Explorer 6, Netscape 7.1 and Opera 7.23.

Problems:

-Mozilla 1.7 & Firefox 0.8-

The layout works fine on my local copy of the website, but once uploaded to
the server, on the first load of a page the content div overlaps the
navigation div slightly. Refresh the page and it sorts itself out.

I scroll down the page a bit then click a link in the navigation div, the
page sometimes jumps up a bit and the link isn't followed. Once it's jumped
up and I click on the link it works okay. If I scroll back down after it's
jumped up and click the link again it jumps back up.

I tend to have to 'scroll down, click, repeat' several times to get it to
happen, but it does it often enough for it to be a problem. It doesn't seem
to happen with links in the content div.

-Netscape 4-

The first line of the first heading/paragraph in the content div or the
first line of headings/paragraphs in the content div with images aligned to
them display across the whole page (underneath the navigation div and any
images).

I may end up just hiding all styles from Netscape 4 but I'd obviously be
interested if anyone has a workaround or even if someone knows why this
happens.
I'd appreciate it if people would test it on other browsers. I don't have
access to a Mac and I'd be interested to know how it displays in earlier
versions of Internet Explorer, Netscape, Opera etc...

Thanks,

Richard Jenkins

[Barry Pearson]

Richard Jenkins wrote:

Hi. I'd appreciate some comments/help with this site:
http://www.moonremovals.co.uk/new

The aim is to use css positioning to recreate something similar to:
<table>
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td nowrap>Navigation</td>
<td width="100%">Content</td>
</tr>
</table>

I've gone round in circles a bit by removing the HTML table and
adding a CSS one. Am I correct in assuming that it's okay to layout a
page design with CSS tables?

[snip]

If you mean "using { display: table }" or "using { display: table-row }", I
believe those are not supported by IE (even IE 6). I believe your layout works
in IE because IE has a compensating fault that causes it to behave as you
require (but I'm not certain). You may say "good!"

But what you are doing is normally done a different way, that should work
without relying on faults. You may prefer it. You are probably using the above
"display" properties to ensure that you get columns for the navigation &
content, even if one is much longer than the other. The more common way is to
give the navigation a width, and to give the content a margin-left of about
the same amount or a little greater. This will keep the stuff in the content
away from the left hand side, whether or not there is navigation at that
point.

I don't know whether this will cure your problems.

Another problem you have is that you have { width: auto } on the navigation.
If the user doesn't download the images, and so they get replaced with the alt
text, the latter will force the navigation bar to be very wide, and so cause
it to overlap with the content. It is probably better to use an explicit width
of some kind for the navigation, although there are probably other ways too.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/