What tha?

In Safari (maybe others) , the links on the left have a black background that I want to get rid of
please help!
http://northwoodsartscouncil.org/index2column.html

http://northwoodsartscouncil.org/2column.css

in your css you were changing the bg color of the links instead of the TEXT COLOR of the links.

this should correct it…


a:link {
color: #ffffff; } 

a:visited {
color: #000000; }

a:hover {
 color: #ffcc00; }

a:active {
 color: #ff00cc; }


You’re going to love yourself.

a:visited {
background-color: #000000; }

Look at the link for More? Look familiar?

Thanks you guys. I’ve been trying to get the text links to be below the button images on the left navBar, would someone please tell me how to do that?

Change the padding top on your li a to 2em

Alternatively, use the background-position property.

I am not sure how to change the li padding top. I did try a background-position, the text links moved down, but not far enough yet.

Find the CSS selector "#navBar a:link " and change the padding-top

so close to getting it. if i increase the top padding of the #navBar a:link more than 2 em, the bottom link goes down too far.

What is your arbitrary definition of “too far”? I can increase it to 3 em and it still works on your page.

If you remove the set height on #navbar, and also remove the height on ul, then you could get your nav bar to increase along with increases in its content instead of staying at a set height.

There are many many more things you should change, but this should answer the previous question.

And you don’t need the wrapping <div id=“navBar ul”>, which also has an improper ID value.

also remove the height from Content

Thank you very much, I made the changes as you said.
What i mean by “too far down” is that the bottom link is pushing down into the footer if i give the padding top more than 3 em. I still want to move the text links down from the buttons just a bit more.
I’ve been trying to get this for a few days now.


html {
    overflow-y: scroll;
}
body {
    background: none repeat scroll 0 0 #EEEEFF;
    font: 62.5% arial,helvetica,sans-serif;
    margin: 0;
    padding: 0;
}
a:link {
    color: #006600;
}
a:visited {
    color: #000000;
}
a:hover {
    color: #FFCC00;
}
a:active {
    color: #FF00CC;
}
#wrapper {
    background: none repeat-y scroll 0 50% #EEEEFF;
    border: 1px solid #000000;
    margin: 20px auto;
    overflow: hidden;
    width: 950px;
}
#header {
    background-color: #0066CC;
    background-image: url("img/topbanner.jpg");
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 12em;
    padding: 2em 2em 1em 300px;
}
#header h2 {
    font-size: 140%;
    font-weight: normal;
    margin: 0;
}
#header p {
    font-size: 80%;
    margin-top: 0;
}
#header p more {
    font-size: 70%;
    padding: 0 0 25px;
}
#headerimg {
    background-image: url("img/topbanner.jpg");
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}
#contentbanner {
    background-image: url("img/cllpart/snowborder_blue.jpg");
    background-repeat: no-repeat;
    float: right;
    height: 30px;
    padding-top: 0;
    width: 780px;
}
#content {
    float: right;
    padding-top: 2em;
    text-align: justify;
    width: 700px;
}
#left {
    float: left;
    margin-top: 3em;
    width: 159px;
}
#navBar {
    background-color: #FFFFFF;
    background-image: url("img/buttontablebackground159.jpg");
    background-position: center top;
    background-repeat: repeat-y;
    display: block;
    float: left;
    font-size: 1.25em;
    position: relative;
    width: 170px;
}
#navBar ul {
    display: block;
    list-style: none outside none;
    margin-bottom: 1em;
    margin-top: 1em;
    padding-left: 0;
    width: 100%;
}
#navBar a:link {
    background-image: url("northwoodsartscouncil-media/northwoodsartscouncil-graphics/northwoodsartscouncil-buttons/northwoodsarts-normal.jpg");
    background-position: 0 center;
    background-repeat: no-repeat;
    color: #006600;
    display: block;
    font-size: 1em;
    height: 60px;
    margin-left: 2em;
    padding-left: 3em;
    text-decoration: none;
    width: 5em;
}
#navBar a:visited {
    background-image: url("northwoodsartscouncil-media/northwoodsartscouncil-graphics/northwoodsartscouncil-buttons/northwoodsarts-over.jpg");
    background-repeat: no-repeat;
    color: #000000;
    display: block;
    font-size: 1em;
    text-decoration: none;
}
#navBar a:hover {
    background-color: #FFCC33;
    background-image: url("northwoodsartscouncil-media/northwoodsartscouncil-graphics/northwoodsartscouncil-buttons/northwoodsarts-over.jpg");
    background-repeat: no-repeat;
    color: #006600;
    display: block;
    font-size: 1em;
    text-decoration: none;
}
#navBar a:active {
    background-color: #FF0066;
    background-image: url("northwoodsartscouncil-media/northwoodsartscouncil-graphics/northwoodsartscouncil-buttons/northwoodsarts-over.jpg");
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    font-size: 1em;
    text-decoration: none;
}
#footer {
    background: none repeat scroll 0 0 #91A2B8;
    border-top: 1px solid #000000;
    clear: both;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
h1, h2, p {
    font-size: 1em;
    margin: 0 0.5em 0.5em;
}
h1 {
    padding-top: 0.25em;
}
h2 {
    font-size: 1em;
}
p {
    font-size: 1em;
    margin: 0 0.5em 1.15em;
}
#footer p {
    font-weight: bold;
    margin: 0;
}
p.expand {
    font-size: 0.75em;
    font-weight: bold;
    margin: 0 0.75em 0.5em;
    padding: 0.5em 0;
}
p.expand a {
    color: #0000FF;
    text-decoration: none;
}
p.expand a:hover {
    background: none repeat scroll 0 0 #5555FF;
    color: #000000;
    display: block;
    height: 250px;
}

So I was just playing around fixing things, and came up with this. I like it, maybe you will, too. Try playing around with it in Firebug to see what I did, and why it works (especially when talking about widths/heights, and margins/padding.)

Beautiful.
Thank You!

well i changed it around some, put the navBar inside the content div, now my visited link buttons look messed up (they moved to the left and the text links centered on top of the buttons) in some browsers like win ie 6-7, mac opera. maybe i changed something else?

http://northwoodsartscouncil.org/2column.css

Why would you put the nav bar inside of the content division?
Semantically it makes no sense.

And can you post a screenshot for win ie 6-7, mac O?
Also including what you want it to show.

i thought it looked better with the navBar in the content. when the navBar was float left there was empty space below the buttons down to the footer, and the content got long and skinny

Oh good lord that page is painfully bad – paragraphs around heading tags’s?!? Four or five sentences in a H2?!? Whole slew of unnecessary div (header, ul, navbar), that stupid malfing adobe mm_ javascript nonsense, line-breaks inside those menu anchors for nothing, comment placement likely to trip IE rendering bugs… and that’s before we talk the horrendously bad tiling of the background and oversized page header pushing content to the second scroll…

See this:

Well there’s your problem

Also, the tranny doctype is auto /FAIL/ – if this is a new site you should be writing in STRICT; transitional is for supporting old/outdated/half-assed code, NOT for creating new websites.

A LOT of the problems is all those invalid paragraph tags, and then NOT using paragraphs around the paragraphs… Throw it out and start over. Lemme guess, Dreamweaver? Using the WYSIWYG?

so i was dropped on my head as a child. how big should the header be? why is a header div wrong? why is a navBar div wrong? thanks

Would you be more specific on what the problems are with the paragraphs and what the tranny doctype should be?
I think I learn better by correcting the mistakes rather than starting over.