CSS - Question About Borders

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!

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

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!

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!

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 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 am learning CSS and wish to put a border around selected tables using the following code:

table.sidebar
{
border: 2px black;
padding: 50px

}


Something similar to this code was working OK earlier today, but now it won't. The cell padding command works, but other tags like border, width, etc., are not. I have tried disabling all other table styles in the CSS.

Any ideas? I am using MS FrontPage 2002. Also, whys is it that when I apply a style to a table, like the one above, FrontPage puts in the following HTML code:

<table class="sidebar" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">

If I go to remove it to
<table class="sidebar">
all of the formatting is lost. Seems like this is defeating the whole purpose of CSS

Thanks,

Keith

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

I have a site that uses many tables to display lists of data. I would like to use CSS to clean up these tables. In particular I want to put round corners around each table as a border. The tables vary in width and height so how can 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.

????

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

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

Hi Guys,

Beat with me because ive just started using CSS for positioning etc and im giving it a whirl before I try it for a live project.

I have an annoying problem though which I cannot seem to solve whereby the border doesn't show fully in IE but in Mozilla it does?

I tried vary the code a bit in the CSS and I would either lose the top border, bottom border or both...? Bizarre.

Here is the code it is very simple and you can see where I am going with it.

I appreciate the help. Thanks!

<style>

body{
background-color: white;
color: #0083D7;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper{
width: 770px;
color: white;
margin: 10px auto;
text-align: left;
color: #666666;
}

#logo{
height: 70px;
}

/**
* Top Navigation Under Logo.
**/

#nav{
margin: 0;
padding: 0;
}

#nav ul{
padding: 0;
margin: 0;
}

#nav ul li{
display: inline;
padding: 0;
margin: 0;
}

#nav ul li a{
font-size: 90%;
color: #0083D7;
font-weight: bold;
text-decoration: none;
text-align: left;
border: 1px solid #0083D7;
padding: 4px;
line-height: 25px;
}

#nav ul li a:hover, #nav ul li a:focus{
background-color: #0083D7;
color: #FFEF00;
}

</style>

</head>

<body>

<div id="wrapper">

<div id="logo"></div>

<div id="nav">
<ul>
<li><a href="#">Holidays</a></li>
<li><a href="#">Flights</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">Ski</a></li>
<li><a href="#">Cruise</a></li>
<li><a href="#">Holiday Insurance</a></li>
<li><a href="#">Travel Guides</a></li>
</ul>
</div>

</div>

</body>

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