CSS - Table Align Issue

Is it not possible to do the following? What is the correct way of aligning a cell if not?

PHP Code:
 TD.theader {
    background-color: #D0D0D0;
    border: 1px solid #000000;
    padding:5px;
    horizontal-align: right;
} 

I'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work.

For example, this does not work:
Code:

td.centercell {
  text-align: center;
}

<table>
  <tr>
    <td class="centercell">Hi!</td>
  <tr>
</table>

But this does:
Code:

<table>
  <tr>
    <td style="text-align:center;">Hi!</td>
  <tr>
</table>

I'd rather not have to put inline styles on every single cell I need centered, as this is most of them.

What's going on?

What is the equivalent of <table align="center"> in CSS. I'm moving my page from HTML 4.01 to XHTML 1.0 and the ALIGN attribute of TABLE is not supported in XHTML 1.0.

Any help is greatly appreciated.

how do i center align table on page with CSS?

I have a css layout I'm working, that is all divs (my first time doing this without tables).

My page consists of all divs, and then the body is a table for displaying date from a database.

My problem is that I have the footer positioned absolutely at the bottom of the page, which is what I want, EXCEPT when the table extends longer and the user needs to scroll down.

If the table does not extend the full height of the screen, then I want the footer at the bottom of the screen, but if the table extends past the bottom of the screen, I need to footer to be at the end of the table.

I hope that makes sense.

CSS Tags -- Just a portion of them:

Code:

body {
  margin: 0px 0px 0px 0px;
  background-color: #E7F1FD;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  height: 100%;
}
/*This is the main body of the page and contains the db data*/
#pwdb_body {  
  background-color: #E7F1FD;
  border: 2px solid #FFF;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 165px;
}
/*Footer */
#left_footer {
  background-image:url(images/bar_header2.jpg);
  width:100%;
  height:36px;
  position:absolute;
  bottom: 0px;
}

My DIVS (partial):

Code:

<!-- START BODY -->
<div id="pwdb_body">
<table width=100% border=1 name="main_body" bordercolor="#000000" style="border-collapse: collapse;" cellspacing=0 cellpadding=1>
<tr>
  <td>...table data...</td>
</tr>
</table>
</div>
<div id="left_footer"><img src="images/index_02.gif"/></div>

I have attached a screenshot of what I'm talking about. The footer bar is highlighted in a red box, and the table bottom is pointed out by a red arrow.

Hi all,
We have a table layout we're experiencing some issues with on users that have smaller screens. Below is a simple 1 row example of elements contained in our div tables

Code:

<div class="tracks-result-page" style="">
  <div class="track-element">
      <input class="track-select-checkbox" type="checkbox"><h4 class="track-name">Track</h4><span class="created-date">23-Jul-2008 17:13</span><span class="duration">47m</span><a href="#" class="view-button">view</a><a href="/viewtrack" class="edit-button">edit</a><a href="#" class="details-button">show details</a><input value="d5f173a2-b35e-4489-b468-33a05b1e4997" class="track-id" type="hidden">
  </div>
  <div class="track-element">
  ....more elements
  </div>
</div>

Basically, I have 800 px to fit this data in from our site template. What's happening is on smaller resolutions, the 3 anchor tags aren't fitting in 800 px due to large font size vs table width, and the anchor elements are wrapping around. I have a lot of white space after the description, and currently have a fixed width on that div. What I need is to right align everything from the "created-date" class to the end of the element, then left align the "track-select-checkbox" and the "track-name" elements. I'm having a really tough time doing this for some reason. I can't use "float:right;" on the elements that need right aligned. If I do, they all appear in reverse order! Any help would be greatly appreciated.

thanks,
Todd

Please see here http://www.challengeyourdiet.com/te...etail.php?id=13

If you look at the table, you will see one of the borders toward the bottom of it slightly breaking. I cannot figure out for nothing what is causing this. Any ideas?

Also, a different issue, if you shrink your browser and then scroll to the right you will see the text and things out of place. Is this a min-width issue?

Thanks!

I use

Code:

.list_table {
	border: 1px solid #BDC2C6;
	border-collapse:collapse;
}
.list_table tr{
	border: 1px solid #BDC2C6;
	border-collapse:collapse;
}

but TR borders registers only in FF, what's with the IE?

http://www.gaminghybrid.com/cms_design/

I would like to get the top tab table (#top-tabs) and the sub tabs (#sub-tabs) centered, instead of the semi-left alignment they are in. What is the best way to go about it? (I've tried <center> and text-align:center)

Also, as you can see in FireFox, the bottom bite doesn't go to the bottom of the other two content bits, but it does in IE.

Any help is appreciate

Hello all, I'm a copywriter who's recently been forced into web design by my boss because of general tech savvy. I've replaced his old ugly website with a new, prettier one.

I would post a url but it says I'm a new user and I can't - I don't know when that ban gets lifted.

I did the layout with a table which I KNOW is incorrect and will make further development difficult, but my boss insisted and I don't feel too bad about it as this really isn't what I'm being paid for. (If he wants a correct, professionally designed website he can hire a professional web designer to do it correctly).

However, there is one issue I'd like to fix, if I can. On the second, third and fourth pages (What Vehicles We Buy, FAQs, and Why Sell to Auto Buyer?) the table sizes incorrectly in IE 8 - but not in Firefox, Chrome or any phone I've been able to check it on. If you can open it in IE you should see what I'm talking about. Right off the bat, the navigation bar near the top is too low, and it gets worse the farther you get down the page. The images in the middle are way off.

This is only the case on these three pages, all the site's other pages are fine. I'm at a loss on how to fix it. If I need to post the full code for you to see, I can do that but I don't want to clutter this post if it's not necessary. Here's the style codes for the background image and the table, respectively:

#bg {
vertical-align: top;
width: 1601px;
position: absolute;
top: 0;
left: 0;
}

#Table_01 {
vertical-align: top;
width: 1601px;
position: absolute;
top: 0;
left: 0;
}

If anyone can see why I'm having a problem, I'd be extremely grateful. Thanks in advance.

I'm having some issues with getting a table border to appear in both Mozilla and IE. I had it working at one point but now it's stopped working in IE.

Basicly this is the code to control it:

border:1px solid #0;

but IE doesn't read it, I've checked the rest of the CSS to see if there is any conflicts but found none.

Anyone know how to get the table border to appear in both IE and Mozilla?

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?

I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left.

Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right.

Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this.

html code

Code:

<div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div>

css tags:
Code:

.wide_column_header {
  float:left;
  width:558px;
  margin:0 0 0 5px;
  background-image:url(../images/wide_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}

.headerbartext {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-left:15px;
  line-height: 140%;}

.headerbartextright {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-right:15px;
  line-height: 140%;}

Something like this gives real thick and uneven borders, is it possible to make the borders combine and become one single border when they are next to each other?

I don't want to use seperate border-top border-left etc ...

Thank you.

Code:

<HTML>
	<HEAD>
		<style type="text/css">
			div.table div
			{
				border			: 1px solid black;
				/* border-collapse		: collapse; */
			}
			div.table div.tr
			{
				clear			: both;
			}
			div.table div.tr div.th
			{
				float			: left;
				font-weight		: bold;
				width			: 25%;
			}
			div.table div.tr div.td
			{
				float			: left;
				width			: 25%;
			}
		</style>
	</HEAD>
	
	<BODY>
		<div class="table">
				<div class="tr">
					<div class="th">column 1</div>
					<div class="th">column 2</div>
					<div class="th">column 3</div>
					<div class="th">column 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">numAAA 1</div>
					<div class="td">numA 2</div>
					<div class="td">numAAAA 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
				<div class="tr">
					<div class="td">num 1</div>
					<div class="td">num 2</div>
					<div class="td">num 3</div>
					<div class="td">num 4</div>
				</div>
		</div>
	</BODY>
</HTML>

I have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well.

Here is a setup of my table
Code:

<div id="Content">
        <p class='instructions'>Click a column header to sort the table.</p>
        <div spry:region="jdmba">
          <div spry:state="loading" class="loading">Please wait while alumni data loads&hellip;</div>
          <table class="spry" cellspacing="0" cellpadding="0">
            <tr>
              <th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
              <th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
              <th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
              <th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
              <th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
            </tr>
          </table>
          <div class="Overload">
            <table class="spry" cellspacing="0" cellpadding="0">
              <tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
                <td width="108px">{last}</td>
                <td width="106px">{first}</td>
                <td width="269px">{account}</td>
                <td width="66px">{state}</td>
                <td width="82px">{hls_year}</td>
                <td width="82px">{hbs_year}</td>
              </tr>
            </table>
          </div>
        </div>

Here is my CSS file
Code:

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#News a:link {
	color: #00F;
}
#News a:hover {
	color: #00F;
	text-decoration: underline;
}




body {
	background: #000 repeat;
}




#wrap {
	background: #000;
	width: 900px;
	border: thick solid #9C0029;
	float: left;
	height: auto;
	padding: 0px 0px 1em;
	margin-top: 2%;
	margin-left: 10%;
}
#footer {
	font: bold small/50px Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #9C0029;
	text-align: center;
	height: 50px;
	width: 850px;
	margin-left: 25px;
}

#Header {
	background: #8F001C url(../images/banner.jpg) no-repeat center center;
	width: 850px;
	height: 150px;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 25px;
}
h1 {
	font: normal 18px Arial, Helvetica, sans-serif;
	color: #000;
	text-align: left;
}
h2 {
	font: small Georgia, "Times New Roman", Times, serif;
	color: #333;
	text-align: justify;
}
h3 {
	font: normal medium "Times New Roman", Times, serif;
	color: #FFF;
}
h4 {
	font-size: small;
	color: #333;
	text-align: left;
}
.banners {
	background: #FFF0B2;
	width: auto;
	height: auto;
	font: 18px Arial, Helvetica, sans-serif;
	padding-top: .5em;
	padding-bottom: .5em;
	text-indent: 10px;
}
.Content {
	font: 14px/normal Georgia, "Times New Roman", Times, serif;
	text-align: justify;
	display: block;
	padding: 2em 3em 3em;
}
.Content a:link {
	color: #00F;
}
.Content a:hover {
	color: #00F;
	text-decoration: underline;
}
.Content a:visited {
	color: #00F;
}

#inner_body {
	background: #FFF;
	height: auto;
	width: 800px;
	margin-top: 0px;
	margin-left: 50px;
	padding-top: 0.5em;
	padding-bottom: .5em;
}
#inner_border {
	margin: 0em auto auto;
	border: thin solid #8E887C;
	width: 775px;
	padding: 1em 0em 0em;
}
#nav_bar {
	height: 3em;
	width: 100%;
	margin-left: 0%;
	text-align: center;
}


#Content {
	height: auto;
	width: 95%;
	padding: 0em 0% 5em;
	margin: 2.5% 2.55% 2%;
	text-align: left;
	font-family: Verdana;
}
#nav {
	height: auto;
	width: 20em;
}

#News {
	margin-left: 2px;
	height: 30%;
	background: #FFF0B2;
	padding: 3%;
}
#News a:visited {
	color: #00F;
}

.Overload
{
	height: 208px;
	overflow: auto;
}

.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
	font-family: Verdana;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
}

.instructions {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-bottom:8px;
}

.loading {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-top:0px;
	margin-bottom:8px;
	color:#900;
}

table.spry th {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry td {
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	
	font-family:Verdana;
	padding: 0px;
	margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px;  }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }

I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black.

Any ideas?

Thanks!