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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Rounded Corner box does not show up

    I am trying to add a rounded expandable text box. I am using dreamweaver and the box shows up in the design area, but when I view it in firefox, only the text shows up.

    Code:
    HTML
    
    
    <div>
      <b class="contentboxes">
      <b class="contentboxes1"><b></b></b>
      <b class="contentboxes2"><b></b></b>
      <b class="contentboxes3"></b>
      <b class="contentboxes4"></b>
      <b class="contentboxes5"></b></b>
    
      <div class="contentboxesfg">
      <p> jdfjsjfsdjfs</p>   
      </div>
    
      <b class="contentboxes">
      <b class="contentboxes5"></b>
      <b class="contentboxes4"></b>
      <b class="contentboxes3"></b>
      <b class="contentboxes2"><b></b></b>
      <b class="contentboxes1"><b></b></b></b>
    </div>
    
    
    CSS
    
    
    
    
    <style type="text/css">
    .contentboxes{display:block}
    .contentboxes *{
      display:block;
      height:1px;
      overflow:hidden;
      font-size:.01em;
      background:#2A2A2A}
    .contentboxes1{
      margin-left:3px;
      margin-right:3px;
      padding-left:1px;
      padding-right:1px;
      border-left:1px solid #a3a3a3;
      border-right:1px solid #a3a3a3;
      background:#5f5f5f}
    .contentboxes2{
      margin-left:1px;
      margin-right:1px;
      padding-right:1px;
      padding-left:1px;
      border-left:1px solid #e9e9e9;
      border-right:1px solid #e9e9e9;
      background:#525252}
    .contentboxes3{
      margin-left:1px;
      margin-right:1px;
      border-left:1px solid #525252;
      border-right:1px solid #525252;}
    .contentboxes4{
      border-left:1px solid #a3a3a3;
      border-right:1px solid #a3a3a3}
    .contentboxes5{
      border-left:1px solid #5f5f5f;
      border-right:1px solid #5f5f5f}
    .contentboxesfg{
      background:#2A2A2A}
    </style>

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Do you have a Live link?

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    try this...


    CSS
    Code:
    .containercolour { position: relative; background: #DDDDFF; margin: 0px 5px; } /* BACKGROUND OF ROUNDED BOX */
    .rtopcolour, .rbottomcolour { display: block; background:#FFFFFF; } /* OUTTER EDGE COLOUR */
    .rtopcolour *, .rbottomcolour *{ display: block; height: 1px; overflow: hidden; background: #DDDDFF; } /* BACKGROUND OF ROUNDED BOX */
    
    .r1{ margin: 0px 5px; line-height: 1px; }
    .r2{ margin: 0px 3px; line-height: 1px; }
    .r3{ margin: 0px 2px; line-height: 1px; }
    .r4{ margin: 0px 1px; line-height: 1px; }
    HTML
    Code:
    <div class="containercolour">
    <div class="rtopcolour"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
    your text here
    <div class="rbottomcolour"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
    </div>

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    It turns out that the issue I was running into was that there wasn't a } after one part of my code. Thanks for the help though.




    Quote Originally Posted by jasonpc1 View Post
    try this...


    CSS
    Code:
    .containercolour { position: relative; background: #DDDDFF; margin: 0px 5px; } /* BACKGROUND OF ROUNDED BOX */
    .rtopcolour, .rbottomcolour { display: block; background:#FFFFFF; } /* OUTTER EDGE COLOUR */
    .rtopcolour *, .rbottomcolour *{ display: block; height: 1px; overflow: hidden; background: #DDDDFF; } /* BACKGROUND OF ROUNDED BOX */
    
    .r1{ margin: 0px 5px; line-height: 1px; }
    .r2{ margin: 0px 3px; line-height: 1px; }
    .r3{ margin: 0px 2px; line-height: 1px; }
    .r4{ margin: 0px 1px; line-height: 1px; }
    HTML
    Code:
    <div class="containercolour">
    <div class="rtopcolour"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
    your text here
    <div class="rbottomcolour"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
    </div>

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by conphill View Post
    It turns out that the issue I was running into was that there wasn't a } after one part of my code. Thanks for the help though.
    Hello conphill,
    There is an easy way to find small errors like that. Have a look at the links about validation in my signature line.
    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


  •  

    Posting Permissions

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