CSS - How Do You Add In A Text In A Table's Border?

Hello,

I'm using css to display a list using a unordered list. I want to put a border around the whole thing and I want to have some text that sits on top of the border (and indented a little).

Can someone tell me how I could do this without making a specific absolute position style to do it?

This is a mockup of what I'm trying to do - Where you see "i want text here" is where I want to put text:



This is the css I have for the box so far:

Code:

#main_content ul.cfcheader {
	border-style:solid;
	border-width:12px;
	border-color:#d9e7f2;
}

#main_content ul.cfcheader li {
	position: relative;
	list-style: none;
	width: 548px;
	padding-left: 48px;
	text-align: left;
	margin-bottom: 20px;
}

I'm a wicked css noob so any help you could give would be helpful!1

TIA!

with border: 1px solid #FFFFFF; in css
i got border only around the table
I want the border to surround every cell of the table
as it is with
<table border="1" bordercolor="#FFFFFF" >

how?

Hello:
I am building a ecommerce site, there are featured product on frontpage, I want to make a square border for each product, I have done top border and bottom border, but I don't know how to make the vertical lines on the right and left to make a nice square border with rounded corner

the html structure is as followings
table-----for the top border
table-----to display product image and price, all that
table-----for the bottom border

I know by putting in css code for the middle table will be able to close this border

could anyone tell me how?

just getting into the css world for real, and im using it for the borders of a table:
border:1px solid #000000;
except this only does the outside border of the table, and not the borders for the rows/columns
do i need to have another .cell in my css to get each one to work?

Hi,
I am having problem with the following table.
It displays red border (#ff0000) around table in Internet explorer.
In Firefox red border does not show at all. It is just #ccc.
What can I do to have red border displayed in Firefox too?

Code:

<table class="maintable">
<tr>
<th scope="col" nowrap>City</th>
<th scope="col">State</th>
<th scope="col">Zipcode</th>
</tr>

<tr><td align="center">London</td>
<td>England</td>
<td>12345</td>
</tr>

<tr><td align="center">Berlin</td>
<td>Germany</td>
<td>6789</td>
</tr>
</table>


.maintable {
line-height: 2.5em;

border: 1px solid #ff0000;
border-collapse: collapse;
}

.maintable th, .maintable td { padding: 0 5px; }

.maintable th {
border: 1px solid #ccc;
}

.maintable td {
border: 1px solid #ccc;
}

Thank you

I am having two problems with my tables right now:

Within the style sheet, I have the following:

table {
border: thin #0000CC;
}

If I am not mistaken, this should make all tables that have a border of 1 or greater to automatically be thin and blue.

This is not working...

Why not?

D

Hi all,

I have a div relatively positioned & floated left in a wrapper, with a php-generated list inside. css for the column:

#leftcolumn {
width:200px;
position:relative;
float:left;
background:#F0F0F0;
border:solid 1px #CCC;
padding:2px;
margin-top:10px;
overflow: none;
}

and for the list:

ul.list {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000;
font-size:11px;
}

and lastly, the html/php:

<div id="leftcolumn">
<? echo "$db_list"; ?>
</div>

the problem: the list text is overrunning the right border of the div in safari and firefox. (i'm running the app locally on a mac so i can't test in IE, but that probably works). how come the list is not wrapping? it's like the text of the list is sitting on top of the containing div, or something.

anyone? bueller?

Hi. This is template I copied just for fun in joomla http://www.worldoffashion.info/test/. I wonder how to move text from border as you can see in gray boxes text is near border. I tried padding but then it makes whole box larger

For some reason the bottom border on my text in SPAN.standard_field_type_info works fine in firefox but on IE7 (I don't have IE6 anymore to test) it is not shown. I am pretty sure it is a margin/padding thing hiding the border but I can't remember how to fix it.

Anyone got the rather simple solution? Cheers.

PHP Code:
 DIV.standard_field_container {
width: 98%;
padding: 0.4em;
border: 1px solid #8B8B8B;
background-color: #E2E2E2;
overflow: hidden;
}

DIV.standard_field_left {
width: 10em;
float: left;
margin-right: 1.5em;
font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
}

DIV.standard_field_right {
font: normal 0.8em Verdana, Arial, Helvetica, sans-serif;
}

SPAN.standard_field_type_info {
font-weight: normal;
color: #ff0000;
border-bottom: 1px dashed #ff0000;
cursor: help;
} 

When I allow scripts and active x to run in IE I get a dotted border around each letter of hyperlinked text.

It looks fine in other browsers and also in IE if I block scripts.
Does anybody have any ideas how to fix this or if it really is a CSS problem?

Thanks

Hi there, Everyone:

Firstly, I am a CSS noob...

My site is:

wwwDOTincenseforpeaceDOTcom

(change the word DOT to a . please, new users are not allowed to post URLs on this forum. Thanks)

I have a red background gif on my site. In firefox, it looks great. It DOESN'T show through the cell borders of the main table.

However, it is showing through the cell borders of a table in Internet Explorer (at least IE 8, haven't checked with earlier versions of IE).

Any idea on how to get it to stop showing through on IE?

This is what I THINK is the main table CSS (I told you I am a noob when it comes to CSS).

#content-container{
clear:both;
width:100%;
border-style:solid;
border-color:#666666;
border-spacing:0;
border-width:0 0; /* was border-width:1px 0; before */
padding:0 0 0 0;
margin:0;
/* ie6 min-height hack */
height:270px;
max-height:270px !important;

Thanks in advance.

Hi All,

I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas?

I have a problem with applying a style for tableborders that is needed at the client I work at.

The client works with IE6 / IE7 only.

In a portlet (JSF) content is loaded into a table that is automatically generated on the basis of CSS.

The "house-style" in this company for using tables is set to the following:

- The outer borders for the table are not visible
- The border under the top-row is orange (#F60)
- The borders under all other rows are grey (#808080)
- The vertical borders are all orange (#F60)

An example of what I mean is seen here (sketch from MS paint, poor quality and wrong colors!!!) :

URL

Anyone with suggestions on how to tackle this?

I have found one solution that seems to work, but as soon as I change it (size, nr of rows etc) the right border shows again. I do not fully understand the code and there are no comments added. See below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Table with css</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
html,body{text-align:center;} 

* {margin:0;padding:0;} 

html{font-size: 75%;} 

body{background:#ccccff;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;} 

.tbla caption,.tbla,.tbla th,.tbla td{ 
border-color:#0099cc; 
border-style:solid; 
font-size:1em; 
} 
.tbla{border-collapse:collapse;} 

.tbla th,.tbla td{padding:.5em;} 

.tbla caption{background:#9999ff;border-width:1px 1px 0 1px;font-weight:600;padding-top:.7em;padding-bottom:.3em;} 

.tbla th{text-align:center;font-weight:600;font-style:italic;} 

.tbla{border-width:1px 0 1px 1px;width:100%;} 
.tbla td{border-width:1px 1px 0 0;font-style:normal;} 
.tbla th{border-width:0px 1px 0 0;color:#000000;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;} 

.tbla col{width:33.3%;} 
.tbla .a{background:#ffccff;text-align:right;} 
.tbla .b{background:#99ccff;text-align:left;} 
.tbla .c{background:#ccffff;text-align:center;color:#ff0000;font-family:"Comic Sans MS", sans-serif;} 

head+body .tbla tr td {background:#ffccff;text-align:right;} 
head+body .tbla tr td + td {background:#99ccff;text-align:left;} 
head+body .tbla tr td + td + td {background:#ccffff;text-align:center;color:#ff0000;font-family: "Comic Sans MS", Geneva, sans-serif;} 

.x{width:64em;margin:1em auto;} 

.tbla th:first-letter {color:#fe7807;} 
.tbla th{text-transform:capitalize;} 

</style> 
</head> 
<body> 

<div class="x"> 

<table cellspacing="0" summary="aa" class="tbla"> 
<caption>table</caption> 
<col class="a" /><col class="b" /><col class="c" /> 
<thead> 
<tr> 
<th>one</th> 
<th>two</th> 
<th>three</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one x</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
  <td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>FF needs a Div to center ?</td> 
<td>it detaches the </td> 
<td>caption ?</td> 
</tr> 
</tbody> 
</table> 

</div> 

</body> 
</html>

using css i've got a table in a div: e.g.

div
padding: 20px

table
width: 540px
border: 10px solid red;

result: the div including it's own padding should be 600px wide but using the html strict dtd ie is in strict mode (confirmed by other measurements) the whole width of the table is 540px including the borders. also setting box-sizing to contents . thoughts?

Hello,
I got a website with a table on it. This is how it looks in firefox 2.0:
http://img139.imageshack.us/img139/9822/helpffkr6.jpg
And here's how it looks in IE6:
http://img111.imageshack.us/img111/9675/helpiehi7.jpg
As you can see, where FF do display the table border, IE does not.

Here's the simplified table code and the related css code:
Table ->
Code:

<table class="listings" style="width: 100%;">
<tr>
   <td colspan="2" class="darkRow">Category 1</td>
</tr>
<tr>
   <td style="width: 30%" class="lightRow">Thread 1</td>
   <td style="width: 70%" class="lightRow">This is thread number 1.</td>
</tr>
<tr>
   <td style="width: 30%" class="lightRow">Thread 2</td>
   <td style="width: 70%" class="lightRow">This is thread number 2.</td>
</tr>
</table>

CSS code -> Code:

<style type="text/css">
table.listings{
	border-collapse: collapse;
	border-style: none;
}
table.listings tr{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
	vertical-align: top;
}
.darkRow{
	background-color: #4D3D4D;
	border-color: #4D3D4D;
	color: white;
	padding-left: 4px
}
.lightRow{
	background-color: #BFACBF;
	border-color: #4D3D4D;
	color: #4D3D4D;
	padding-left: 4px;
}
</style>

It seems as if IE doesnt support borders around a whole row, because when i add this:
Code:

table.listings td{
	border-style: solid;
	border-color: #4D3D4D;
	border-width: 1px;
	vertical-align: top;
}

With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention.

Does anybody have an idea what i can do about this?

thanks in advance.