CSS Weirdness (Padding Issue - I think)

[howser]

Hi everyone,
I'm having a wierd issue with one box on my site. I've gone through the tutorials and still have a problem that I think is attributed to css, at least somewhere. If you look at my site: http://www.jelcards.com and see the area around the left column Categories it has white space all around it. The right side doesn't have that whitespace, although I made the settings the same (I think) for both. I'd like to have it look like one continuous line both in size and color. The size works well for IE, but can be off on Firefox.

Two questions:

1) How do I fix the whitespace? I want it to go away.

2) How can I ensure that the line across (left, center, right) is the same size in all browsers?

Thanks! BTW -- below is some of the relvant code from my stylesheet.

****
/*sideboxes*/
.columnLeft {
margin: 0em;
padding: 0em;
}

h3.leftBoxHeading, h3.leftBoxHeading a {
font-size: 1em;
color: #ffffff;
}

.leftBoxContainer {
margin: 0em;
}
.rightBoxContainer {
margin: 0em;
}
.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #996666;
background: url(../images/grad1.gif);
background-repeat: repeat-x;
padding: 0.5em 0em;
color: #ffffff;
}

.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff;
}

.rightBoxHeading {
margin: 0em;
background-color: #996666;
background: url(../images/grad1.gif);
background-repeat: repeat-x;
padding: 0.5em 0em;
}


h3.leftBoxHeading a:hover {
color: #eedfcc;
font-size: 1em;
text-decoration: none;
}

h3.rightBoxHeading a:hover {
color: #eedfcc;
font-size: 1em;
text-decoration: none;
}

.rightBoxContent {
background-color: #ffffff;
margin-bottom: 1em;
}

[yesterda]

um, im learning too, so I cant help ya, but maybe you can help me... How did you change the New Products For May Title Background Color? I can't find it in the css... thx

[Kim]

.leftBoxContainer {
border: 1px solid #ffffff; <<<< remove this
margin-top: 1.5em;
}

[howser]

.leftBoxContainer {
border: 1px solid #ffffff; <<<< remove this
margin-top: 1.5em;
}

Thanks -- but if you look at the .css above, I don't have that line, I have:

.leftBoxContainer {
margin: 0em;
}


Any other ideas?

[Gkrynen]

.leftBoxContainer {
border: 1px solid #ffffff; <<<< remove this
margin-top: 1.5em;
}

Thanks Kim, this helped me to remove the 1 pixel border and the top margin so the column aligns correctly using Firefox.

However in IE it still has the border and additional space between header and lower columns. Any ideas?

[howser]

Any other ideas, since my css code is very simple for the left box container and is the same as the right box container, wouldn't it stand to reason that they would behave the same?

[howser]

My problem was solved not by removing this line:

border: 1px solid #ffffff

For one, I never had it in, but instead I changed it from 1px to 0px and that fixed it. I don't really know why I needed it, but either way, problem solved. Hopefully that helps someone in the future!

[howser]

um, im learning too, so I cant help ya, but maybe you can help me... How did you change the New Products For May Title Background Color? I can't find it in the css... thx

Here's the part that does that:

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #996666;
background: url(../images/grad1.gif); <-- This is a 1px by 25px gradient that I made
background-repeat: repeat-x; <-- This command repeats that gradient.
padding: 0.5em 0em;
color: #ffffff;
}