CSS help needed, Els, Grey, anyone?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Longtime no speak everyone. I'm glad to see the spam here hasn't
totally chased everyone away.

Page in question: http://ssb.webaccessstrategies.com/template.html
CSS file: http://ssb.webaccessstrategies.com/css/styles.css

The good news is, it looks consistent in FF2, FF3, IE6, IE7, Opera
9.60, Safari for windows 3.1.2, and Google Chrome and is valid HTML
4.01 strict. (it is a requirement that final product supports these

The bad news, my skillz are rusty.

The first is the most obvious: The 'home' link's background is AFU.
This is because the <a> element doesn't fill its <li> parent.  My
efforts to fix this haven't been successful.
Relevant CSS begins at line 268

Somewhat related:
Hover over 'Free Trial' should turn the tab blue. This works as
intended in Safari, Chrome, and IE 7 but not Opera or FF2.

Last, the original graphic design was 1000px wide with 100px padding
on each side.  In an attempt to maintain the design's integrity and
provide a fluid design, I've given the design a 10% margin on either
side.  Considering the two boxes on either side are 200px, the center
content area starts overlapping the left column at  less than 1200px
or so.  Is there some magic I'm missing out on that would allow me to
maintain this 10% gutter and fluid center content area?

as always, TIA!


Re: CSS help needed, Els, Grey, anyone?

KarlCore wrote:

Quoted text here. Click to load it

Quoted text here. Click to load it

It cannot fill the LI element, because the LI element has paddings.
Set those paddings on the <a> instead.

Quoted text here. Click to load it

background-position: -150px right; won't work
make it:
background-position: 100% -150px;
Does that help? The thing is you can't mix the words with the numbered
values, and the horizontal one comes before the vertial one.

Quoted text here. Click to load it

You've got the left column at 20% width. Its content box (class
"side_box"), you've set at 180px. Whenever 20% of the page's width is
less than 180px, this side_box will stick out of div#secondary, and be
overlapped by the middle column.

HTH :-)

Els                     http://locusmeus.com /

Site Timeline