Styling Left Boxes

Results 1 to 5 of 5

18 May 2011, 14:24

tonerider

New Zenner

Join Date:: May 2011
Posts:: 3
Plugin Contributions:: 0

Styling Left Boxes

New site in development. v1.3.9. I am creating a new template from the "classic" theme.

My problem: I cannot get rid of the space between "leftBoxHeading" and "categoriesContent". Although I have styled it with a height of 25px (same as the background image) there is still a gap of approx 10px that prevents the borders of the box below to move up against it.

here's my css:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
/*padding-top: 0.5em;*/
padding-top: 5px;
background-image: url(../images/tile_back.jpg);
height: 25px;
width: 190px;
background-repeat: no-repeat;
}

Here's the url: http://www.customshop.co.za/zencart/

Can anyone help?

John.
Cape Town

18 May 2011, 14:47

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Styling Left Boxes

stylesheet.css (line 60)

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0;
}

Override this for the sideboxes by adding margin: 0; to
stylesheet.css (line 555)

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
background-image: url("../images/tile_back.jpg");
background-repeat: no-repeat;
height: 25px;
padding-top: 5px;
width: 190px;
margin: 0;
}

Also, your image is not 25px tall, so reduce the height to match it.
Nevermind, the padding-top increases the height by 5px.

18 May 2011, 15:17

tonerider

New Zenner

Join Date:: May 2011
Posts:: 3
Plugin Contributions:: 0

Re: Styling Left Boxes

Thanks!

But now my original problem has returned: How do I center the "categoriesHeading" text? As soon as I add "padding-top: 0.5em" the gap reappears!

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
/*padding-top: 0.5em;*/
background-image: url(../images/tile_back.jpg);
height: 25px;
width: 190px;
background-repeat: no-repeat;
margin: 0;
}

Much appreciated.

John.

18 May 2011, 15:44

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Styling Left Boxes

Make the height 20px with padding-top 0.5em.

This is a consequence of a fundamental characteristic of the CSS box model: when an element has a height or width explicitly set, padding is added to the dimension instead of filling inside the dimension as you would expect. An element with a height of 25px and padding-top of 5px will be 30px tall.
I think it was a bad decision, but there's no changing it now.

18 May 2011, 15:53

tonerider

New Zenner

Join Date:: May 2011
Posts:: 3
Plugin Contributions:: 0

Re: Styling Left Boxes

Thanks very much!

Works 100%

John