Borders for middle column in 3 column footer - please help!

jaus101 posted this at 12:10 — 3rd November 2009.

They have: 2 posts

Joined: Nov 2009

Hi all,

I'm having trouble modifying the 3 column footer that Megan kindly showed us:

http://www.apaddedcell.com/how-create-multi-column-wigitized-footer-wordpress

I want to have a vertical border on the left and right side of the middle column only - currently I'm putting border-left/border-right in the #chunkyfooter div tag, but it's showing up on all the sides of all columns.

Furthermore, where would I put the formatting for the body text of the footer?

Here is my code:

/* Chunky Footer */

#chunkyfooter {
clear: both;
overflow: hidden;
padding-top: 10px;
border-top:1px dotted #ccc;
border-bottom:1px dotted #ccc;
padding-bottom: 10px;
margin-bottom: 30px;
}

#chunkyfooter div {
width: 270px;
height: 140px;
float: left;
padding: 0 10px;
border-left:1px dotted #ccc;
border-right:1px dotted #ccc;
}

#chunkyfooter h2 {
margin-top: 0;
padding-left: 14px;
font-weight: bold;
}

#chunkyfooter ul {
padding-left: 14px;
}

Thanks all, I'd really appreciate the help, and sorry for such a lame-o question!

Justin

webwiz posted this at 00:03 — 4th November 2009.

He has: 629 posts

Joined: May 2007

It's tough coming up with a definitive answer without some actual code to play with, but this should do what you want in most browsers:

#chunkyfooter div {
border-left: 1px dotted #ccc;
...
}
#chunkyfooter div:first-child {
border-left: 0;
}

To fix IE 6, try this:

* html #chunkyfooter {
margin-left: -1px;
}

(You may also have to add "width: 100%;" to that last rule, but I can't be sure that won't mess something up...)

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;