Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    95
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Problem with rounded corner css box (Spiffy Box)

    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:

    Code:
     /* 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;}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    95
    Thanks
    7
    Thanked 0 Times in 0 Posts
    oops...duh. Thanks Excavator!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •