Website page content dropping to bottom when window is resized?

[Draeger]

www.glasgowkayakclub.com

On the left hand side, the Nav bar, the top Nav section "Home" appears to have "jumped" upwards by a few pixels if viewed in I.E. 6.0. This problem is not apparent in I.E. 7.0.

Also, when viewing the "Calendar of Events" and the "Gallery" the content has all dropped to the bottom of the page and the links on the right have shifted across to the left, moving the whole page and throwing it all out of line.

I'm wondering if its to do with the right hand side of the page where the link images are as it seems to fall on its face and move all the content down when you slowly move the right side of the page in and reduce the window size. Just tried it in IE 7.0 as well and when moving the right side of the window in, it does the same at a certain point. So I would assume that this points to something wrong with my code rather than a browser compatibility problem?.

Been tearing my hair out for days trying to find a solution for this.

Any advice greatly appreciated.

 

[Draeger]

Managed to improve it a fair bit.

I had this relating to the nav element "Home" in the style.css:-

<li><span class="style5"><span class="style6"><a href="index.html">Home</a></span></span></li>

I changed it to :-

<li class="style7"><a href="index.html">Home</a></li>

.....and it did the trick, stopped the "Home" part of the nav bar jumping up.


Now for the problems to appear at all, you really need to resize the viewing window a good bit till its very small indeed.

Made a few changes to my style.css sheet and adjusted the sizes of the pictures down a bit, same with the table on the calendar page.


Its not perfect yet, but its better.

 

[blade007]

put some whitespace on the right hand side of the text, to balance it up a bit, doesn't look right hard flushed on the gray line

 

[Draeger]

Whats the best way to achieve that?.

Just add padding on the right or something?.