CSS - Borders Go Away When Printing Thead

Hello,
I can't for the life of me figure out how to get these thin white borders like on this website:

http://www.viceland.com/index_us.php

Is this done with a style sheet? I can't find any reference to a border. How is this done?

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;}

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?

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>

One thing I've never been able to replicate using CSS that you can do w/ tables is a simple content area with tab, where the border goes just around those areas and there's a set width for the tab but no set width to the area beneath it. I'll try to graphically depict what I mean he
_____________
|************|____________________
|*********************************|
|*********************************|
|*********************************|
|*********************************|
|*********************************|
-------------------------------------------------

Seems simple enough, right? Just imagine that's a solid border and the asterisks are the content area, and I want to create this using only CSS and divs. The tab, say, is fixed at 100px, but the area below is at some percent, say 90% of the page.

The problem ends up being the portion to the right of the tab. I need to create a div there so that the top right border is drawn, which is really the bottom border of that space. I can't simply give the area below a top border because then it would place a border under the tab, and I want the tab to be seamless with the area beneath.

CSS can't figure out what the remaining width of the div to the right of the tab (at least without using the under developed display:table-cell), so I can't specify the width of that div, which means I can't know how far to extend it to reach the right side of the area below.

So, generally, as far as I can tell, the above depiction can't be done without tables. Can anyone find a workaround? Please let me know if I'm not explaining this well enough. Thanks!

Hi I am trying to setup a left border on my tabs here, no matter what combination I try I cannot get a left border exactly like the others without giving the wholebox a full border (dont want this!!) Look at the example below..

Code:

/* TESTING TABBED BROWSERS*/
}
.tabbed-box {
	width: 100%;
	background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;
	/*border: 1px solid #ddd; 
	border-bottom:none;
	border-left:none;
	border-right:none;}
	*/}
	
.tabbed-box .tabs li {
	list-style: none;
	float: left; }
.tabbed-box .tabs li a {
	display: block;
	width: 100px;
	padding: 5px 0;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #888;
	background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;}
.tabbed-box .tabs li:first-child a {
	border-left: 1px solid #ddd; }
	.tabbed-box .tabs li a:hover {
	color: #333; }
.tabbed-box .tabs li a:focus {
	outline: none; }
.tabbed-box .tabs li a.active {
	background: #fff;
	color: #333;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #ddd;
	margin-left: 5px;  }
	
	.tabbed-content {
	padding: 3em 1em 1em 1em;
	display: none; }

Screen Shot Here (not aloud to post URLS) --- >freeimagehosting.net/uploads/4e9d9acdf7.jpg

Any help much appreciated!!

I have a small table that is not displaying borders in IE. On this page

The section with Financial Aid and Parents should have a grey 3px border on the right hand side going from the header image to the person at the bottom. In FF it displays as intended.

HTML

Code:

 <table width="100%" border="0" cellpadding="0" cellspacing="0">
	    <tr>
		  <td id="finaid" class="finaid greybrdr"></td>
		  <td id="parents" class="greybrdr"></td>
		  <td id="students" class="students"></td>
		</tr>
		<tr>
		  <td class="bod finaid greybrdr"></td>
		  <td class="bod greybrdr"></td>
		  <td class="bod students"></td>
		</tr>
		<tr>
		  <td id="finback" class="greybrdr"></td>
		  <td id="parback" class="greybrdr"></td>
		  <td id="studback"></td>

CSS
Code:

.greybrdr {
  border-right: 3px solid #e4e4e4;
}

.finaid {
  border-left: 2px solid white;
}

.students {
  border-right:  5px solid white;
}

.bod {
  width:  183px;
  height:  200px;
  background-color: #FFFFFF;
}

Hi I have built some nav buttons on my site and they looked as I wanted however when i attached links to them a border appeared around the image can someone tell me how to get rid of them please. DYNAMIC WEB DESIGN thankyou in advance.

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>

i want to tell an iframe to fill 100% width, but have a border of 1px

this will cause horizontal scrolling since the width property does not include the border in its calculation.

how can i do this?

I need to have a div element with borders that use background image as border corner background. div must be able to expand in height and width automatically. How can I achieve this?

I have a page and it's a massive mess of nested tables and abs-positioned divs. Amongst these are two that become visible/invisible on the onclick of a checkbox. They start out with display:none inline.

Still with me?

There arent any floating elements in use, and pretty much everything has a width and height specified, so if there's some hasLayout freakyness going on i'd love to know what.

Anyway, in IE7 when you click said checkboxes their target divs and thier contents appear correctly - but the divs' borders are missing, re-toggling the checkbox off and on again shows the border and then again for any subsequent re-showing. it's just the initial setting of display:''

I can't post the code but it looks something ten times freakier than the attatched recreation attempt, unfortunately i can't rectreate it, but you'll get the idea.

Can anyone help? I'm going to try running some javascript after the page has loaded to do a quick double toggle to simulate the first no-border instance!

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?

Basically on this page http://forum.prxa.info/profile.php?info=1&pageno=2

At the bottom the pagination boxes seem to have extra borders around them?

Should look more like http://forum.prxa.info/popular.php with seperate boxes!

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!