CSS Weirdness (Padding Issue - I think)

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;
}

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

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

Kim:

.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?

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

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;
}

Kim:

.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?

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?

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!

If defining the border to 0px solved the problem, that means that somewhere before that statement there is another border definition that was being expressed until you overrode it. (It could even be in another stylesheet which is loaded before the one you edited, for some setups.)

I found this in your stylesheet.css, at 1/4 from the top of the file:

/sideboxes/
.columnLeft {}

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

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #FF6699;
padding: 0.5em 0.2em;
}

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

Then the one you put in at 1/5 from the bottom of the file:

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

.leftBoxContainer {
margin: 0em;
border: 0px solid #ffffff
}

You are overriding both margin and border definitions; it would be cleaner to edit the first instance and not have the second.

howser, gjh42 is 99% right. What you have done is make a copy of stylesheet.css called stylesheet_jel.css but also left a copy of stylesheet.css in your template directory.

This means that any deletions from stylesheet_jel.css will have zero effect as your store still picks up the original styling from stylesheet.css. That's why you had to override rather than delete the border settings to make them work. The very easy answer to this is simply to delete the unneeded stylesheet.css (there will still be an unused copy in template_default should you ever want to go back).

Perfect, thanks for all the replies. I cleaned up the code and also cleaned up the directory as well. Appreciate everyone who answered!