...

View Full Version : Resolved CSS table problem !



KenJeKenny
04-05-2009, 07:24 PM
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:


<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:




#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 ! :mad: 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 ! :D :thumbsup: :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum