center boxes border & back ground IE display different

**sgflowers** · 22 May 2006, 04:57 PM

Hi I can't seem to resolve this

for the center boxes (what's new, specials, featured etc) I want a border & background color

i used this class

.centerBoxWrapper {
background: #f8f8f9;
border: 1px solid #9a9a9a;
margin-bottom: 15px;

}

which seems to work in firefox but the margin at the bottom is messed up in ie

the products images & text stray beyond the border & background

any ideas??

also i am trying to create a thicker border at the bottom like the sideboxes
which i can't get to work in either ie or FF

I attached my stylesheet.css for reference

**kuroi** · 22 May 2006, 07:45 PM

Originally Posted by sgflowers

Hi I can't seem to resolve this

for the center boxes (what's new, specials, featured etc) I want a border & background color

i used this class

.centerBoxWrapper {
background: #f8f8f9;
border: 1px solid #9a9a9a;
margin-bottom: 15px;

}

which seems to work in firefox but the margin at the bottom is messed up in ie

the products images & text stray beyond the border & background

any ideas??

also i am trying to create a thicker border at the bottom like the sideboxes
which i can't get to work in either ie or FF

I attached my stylesheet.css for reference

Do you have a link where this is visible?
Which version of ZC are you using?
What is your template based on (Classic, template_default, 3rd party, other)?

**sgflowers** · 22 May 2006, 08:57 PM

Originally Posted by kuroi

Do you have a link where this is visible?
Which version of ZC are you using?
What is your template based on (Classic, template_default, 3rd party, other)?

sorry i left out a lot of the details

based on default_template

test site (1.3):

http://sulserv.dyndns.org/sgf

original site (1.2.6)

http://www.secretgardenflowers.com

- thanks, kevin

**kuroi** · 22 May 2006, 10:25 PM

If you replace your centerBoxWrapper CSS with this, it should deal with the issues that you listed

.centerBoxWrapper {
float:left;
width:100%;
background: #f8f8f9;
border-color:#9a9a9a;
border-style: solid;
border-width: 1px 1px 5px 1px;
margin-bottom: 15px;
text-align:center;
}

In brief, the wrapper div was not included in the main flow of elements which was why the items that appeared to be inside it, actually floated on top of it and allowed it to close up. Having floated the width setting is to stop FF from compressing the box.

The border issues were mainly points of syntax, and the text align was thrown in just to make everything look a little more balanced and like the original site.

**sgflowers** · 24 May 2006, 04:25 AM

Originally Posted by kuroi

If you replace your centerBoxWrapper CSS with this, it should deal with the issues that you listed
In brief, the wrapper div was not included in the main flow of elements which was why the items that appeared to be inside it, actually floated on top of it and allowed it to close up. Having floated the width setting is to stop FF from compressing the box.

The border issues were mainly points of syntax, and the text align was thrown in just to make everything look a little more balanced and like the original site.

nice

worked like a charm thanks

**DarkSol** · 6 Jun 2006, 01:58 PM

Greetings :)

If its ok, I would like to ask a question or two about this matter as well.

You see, I am trying to do the same: Creating my own style using the "default_template" and I am having some problems. -_- I should add that Im a designer and still kinda new to CSS. ^^

So, for now my question in this matter:
I also wanted the center content boxes to have a border! Thanks to your instructions here, I got this to work as well. :) However, I noticed that, unlike the SIDEBOXES, the center boxes dont just include the real content area, but ALSO its header! >_<

Which is bad if you, like me, want the design to be the same for the sideboxes and the main content in the center area. -_-

So, I only want a border around the actual center content areas, NOT their headers as well.

Oh, by the way, heres a link to what I am working on:
http://www.fullmetaljapan.com/store

Thanks in advance!
DarkSol

**JohneeMac** · 21 Sep 2006, 04:54 PM

When i cleared with clear:left it messed up my display in FF.

Use display:table instead of float:left

Code:

.centerBoxWrapper {
display:table;
}

**kuroi** · 21 Sep 2006, 11:45 PM

Darksol: if you're still out, sorry that your post got missed. You're right that the structure of the center boxes is slightly different to that of the sideboxes. However, you can easily make it the same by adding a DIV around the content in tpl_columnar_display.php.

JohneeMac: Although I've seen display:table discussed on a few sites, I've never actually seen it used, probably because of the complete absence of support for it in IE (even IE7 - source: quirksmode). Do you have a way around this?