Discussion on:

the navigation complaint.....

The CSS below allows a fix for keeping the Site navigation always visible.

with the three columns defines, using column two for the main content you can use column 3 for the spotlight on ad bar and column one for a spacer to keep the site display at the desired width.

to see the functionality, with the colours specified, check http://jaqui-greenlees.net
This being the CSS used on there.

NOTE: this is standards compliant CSS, IE doesn't render it 100% correctly.[ and I am not going to put the effort to support IE, if MS wants it to display the site correctly they can make it work with standards compliant code. ]

Note2: with the addition of another xml declaration to the xhtml script IE will play nice and render this correctly.

  body { border: 0pt none ;
    margin: 0pt;
    padding: 0pt;
    background: #B1B1B1 repeat scroll 0% 50%;
    height: 100%;
    max-height: 100%;
    font-family: arial,verdana,sans-serif;
    font-size: 76%;
    overflow: hidden;
    }

  * html body { padding: 180px 0pt 50px;
    background-color: #B1B1B1;
    }

  #container { padding: 20px;
    background: #B1B1B1 repeat scroll 0% 50%;
    font-family: "times new roman",serif;
    font-size: 1.2em;
    position: fixed;
    top: 200px;
    left: 0pt;
    bottom: 50px;
    right: 0pt;
    overflow: auto;
    text-align: left;
    }

  * html #container { height: 100%;
    width: 100%;
    background-color: #B1B1B1;
    }

  #header { border-bottom: 4px solid rgb(115, 162, 189);
    background: rgb(83, 130, 157) repeat scroll 0% 50%;
    position: absolute;
    top: 0pt;
    left: 0pt;
    width: 100%;
    height: 200px;
    overflow: auto;
    text-align: center;
    }

  * html #header { height: 200px;
    }

  #footer { border-top: 5px solid rgb(83, 130, 157);
    background: rgb(115, 162, 189) repeat scroll 0% 50%;
    position: absolute;
    bottom: 0pt;
    left: 0pt;
    width: 100%;
    height: 45px;
    overflow: auto;
    text-align: center;
    }

  * html #footer { height: 50px;
    }

  h1 { margin: 0pt;
    padding: 0pt;
    font-size: 4em;
    }

  #footer p { margin: 5px 10px 0pt;
    color: rgb(255, 255, 255);
    }

  #header img { margin: 10px 10px 0pt;
    }

  #container img { margin: 5px;
    }

  #absolute { border: 1px solid rgb(0, 0, 0);
    padding: 10px;
    background: #B1B1B1 repeat scroll 0% 50%;
    position: absolute;
    top: 400px;
    right: 100px;
    width: 200px;
    }

  #left { border: 1px solid rgb(0, 0, 0);
    padding: 10px;
    background: #B1B1B1 repeat scroll 0% 50%;
    float: left;
    color: rgb(0, 0, 0);
    width: 50%;
    }

  #right { border: 1px solid rgb(0, 0, 0);
    padding: 10px;
    background: #B1B1B1 repeat scroll 0% 50%;
    float: right;
    color: rgb(0, 0, 0);
    }

  a, { text-decoration: underline;
    background-color: transparent;
    color: #000000;
    font-weight: bold;
    font-size: 1em;
    }
  a:visited { text-decoration: underline;
    background-color: transparent;
    color: #00FF00;
    font-weight: bold;
    font-size: 1em;
    }
  a:hover { text-decoration: underline;
    color: #FF0000
    font-weight: bold;
    font-size: 1.5em;
    }

  .grey { color: rgb(136, 136, 136);
    }

  .ltgrey { color: rgb(221, 221, 221);
    }

  img#mascot { float: right;
    }

  #header ul { border-top: 1px solid rgb(115, 162, 189);
    clear: both;
    text-align: center;
    }

  #header ul { margin: 0pt;
    padding: 0pt;
    background: transparent repeat scroll 0% 50%;
    list-style-type: none;
    height: 3em;
    }

  #header ul li { display: inline;
    color: rgb(115, 162, 189);
    }

  .strike { text-decoration: line-through;
    }

  .lft { float: left;
    }

  .rgt { float: right;
    }

  .columnone, .columntwo { width: 31%;
    float: left;
    text-align: justify;
    margin-right: 2%;
    }

  .columnthree { border: 1px solid rgb(255, 255, 255);
    text-align: justify;
    }

  * html .columnthree { border: 0pt none ;
    }

  hr { border: 0pt none ;
    clear: both;
    height: 1px;
    color: rgb(136, 136, 136);
    background-color: rgb(136, 136, 136);
    }

  .columnthree a, .columnthree a:visited { font-size: 1em;
    color: rgb(0, 0, 0);
    text-decoration: underline;
    }

  .columnthree a:hover { color: rgb(136, 136, 136);
    text-decoration: none;
    }

"NOTE: this is standards compliant CSS, IE doesn't render it 100% correctly."

This is one of the most unintentionally funny things I've read in quite a while. Thanks for the laugh, and for your hard work.

I borrowed a friend's system and used his IE to view the site, IE doesn't play nicely with it.

scroll bars all over the place, including in the fixed div header.
[ at 800 by 600, which it doesn't do in a browser using the gecko rendering engine. ]

I even checked it out in both lynx and links, neither of which support images or CSS, they both have a clean look for the site, even if it's not the same layout as the CSS gives.

in typing and debugging all that. It might be meaningless to you but the way I type, it would have taken me hours if not days. I really got a charge out of it.

Dawg

with the addition of:

before the doctype declaration in the html/xhtml file IE plays nice with the css.

editing to add:
the Headers then look like this for IE to work with the xhtml and css scripts.

 
 
 
   Development Server for Jaqui-Greenlees