rounded corners alignment issues for sidebox

[abs007]

Hi
I have posted this same issue on another thread which was started by someone else but a year or so ago - I havnt received a reply so thought it might be a good idea to start a new thread about it.

im using the snazzy css code which can be found at the following url

http://www.cssplay.co.uk/boxes/snazzy2.html

I have added the coding to my stylesheet.css and also the html coding to

includes>templates>MYTEMPLATE>common>tpl_box_default_left.php

For some reason it has created a rounded sidebox container without a bottom boarder - However it hasnt changed the affect of the sidebox heading.

You can view it on my test site at the following url

http://www.buycheaplcdtvs.co.uk

Can anyone help me add the rounded corner affect to the sidebox heading please. Not too sure what ive done wrong.

For some reason the snazzy boarder has overwritten the css style for my sidebox container which was

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 2px none #0000CC;
border-right: 2px groove #2554C7;
border-left: 2px groove#2554C7;
border-bottom: 3px solid #2554C7;
border-top: 1px groove #2554C7;
margin-top: 1.5em;
}

I am presuming this is because i directly added the html coding to the tpl_box_default_left.php file

If I wanted to add extra css coding for the bottom boarder and the side boarders - fo example a color then would i now do this through the tpl_box_default_left.php file or the stylesheet.css file.

I have a feeling its included in the code which I pasted into the sylesheet.css which was as follows

.xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:1.2em; 
padding:0 10px 5px 10px; 
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:10px;
}
.xsnazzy {
background: transparent; 
width:240px; 
float:left; 
margin:0 3px;
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px; 
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}

So I guess I will need to edit the colors - is this right?

Also should I cancel out the previous coding that I had for the sidebox containers which i have posted above or should I just leave it? The reason I am asking is so that browsers will not make any unwanted queries and cause the website to load slower.

I would prefer to use css coding then using an image so if there is a way to show the sidebox header as rounded then this will be great

thanks

Oh yeh I forgot to mention - for some reason the left sidebox container looks as if it is overlapping with the centrebox - not too sure why this is but the further you go down the page the more noticable it is

[tony_sar]

remove the property in red and see if this helps.


.xsnazzy {
background: transparent;
width:240px;
float:left;
margin:0 3px;
}