Above the left nav, there is a black gap. It is shaped wierd too. Any clues? Thanks for all of the help.
It's in the background image:
Note that with a single background image like that, any change in font size will cause menu items to fall out of alignment with the background.
Instead, break up the background and set the background of each menu item to the gradient. Until CSS 3's
background-size is widely supported, you'll have to fake it by stretching an <img>. "menuItemBG.png" is attached. A List Apart has an article "
Super-Easy Blendy Backgrounds" that explains the technique. Note that the article also shows how to composite a gradient within the page, while my example below creates a gradient solely using the image (though it could also be used to create a gradient in-page in most browsers merely by changing the image to one with transparency).
HTML:
<ul class="menu">
<li><img src="http://forums.x10hosting.com/images/greyGradient.png" class="bg" /><a href="">Home</a></li>
<li><img src="http://forums.x10hosting.com/images/greyGradient.png" class="bg" /><a href="">Forum</a></li>
...
</ul>
Code:
.menu {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 200%;
}
.menu li {
position: relative;
border: 1px solid black;
border-width: 1px 1px 0px;
overflow: hidden;
text-align: center;
padding: 0 0.5em;
line-height: 140%;
vertical-align: center;
}
.menu li:last-child {
border-width: 1px;
}
.menu li * {
position: relative;
z-index: 1;
}
.bg, .menu li .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
z-index: 0;
}
As for the news ticker, drop it entirely. News tickers are hard to read because:
- It's harder to read moving text than stationary text. Eyes move, text shouldn't.
- They will always move too quickly for some readers and too slowly for others.
- You can't read what's not on the screen.
All of the above are why the "marquee" tag was deprecated. Making a marquee in JS misses the point. Instead, have a little news box with headlines that link to full articles.