CenterBox-Main Pg- I want borders

My main page center column images do not line up or center across section. I tried using stylesheet to center, but keeps doing entire area.

I would like to add dotted line or solid and center images/info. inside the box. I am not very good at css. I have been trying for several days.

Help.:frusty:

Kim

Part of the problem is that the system will change settings based on your telling it how many images across. In this case, you have it set to four. The system gives each item a width of 25%. This would be fine if it were not for padding that also effects it.

Around line 902 of your stylesheet.css, the margin-left adds enough to the overall total that 100% is exceeded and one item is moved to the next line.

You can trick the system into allowing enough room for borders by giving the elements negative side margins:```
.centerBoxContents, .specialsListBoxContents, .additionalImages,
.centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin-top: 1em;
margin-bottom: 1em;
margin-left: -0.4em;
margin-right: -0.4em;
border-left: 1px dotted #aaaaaa;
border-right: 1px dotted #aaaaaa;
}

Notice that some of the borders are shorter than others - this cannot be overcome without some PHP coding.
You might want to try the Column Divider Pro mod, as it compensates for different height products in a row, at the cost of a bunch of HTML table markup.

gjh42:

You can trick the system into allowing enough room for borders by giving the elements negative side margins:```
.centerBoxContents, .specialsListBoxContents, .additionalImages,
.centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin-top: 1em;
margin-bottom: 1em;
margin-left: -0.4em;
margin-right: -0.4em;
border-left: 1px dotted #aaaaaa;
border-right: 1px dotted #aaaaaa;
}

> 
> Notice that some of the borders are shorter than others - this cannot be overcome without some PHP coding.
> You might want to try the Column Divider Pro mod, as it compensates for different height products in a row, at the cost of a bunch of HTML table markup.

Thank you so much for the information! I will try the column divider pro mod.
Kim:clap:

I loaded the Column Divider Pro and went great! But....I have noticed that many people (potential customers) do not like the dotted grid......how do I change to solid line.

Kim

stylesheet_dotline.css shows that a background image is being used. Presumably you could replace that with your own, or style .vDotLine and .hDotLine with solid borders.```
.vDotLine
{
background-color: transparent;
background-image: url(../images/delim_v.gif);
background-repeat: repeat-y;
background-attachment: scroll;
width: 20px;
font-size: 1px;
}

.hDotLine
{
background-image: url(../images/delim_v.gif);
padding:1px 0;
}