CSS - Borders That Shouldn't Be There?

Hi All,

I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis.

I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows.

Code:

<!-- This is a Row that is at the top of the table -->
<table width="100%"  border="0" class="fullwidth">
  <tr>
    <td class="head">This is a header </td>
  </tr>
</table>

<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%"  border="0" cellpadding="2" cellspacing="1" class="list">
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Here is the CSS:
Code:

table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}

Hi guys,

I am using the following css to style a content box:

Code:

/*---------------- Start of Testimonies Content Box ---------*/
#testimonies {
WIDTH: 175px;
MARGIN: -85px 0px 0px;
POSITION: right;
height: 60px;
float:right;

BORDER-RIGHT: #d9ddb9 1px solid; 
BORDER-LEFT: #d9ddb9 1px solid; 
BORDER-BOTTOM: #d9ddb9 1px solid; 
BORDER-TOP: #d9ddb9 1px solid; 

PADDING-TOP: 10px; 
PADDING-RIGHT: 10px; 
PADDING-BOTTOM: 20px; 
PADDING-LEFT: 10px; FLOAT: right; 

BACKGROUND-IMAGE: url(images/bg-down-right.gif);
BACKGROUND-POSITION: 50% bottom;  
BACKGROUND-REPEAT: repeat-x; 
BACKGROUND-COLOR: #fafceb;
}


.testimonies-h2 {
	PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fafceb
}


#testimonies H2 {
	PADDING-RIGHT: 0px; BACKGROUND-POSITION: 2px 3px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND-IMAGE: url(images/bg-h2.gif); PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; COLOR: #8fa300; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x
}


/*---------------- End of Testimonies Content Box ---------*/

I want to add an inline frame inside the 'testimonies' div in my html but it keeps using the border styling of the css above.

I tried using this to cancel it out (placing my inline frame in a span, but it did nothing)

Code:

#testimonials {
border-left:none;
border-right: none;
border-bottom:none;
border-top:none;
}

HTML CODE:

Code:

<div id="testimonies">
<h2><span class="testimonies-h2">Testimonials</span></h2>

<span class="testimonials">
<!-- ========== V-NewsTicker v2.2 (Freeware)  ============= -->
<script type="text/javascript" src="v_newsticker_1.js"></script>
<!-- ======================= -->
</span>

</div>

Can any one suggest a better CSS script for having a border in IE
So far I have the following:
PHP Code:
 border: 1px solid #0099CC; 




The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool.

Can any one help.
Thge URL is
http://pfwd.org.uk/sfd/update_test3.php

Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this.

So is it possible to have two or more borders in CSS and if so, how?

Hello, I have a list that looks like this

Code:

	<ul>
		<li><a href="#">&nbsp; &nbsp;List item 1</a></li>
		<li><a href="#">&nbsp; &nbsp;List item 2</a></li>
		<li><a href="#">&nbsp; &nbsp;List item 3</a></li>
	</ul>

... and my CSS for the list looks like this

Code:

ul {
margin-left: 0px;
list-style: none;
border: none;
border-top: 1px solid #000000;
}

li {
border-bottom: 1px solid #000000;
}

li a {
text-decoration: none;
border-bottom: 1px solid #000000;
border-left: 14px solid #82817C;
color: #FFFFFF;
background-color: #585752;
}

li a:hover {
text-decoration: none;
border-left: 14px solid #9D9E8E;
border-bottom: 1px solid #000000;
color: #FFFFFF;
background-color: #585752;
}

My problem is that I can't get the borders go the way I want them to.
As you can see, the list items have two borders, a left border and a bottom border. The unorganized list-tag has one border, a top border. In both cases, the top and bottom borders are 1px in height, and the left border is 14 pixels in width.
The ul's top-border is full width, meaning it starts at the left side of the page, while again the li's bottom-border starts AFTER the left-border... ok, that was confusingly explained. What I'm trying to achieve is that the li's left-border is over lapped by it's bottom-border - so that the bottom border looks just like the ul's top-border.

Ok, if you put the code to your editing program and view it "in action" you should be able to see what I mean.

So to summarize it all, how can I force the bottom-border to over lap the left-border?

Thank you in advance,
- Kimppa

hi all,

hoping someone could help me with an issue i'm having in css involving borders (sort of). hopefully this is the appropriate place for this question, as it does involve some html.

i have a page divided into three vertical frames (i know, i know...frames are not ideal. but i would like to keep the page in this format for specific reasons). the border is set to "0" in each frame, but on the left and right frames i use a bit of css code to create a colored border on the right hand side for the left frame, and on the left hand side for the right frame (it creates a kind of vertical outline for the middle frame). hopefully this makes sense. after completely finishing the website and uploading it to my ftp, i found that it works perfectly, except when opened in firefox or navigator. when opened with either of these browsers, the content and most of the design loads fine, but the colored borders in the outer frames are offset from their sides maybe a quarter of an inch. i can't figure out what's causing it, but i know it has something to do with the border code.
as i would like this site to be as compatible as possible with most popular browsers, i'd like to try and fix this somehow. i've posted my code following this message in hopes that someone could offer suggestions. any advice would be greatly appreciated.


frames created in index.htm:
Code:

<frameset cols = "25%, 50%, 25%" border = "0">
<frame name = "side1" src = "blankleft.htm" scrolling = "no">
<frame name = "middle" src = "main.htm">
<frame name = "side2" src = "blankright.htm" scrolling = "no">
</frameset>

colored border for the left frame (side1):
Code:

<style type = "text/css">
body 
{ 
border-left: 0px solid #607046;
border-right: 2px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>

colored border for the right frame (side2):
Code:

<style type = "text/css">
body 
{ 
border-left: 2px solid #607046;
border-right: 0px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>

Hey, searched so don't give me crap.

I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } )

I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
html {
    height: 100%;
    overflow: scroll;
}
body {
    font-family: tahoma, arial, sans-serif;
    font-size: 11px;
    background: #DEDEBA;
    margin: 0px 0px 0px 0px;
    color: #DEDEBA;
}
input, option, select, textarea {
    font-family: verdana, tahoma, arial, sans-serif;
    font-size: 11px;
}
.search {
    margin: 0px;
    padding: 5px 5px 5px 7px;
    width: 366px;
    height: 24px;
    float: right;
}
.input-search {
    width: 259px;
    margin: 0px 5px 0px 0px;
    padding: 5px;
    background: #DEDEBA;
    border-color: #666666;
    float: left;
    text-shadow: 808080;
    color: #808080;
}
</style>
    <script type="text/javascript" src="webfunctions.js"></script>
</head>
<body>

            <div class="search">
     <form action="search.php" method="post" style="display:inline;">
            <div>
<input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" />
<input type="image" src="images/search.gif" /></div>
</form>
</div> 

While styling table I would like to have black row border all the way, but currently cell borders (grey) overlay them (1px, but still) - like in the image:


Bellow is my css. What do I change? Thanks.

Code:

.list_f  {

	padding: 0px;
	margin: 0px;
	
	border-width: 1px;
	border-style: solid;
	border-color: #F1EFE2;
	border-collapse: collapse;
	empty-cells: show;

	border-top: 0px; 
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	
			
}

.list_f th {
	text-decoration:none;
	font-weight:normal;
	background-color:#F3F3F3;
		
	margin: 0px;
	padding: 2px;
	/*	text-align: left;*/
	vertical-align:middle;
	height:22px;

	border-collapse: collapse;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #CCCCCC;
	border-bottom-color: #000000;
	border-left-color: #CCCCCC;
}

.list_f td {
	margin: 0px;
	padding: 2px;
	border-collapse: collapse;
	vertical-align:middle;
	height:22px;
	

	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #EBEBEB;
	border-bottom-color: #000000;
	border-left-color: #EBEBEB;

}
.list_f tr {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
}

Hi

I'm currently testing my code within the firefox browser and have found that no borders appear whatsoever.

I was using the dotted border however changed it to solid to see if that made a difference however this did not help.

The css I use for the <div> is as follows:

Code:

.div_surround {
	width:185px;
	min-height:200px;
	float:left;
	margin-top:5px;
	margin-right:5px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	border:1px;
}

I know a lot of people dont like the width to be specific pixels however unless this makes a difference to my situation, please ignore this for the time being. I am looking to change it in the future.

By the way this code works fine in IE where I see a box with a bottom and left border.

Thanks in advance for any help.

Billabang!

if someone would, check out my testing grounds website... jon.endysis.org

there are 3px #fff double borders going along each side of the layout (you can see them on either side of the space shuttle background) that are supposed to extend all the way down the layout, but only go until the end of the shuttle. I've learned that if I just have html br /'s after the the shuttle part they extend down for those, but for some reason don't extend down for my div class="contentleft" and my div class="contentright".

if anyone wants to check my source, div id="racingstripes" is the layer that has the stripes, and it has ONLY the stripes.

my css is:
#racingstripes{
border-right:3px #fff double;
border-left:3px #fff double;
}

any ideas please? i can't figure it out. thanks for any help!

I have a bit of CSS that wraps a border around an image, it works in IE but not in FF. What am I doing wrong?
Code:

.book_box {	
	width: 95%;
	padding: 10px 5px 5px 5px;
	border: 2px solid white;
	background-color: #eef7ff;
	text-align : left;
	overflow: auto;
}
.book_box_img {
	float: left;
	margin: 5px;
	border: 1px;	
	border-color: #003366;
}

How do i apply visible and formated border to a certain cells without afecting the entire column or row?

Im using the border properties like:

border-buttom-style
border-top-style
border-left-style
border-right-style
border-width
border-color

etc, etc, but when apply the style the colum or the row is affected entirely, this makes my top sliced image (header) with the separators visible. Im new to css and need some help in doing this. Thx

I'd like to have a class in my style sheet that gives a table a 1 px border, something like this:

Quote:
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%">test</td>
</tr>
</table>


But I'm unsure how to do it.

I have this code:

Code:

<html>
<head>
<style type="text/css">

body {
	font-family: arial, helvetica, serif;
	font-size: 100%;
	background: white;
	padding: 2em;
	margin: 0;
}

#content {
	width: 34em;
	background-color: #ffffff;
	padding: 1em 0;
	border: 6px double #6DA9CA;
	margin: auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 32em;
}
html>body #content {
	width: 32em;
} 

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #790;
}

a:active {
	color: red;
}

a:hover {
	text-decoration: underline;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
	
li {
	float: left;
	position: relative;
	width: 10em;
	text-align: left;
	cursor: default;
	background-color: white;
}
	
li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border: solid 1px #6DA9CA;
}

#submenu li ul {
	border: solid 1px #6DA9CA;
}

li>ul {
	top: auto;
	left: auto;
}

#nav a {
	color: black;
}

#nav a {
	text-decoration: none;
}

#nav li li a {
	display: block;
	font-weight: normal;
	color: #060;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	border: 5px solid #6DA9CA;
	border-width: 0 5px;
}
	
li:hover ul, li.over ul{ display: block; }
	
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
</head>
<body>

<ul id="nav">
  <li><a href="">Home</a></li>

  <li><a href="">Guiding Principles</a></li>

  <li>Background & Qualifications</a>
    <ul>
      <li><a href="">Biography</a></li>
      <li><a href="">Dispute Resolution</a></li>
    </ul>
  </li>
	
  <li>Developments
    <ul>
      <li><a href="">International</a></li>
			<li><a href="">Specialty & Agrichemical News & Regulations</a></li>
			<li><a href="">Archive</a></li>
    </ul>
  </li>
	
	<li><a href="">Other Resources</a></li>
</ul>

</body>
</html>

And I like it - but I have one problem - I want there to be lines between each of the <li>s in the submenus - meaning between Biography and Dispute Resolution I want a line - I know there is no border-middle value - so how do I do this?

I'm sure there is a simple solution, but I'm drawing a blank. I'm trying to line up absolute divs but running into an issue where IE includes the border in the width and Netscape appears to tack the borders on - so if I have a div with a width of 100px and a border of 5px, IE diplays 100px, inclusive of the border. Netscape appears to dispay a div with a total width of 110px.

<div align="center" class="box" style="top:49px; left:111px; width:100px; height:100px"><br>Test<br></div>

.box {position:absolute; border: 5px double black; font: 200 9px arial}


Havn't been able to find the property that may control this.

????