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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS table problem !

    Hi there people, i've got some annoying lil' problems that i can't seem to get rid off no matter what i try... So i was kinda hoping i could get some help on this one.

    Anyways, i'm creating a website for a friend of mine and designed some contentboxes with a border, round (transparent) edges and a non-repeating background inside of the contentbox... so i decided to put that in a table wrapped in a div.

    Here's what i did.

    Table HTML:
    Code:
    <table class="head">
          <tr>
                <th class="top" colspan="3"> </th>
          </tr>
        
          <tr>
    	     <td class="left"> </td> 
    	     <td class="head_content">
                                
    
                 </td>
     	     <td class="right" > </td>
           </tr>
    
            <tr>
                 <th class="bottom" colspan="3"> </th>
            </tr>
    </table>
    Table CSS:
    Code:
    
    #head {  <-- DIV containing the table -->
    	width: 859px;
    	height: 147px;
    	min-width: 859px;
    	min-height: 147px;
            max-width: 859px;
    	
    	margin-top: 2px;
    	margin-left: 0px;
    	margin-right: 0px;
    	padding: 0px;
    }
    
    table {
    	border: 0px;
    	border-collapse: collapse;
    	padding: 0px;
    	margin: 0px;
    }
    
    table.head { 
    	width: 859px;
    	height: 150px;
    	border: 0px;
    	padding: 0px;
    	margin: 0px;
    }
    
    td.head_content {
    	background-image: url("images/top_bkg.jpg");
    	background-repeat: no-repeat;
    	background-attachment: scroll;
    	background-position: center top;
    	background-color: #000000;
    	height: 130px;
            width: 841px;
    	padding-left: 10px;
    }
    
    td.left {
    	background-image: url("images/left_border.jpg");
    	background-attachment: scroll;
    	background-position: center left;
    	width: 9px;
    }
    
    td.right {
    	background-image: url("images/right_border.jpg");
    	background-attachment: scroll;
    	background-position: center right;
    	width: 9px;
    }
    
    th.top { 
    	background-image: url("images/top_border.png");
    	background-repeat: no-repeat;
    	background-attachment: scroll;
    	background-position: center bottom;
    	width: 859px;
    	height: 9px;
    }
    
    th.bottom { 
    	background-image: url("images/bottom_border.png");
    	background-repeat: no-repeat;
    	background-attachment: scroll;
    	background-position: center top;
    	width: 859px;
    	height: 9px;
    }
    Now my problem is that first of all the side cells, the left and right, won't stay the right size, i set them to 9px, but everytime they expand to 11px which causes the background image to show where its not supposed to..

    Same thing for the head_content cell, its set to 841px but shrinks to 837px...

    and internet explorer the problem is a bit less, but still there!

    Also, another problem with this table, is that if the sentences inside the head_content cell get to long, the table expands ! in IE however, it doesnt..

    So, my qeustion is.. how do i make the side cells stay their defined width.. and how do i make the head_content cell NOT expand when sentences get to long...

    oh and i already validated my css... so it's not a typo or anything...



    Anyways, ANY help is very very VERY appreciated !
    Last edited by KenJeKenny; 04-05-2009 at 10:27 PM. Reason: resolved


 

Posting Permissions

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