2 replies [Last post]
bjnst6
Offline
newbie
Last seen: 17 years 17 weeks ago
Timezone: GMT-5
Joined: 2005-04-21
Posts: 2
Points: 0

Hello there.

I believe this is probably an easy question for those of you who delve into the world of css on a regular basis, but alas...it has me confused.

My basic dilemma is obtaining the look of a 'collapsing border model' between two table cells while still using the 'separated border model' in the rest of the table. I need to have the two table cells COMPLETELY adjacent to each other, whilst having the rest of the cells in the table a bit separated.

Here is my current setup:

HTML:

<table class="standard">
<tr class="banner">
<td colspan="3" style="border-bottom: 1px solid #000000;">
User Profile
</td>
</tr>
<tr>
<td class="label">First Name</td>
<td class="field required">
<html:text name="user_form" %>" property="firstName" size="25" maxlength="50" />
</td>
<td class="field error">&nbsp;
<html:errors property="missing_first_name"/>
</td>
</tr>
<tr>
<td class="label">Last Name</td>
<td class="field required">
<html:text name="user_form" property="lastName" size="25" maxlength="50" />
</td>
<td class="field error">&nbsp;
<html:errors property="missing_last_name" />
</td>
</tr>

<!--many more form fields here-->

<tr>
<td class="field left">
<html:img page="/web/img/required.gif"/> &nbsp;&nbsp;denotes&nbsp;required&nbsp;field
</td>
<td class="field" align="right" colspan="3">
<html:cancel value="Cancel" styleClass="context" />
&nbsp;&nbsp;
<html:reset value="Reset" styleClass="context" />
&nbsp;&nbsp;
<html:submit value="Save" styleClass="context" />
</td>
</tr>
</table>

CSS:

TABLE.standard
{
background: none;
color: none;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
border-spacing: 0px 0px 0px 0px;
}

TR.banner
{
background-color: #800000;
}

TD.label
{
PADDING: 0em .6em .1em .6em;
background-color:#a9a9a9;
color: white;
font: 70%;
font-weight: bold;
text-align:left;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}

TD.field
{
margin: 0em 0em .1em 0em;
padding: .1em .5em .3em .5em;
background-color: #eff0ec;
border-bottom: 1px solid black;
border-right: 1px solid black;
}

TD.required
{
background: url(../img/required.gif) no-repeat 99% 1%;
background-color:#eff0ec;
padding-right:1em;
}

TD.error
{
background-color:#dddddd;
color:#ff3333;
padding-top: .1em;
padding-right: .1em;
padding-left: .1em;
padding-bottom: .1em;
font: 70%;
text-align:left;
}

.right
{
text-align: right;
}
.left
{
text-align: left;
}
.center
{
text-align: center;
}

A.context
{
margin: 0px;
padding: 0px 10px 3px 20px;
FONT-WEIGHT: normal;
FONT-SIZE: 90%;
COLOR: black;
text-decoration:none;
BACKGROUND: url(../img/linkTransparent2.gif) white no-repeat 9px 2px;
border:1px solid black;
}

Okay…now if you display this code you’ll see that there is a distinct space between these two cells:

<td class="field left">
<html:img page="/web/img/required.gif"/> &nbsp;&nbsp;denotes&nbsp;required&nbsp;field
</td>
<td class="field" align="right" colspan="3">
<html:cancel value="Cancel" styleClass="context" />
&nbsp;&nbsp;
<html:reset value="Reset" styleClass="context" />
&nbsp;&nbsp;
<html:submit value="Save" styleClass="context" />
</td>

Which makes sense because they are, indeed, in two separate cells. However, I know that if I use the border-collapse feature I can get them side-by-side with no space. Is there a way that I can do this while still using the 'separated border model'? The closest I can get them is 1 pixel apart using some “border: none;” styles in the two table cells.

Thank you for taking the time to look at this!
bryan

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 14 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

A collapsing look while using the separated border model?

I hate to suggest this but what about a table in table? The inner table can use the collapsed border model for the two cells.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

bjnst6
Offline
newbie
Last seen: 17 years 17 weeks ago
Timezone: GMT-5
Joined: 2005-04-21
Posts: 2
Points: 0

A collapsing look while using the separated border model?

It's funny you should mention that...because that's what I've just done and it does indeed give the desired results. Smile

However, that was kind of a last resort item for me I guess because of the ugliness of nesting tables. I guess I'll stick with it though if it's the only way?

b