PDA

View Full Version : Hide Div Border



WindInFace
Feb 8th, 2010, 06:08 PM
Hi,

How do I hide a div border?

I've tried border:none, border-style:none, and setting border-color to the same as the background.

I want to use it for a left navigation pane, so I'm also using float:left.

Thanks.

Excavator
Feb 8th, 2010, 06:15 PM
Good morning WindInFace,
At least 2 of those should work... maybe your not putting that on the right div?
Hard to say what's going on without getting a look at it.

WindInFace
Feb 8th, 2010, 07:01 PM
Hi Excavator,

I made this example that still shows the issue.

If you do an find on Excavator you'll see my comments describing the issues.



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
<head>
<title>
Example
</title>

<style type="text/css">
.main{
background-color:#F2F5A9;
color: black;
}
.borderless {
border-collapse:collapse;
}
.column1 {
text-align:right;
height:25px;
padding-left:2em;
}
.column2 {
padding-left:15px;
text-align:right;
height:25px;
}
.column3 {
text-align:left;
height:25px;
width:25em;
}
.input {
background-color=#FFFFFF;
}
.tr0 {
background-color:#CECEF6;
}
.tr1 {
background-color:#F6CEE3;
}
.outerDiv1 {
text-align:center;
padding: 0 20% 0 20%;
margin: 0 0 0 0;
}
.readonly {
background-color=#BDBDBD;
}

</style>
<script type="text/javascript">

function kH(e) {
var pK = e ? e.which : window.event.keyCode;
return pK != 13;
}
document.onkeypress = kH;
if (document.layers) document.captureEvents(Event.KEYPRESS);
</script>
</head>


<body class="main">
<form type="Form">
<div style="width:60%;padding-left:50%;text-align:center;">
<br />
<h1>Example</h1>
<hr>
<div id="edit01">
<strong><font size="+1" color="red">*</font>&nbsp;Required Fields</strong>
</div>
</div>

<!--
Excavator
need
navigation div
background-color to match the height of
div id="workerArea".getRowMod

The height of workerArea will change depending
on the number of tr tags generated.
-->
<div id="navigation" style="float:left;width:15%;padding-left:10%;background-color:#cccccc;height:100%;">
<p onclick="showFields(3);">
Create Worker
</p>
<p onclick="showFields(2);">
Change Worker
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

<!--
Excavator
need
no border
between these
two divs
-->

<div id="workerArea" style="width=85%;border-color:#cccccc;">
<table class="borderless">
<tr class="tr1">
<td class="column1">
<label for="emp_id">Employee ID Number (EIN): </label>
</td>
<td class="column2">
<div id="edit02">
<strong><font size="+1" color="red">*</font></strong>
</div>
</td>
<td class="column3">
<input
class="input"
type="ValidationTextBox"
invalidMessage="Please enter 7-digit Employee Id<br />using numbers only"
promptMessage="Please enter 7-digit Employee Id<br />using numbers only"
regExp="^\d{7}$"
name="emp_id"
id="emp_id"
size="9"
maxlength="9"
required="true"
value=""
>
</td>
</tr>
<tr class="tr0">
<td class="column1">
<label for="racf">RACF ID: </label>
</td>
<td class="column2"></td>
<td class="column3">
<input
class="input"
displayedValue=""
name="racf"
id="racf"
type="ValidationTextBox"
invalidMessage="Please enter RACF ID<br />using letter letters and numbers only"
promptMessage="Please enter RACF ID<br />using letter letters and numbers only"
regExp="[A-Za-z0-9]+"
trim="true"
required="false"
size="8"
maxlength="8"
>
</td>
</tr>
<tr class="tr1">
<td class="column1">
<label for="first_name">First Name: </label>
</td>
<td class="column2">
<div id="edit03">
<strong><font size="+1" color="red">*</font></strong>
</div>
</td>
<td class="column3">
<input
class="input"
displayedValue=""
name="first_name"
id="first_name"
type="ValidationTextBox"
invalidMessage="Please enter First Name<br />using letters only"
promptMessage="Please enter First Name<br />using letters only"
regExp="[A-Za-z]+"
trim="true"
required="true"
size="25"
maxlength="25"
>
</td>
</tr>
<tr class="tr0">
<td class="column1">
<label for="last_name">Last Name: </label>
</td>
<td class="column2">
<div id="edit04">
<strong><font size="+1" color="red">*</font></strong>
</div>
</td>
<td class="column3">
<input
class="input"
displayedValue=""
name="last_name"
id="last_name"
type="ValidationTextBox"
invalidMessage="Please enter Last Name<br />using letters only"
promptMessage="Please enter Last Name<br />using letters only"
regExp="[A-Za-z]+"
trim="true"
required="true"
size="40"
maxlength="40"
>
</td>
</tr>
<tr id="edit05" class="tr1">
<td class="column1">
<label for="phone_nbr1">Work Phone Number (direct): </label>
</td>
<td class="column2"><strong><font size="+1" color="red">*</font></strong></td>
<td class="column3">
<input
class="input"
style="width:3.5em;"
displayedValue=""
name="phone_nbr1"
id="phone_nbr1"
type="ValidationTextBox"
invalidMessage="Please enter area code <br /> using numbers only"
promptMessage="Please enter area code <br /> using numbers only"
regExp="^\d{3}$"
trim="true"
required="true"
size="3"
maxlength="3"
onKeyPress="autoTabPhone(this.id,'phone_nbr2')"
>
-
<input
class="input"
style="width:3.5em;"
displayedValue=""
name="phone_nbr2"
id="phone_nbr2"
type="ValidationTextBox"
invalidMessage="Please enter phone prefix <br /> using numbers only"
promptMessage="Please enter phone prefix <br /> using numbers only"
regExp="^\d{3}$"
trim="true"
required="true"
size="3px"
maxlength="3"
onKeyPress="autoTabPhone(this.id,'phone_nbr3')"
>
-
<input
class="input"
style="width:4em;"
displayedValue=""
name="phone_nbr3"
id="phone_nbr3"
type="ValidationTextBox"
invalidMessage="Please enter phone suffix <br /> using numbers only"
promptMessage="Please enter phone suffix <br /> using numbers only"
regExp="^\d{4}$"
trim="true"
required="true"
maxlength="4"
onKeyPress="autoTabPhone(this.id,'phone_ext')"
>
ext.
<input
class="input"
style="width:4em;"
displayedValue=""
name="phone_ext"
id="phone_ext"
type="ValidationTextBox"
invalidMessage="Please enter phone extension <br /> using numbers only"
promptMessage="Please enter phone extension <br /> using numbers only"
regExp="^\d{4}$"
trim="true"
required="false"
size="4"
maxlength="4"
onKeyPress="autoTabPhone(this.id,'fax_nbr1')"
>
</td>
</tr>
<tr id="edit06" class="tr0">
<td class="column1">
<label for="fax_nbr1">Work Fax Number: </label>
</td>
<td class="column2"><strong><font size="+1" color="red">*</font></strong></td>
<td class="column3">
<input
class="input"
style="width:3.5em;"
displayedValue=""
name="fax_nbr1"
id="fax_nbr1"
type="ValidationTextBox"
invalidMessage="Please enter area code <br /> using numbers only"
promptMessage="Please enter area code <br /> using numbers only"
regExp="^\d{3}$"
trim="true"
required="true"
size="3"
maxlength="3"
onKeyPress="autoTabPhone(this.id,'fax_nbr2')"
>
-
<input
class="input"
style="width:3.5em;"
displayedValue=""
name="fax_nbr2"
id="fax_nbr2"
type="ValidationTextBox"
invalidMessage="Please enter fax prefix <br /> using numbers only"
promptMessage="Please enter fax prefix <br /> using numbers only"
regExp="^\d{3}$"
trim="true"
required="true"
size="3px"
maxlength="3"
onKeyPress="autoTabPhone(this.id,'fax_nbr3')"

>
-
<input
class="input"
style="width:4em;"
displayedValue=""
name="fax_nbr3"
id="fax_nbr3"
type="ValidationTextBox"
invalidMessage="Please enter fax suffix <br /> using numbers only"
promptMessage="Please enter fax suffix <br /> using numbers only"
regExp="^\d{4}$"
trim="true"
required="true"
maxlength="4"
onKeyPress="autoTabPhone(this.id,'cell_nbr1')"
>
</td>
</tr>
<tr id="edit07" class="tr1">
<td class="column1">
<label for="cell_nbr1">Cell Phone Number: </label>
</td>
<td class="column2"></td>
<td class="column3">
<input
class="input"
style="width:3.5em;"
displayedValue=""
name="cell_nbr1"
id="cell_nbr1"
type="ValidationTextBox"
invalidMessage="Please enter area code <br /> using numbers only"
promptMessage="Please enter area code <br /> using numbers only"
regExp="^\d{3}$"
trim="true"
required="false"
onChange="setPhoneRequired('cell_nbr')"
size="3"
maxLength="3"
onKeyPress="autoTabPhone(this.id,'cell_nbr2')"
>
-
<input
class="input"
style="width:3.5em;"
displayedValue=""
name="cell_nbr2"
id="cell_nbr2"
type="ValidationTextBox"
invalidMessage="Please enter cell prefix <br /> using numbers only"
promptMessage="Please enter cell prefix <br /> using numbers only"
regExp="^\d{3}$"
trim="true"
required="false"
onChange="setPhoneRequired('cell_nbr')"
size="3px"
maxlength="3"
onKeyPress="autoTabPhone(this.id,'cell_nbr3')"
>
-
<input
class="input"
style="width:4em;"
displayedValue=""
name="cell_nbr3"
id="cell_nbr3"
type="ValidationTextBox"
invalidMessage="Please enter cell suffix <br /> using numbers only"
promptMessage="Please enter cell suffix <br /> using numbers only"
regExp="^\d{4}$"
trim="true"
required="false"
onChange="setPhoneRequired('cell_nbr')"
maxlength="4"
onKeyPress="autoTabPhone(this.id,'email_address')"
>
</td>
</tr>
<tr id="edit08" class="tr0">
<td class="column1">
<label for="email_address">E-Mail Address: </label>
</td>
<td class="column2"><strong><font size="+1" color="red">*</font></strong></td>
<td class="column3">
<input
class="input"
displayedValue=""
name="email_address"
id="email_address"
type="ValidationTextBox"
invalidMessage="Please enter E-Mail Address"
promptMessage="Please enter E-Mail Address"
regExp="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"
trim="true"
required="true"
size="40"
maxlength="40"
>
</td>
</tr>
</table>
</div>
</form>

</body>
</html>



Thanks.

abduraooft
Feb 8th, 2010, 07:23 PM
I don't see any border between those two divs.

WindInFace
Feb 8th, 2010, 07:42 PM
Can you see it in the uploaded image?

Excavator
Feb 8th, 2010, 07:59 PM
I checked that in FF3.6, IE8 and IE7 and there is no border.

I made a few changes that will allow the left column to be the same height as the right... see the bits highlighted in red -

<style type="text/css">
.main{
background-color:#F2F5A9;
color: black;
}
#workerArea {background: #ccc;}
.borderless {
border-collapse:collapse;
}
.column1 {
text-align:right;
height:25px;
padding-left:2em;
}
.column2 {
padding-left:15px;
text-align:right;
height:25px;
}
.column3 {
text-align:left;
height:25px;
width:25em;
}
.input {
background-color=#FFFFFF;
}
.tr0 {
background-color:#CECEF6;
}
.tr1 {
background-color:#F6CEE3;
}
.outerDiv1 {
text-align:center;
padding: 0 20% 0 20%;
margin: 0 0 0 0;
}
.readonly {
background-color=#BDBDBD;
}

</style>
<script type="text/javascript">

function kH(e) {
var pK = e ? e.which : window.event.keyCode;
return pK != 13;
}
document.onkeypress = kH;
if (document.layers) document.captureEvents(Event.KEYPRESS);
</script>
</head>


<body class="main">
<form type="Form">
<div style="width:60%;padding-left:50%;text-align:center;">
<br />
<h1>Example</h1>
<hr>
<div id="edit01">
<strong><font size="+1" color="red">*</font>&nbsp;Required Fields</strong>
</div>
</div>

<!--
Excavator
need
navigation div
background-color to match the height of
div id="workerArea".getRowMod

The height of workerArea will change depending
on the number of tr tags generated.
-->
<div id="navigation" style="float:left;width:15%;padding-left:10%;background-color:#cccccc;height:100%;">
<p onclick="showFields(3);">
Create Worker
</p>
<p onclick="showFields(2);">
Change Worker
</p>
<!--end navigation--></div>

<!--
Excavator
need
no border
between these
two divs
-->

<div id="workerArea">
<table class="borderless">
<tr class="tr1">
<td class="column1">
<label for="emp_id">Employee ID Number (EIN): </label>

abduraooft
Feb 8th, 2010, 08:00 PM
Lol, so you are viewing it in IE6!
It looks like famous the 3-pixel bug (http://www.positioniseverything.net/explorer/threepxtest.html).
Try
* html #navigation {
margin-right: -3px;
}

WindInFace
Feb 8th, 2010, 08:10 PM
Everyone's suggestion works.

Yes it is IE6.

Thanks.

WindInFace
Feb 8th, 2010, 08:46 PM
Excavator's changes created a new issue: The area to the right of <div id="workerArea"> is the same background color as the area to the left.

Could it be the same color as the body and still have the background height on the left side remain the same?

In other words, the Create and Change height column remains the same, but the unused column on the right is the same background as the body.

See attached image for reference.

Excavator
Feb 8th, 2010, 09:04 PM
Excavator's changes created a new issue: The area to the right of <div id="workerArea"> is the same background color as the area to the left.

Could it be the same color as the body and still have the background height on the left side remain the same?


Since we didn't give it a width it's as wide as it's parent.
To fix that, either put a containing div around the whole site so you have a width to constrain #workerArea
or try this -

#workerArea {
background: #ccc;
width: 920px;
}