...

View Full Version : Problem with rounded corner css box (Spiffy Box)



alexmel7
05-10-2009, 09:50 PM
Hey everyone, I'm using Spiffy Box (rounded corners css box) on a website I'm doing, and I'm having a problem that messes up the box when there is too much content in the box. When the box gets to tall, it creates the following problem:

http://wri.eas.cornell.edu/CETERC_website1/staff.html

On my other pages, the box is fine (ex: http://wri.eas.cornell.edu/CETERC_website1/events.html)

Here is the css I'm using:


/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2{
background: transparent url(images/whitebox1.png) no-repeat bottom right}
.cssbox{
float: left;
/* intended total box width - padding-right(next) */
width:600px !important; /* IE Win = width - padding */
width: 600px;
/* the gap on the right edge of the image (not content padding) */
padding-right:15px; /* use to position the box */
margin:0px auto}

/* set the top-right image */
.cssbox_head{background-position:top right;
/* pull the right image over on top of border */
margin-right:-15px;
/* right-image-gap + right-inside padding */
padding-right:40px}

/* set the top-left image */
.cssbox_head h2{
background-position:top left;
margin:0; /* reset main site styles*/
border:0; /* ditto */
font-size: 24px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
color: #0d2362;
/* padding-left = image gap + interior padding ... no padding-right */
padding:35px 0 0px 40px;
height:auto !important;
height:1%} /* IE Holly Hack */

/* set the lower-left corner image */
.cssbox_body{
background-position:bottom left;
margin-right:40px; /* interior-padding right */
padding:0px 0 40px 40px} /* mirror .cssbox_head right/left */

.cssbox_body img.about{
padding:8px 0 5px 0}

.cssbox_body img.staffpics{
float: left;
padding: 0;}

.cssbox_body h3 {
font-size: 17px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
color: #6a1920;
line-height: 18px;
margin-top: 15px;
margin-bottom: 10px;}

.cssbox_body h4 {
font-size: 17px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
color: #0d2362;
line-height: 18px;
margin-top: 25px;
margin-bottom: 10px;}

.cssbox_body p {
font-size: 14px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
line-height: 18px;
margin-bottom: 15px;}

.cssbox_body p.eventsp {
font-size: 14px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
line-height: 18px;
margin-bottom: 2px;}

.cssbox_body p.missionp {
font-size: 14px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
line-height: 18px;
margin-bottom: 233px;}

.cssbox_body p.visionp {
font-size: 14px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
line-height: 18px;
margin-bottom: 270px;}

.cssbox_body p.staffp {
font-size: 14px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
line-height: 18px;
margin: 0 0 25px 150px;}

.cssbox_body p span.staffname {
color:#6a1920;}

.cssbox_body ul.boxcontentul {
margin-top: 15px;
margin-left: 15px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 14px;
list-style-type: disc;}

.cssbox_body ul.boxcontentul li {
margin-bottom: 5px;}

.cssbox_body table.contacttable {
margin: 10px 0 0 30px;}

.cssbox_body table.contacttable tr td {
font-size: 16px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
padding: 5px 50px 0 0;}

.cssbox_body table.eventstable {
margin: 5px 0 20px 30px;}

.cssbox_body table.eventstable tr td {
font-size: 14px;
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
padding: 5px 50px 0 0;}

.cssbox_body a.sublinks:Link, a.sublinks:Active, a.sublinks:Visited {
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
color: #1ebbce;}

.cssbox_body a.sublinks:Hover {
color: #1ebbce;}

.cssbox_body a.sublinks:Focus {
outline: none;}

.cssbox_body a.sublinksevents:Link, a.sublinksevents:Active, a.sublinksevents:Visited {
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
color: #1ebbce;}

.cssbox_body a.sublinksevents:Hover {
color: #1ebbce;}

.cssbox_body a.sublinksevents:Focus {
outline: none;}

.cssbox_body a.sublinksvision:Link, a.sublinksvision:Active, a.sublinksvision:Visited {
font-family: Helvetica, "Myriad Pro", "Trebuchet MS", sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
color: #1ebbce;}

.cssbox_body a.sublinksvision:Hover {
color: #1ebbce;}

.cssbox_body a.sublinksvision:Focus {
outline: none;}

Excavator
05-10-2009, 11:51 PM
Hello alexmel7,
Your spiffy image is only 921px tall so your content is limited to 921 minus whatever padding you have inside it.

A little photoshop work will fix it. Just crop a hunk out of the middle and paste it back in there to make your image taller.

Here's my example on that method - http://nopeople.com/CSS/slider/index.html

alexmel7
05-11-2009, 11:50 PM
oops...duh. Thanks Excavator!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum