CSS - Expanding Cells In Table With Long Strings.

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?

I am displaying data from mySQL in a table. I am having a problem controlling the width of the columns.

I am trying to replace code like this:

<td width="100px><?php echo $row_rsList['taskpriority']; ?></td>
with a css style

<td id='pcol' ><?php echo $row_rsList['taskpriority']; ?></td>

where

td.pcol {
width: 100;
}


But when I display the table it seems to disregard the width setting.


The only other table formatting I ahve done so far is this:
table {
margin:0;
padding:0;
}

table th {
vertical-align: baseline;
font-size: x-small;
font-weight: bold;
font-variant: small-caps;
background: #CCCCCC;
text-align: left;
}

Thoughts?

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?

is there a problem with placing div tags inside table cells.

I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice.

is there a problem and/or workaround to using div tags inside a table cell

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

Hello, I am attempting to have two pieces of text within a table cell that also contains an image. I was able to figure out the first piece of text that I wanted vertically aligned to the top and to the left, but the next piece of text, which I want vertically aligned to the bottom of the cell and aligned right I am having issues with. Here is the example code:
Code:

<td style"vertical-align: bottom;"><img src="image1.jpg" border="0" width="195"><font style="position: absolute;left: 2;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">STYLE#</font><font style="position: absolute;right: ;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">As low as $x.xxfont></td>

Is this possible within the same table cell as the image? Or do I have to place a CSS table within this cell to place text over top of the image? I would have placed the image as the cell background image, however, I am dynamically creating these tables, and not all of my images are of same size. I am specifying the width though, just not the height. Thank you in advance.

Hello,

I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table.

Im not very experienced with css and would perfer to keep it simple.

any info will help

thanks
Nick Carlevaris

I am developing a PHP/CSS database application built for Safari and have run into a very nasty bug.

(Aside: the web application I am building is sort of browser-specific... we are an all-Mac company, so we want people to use Safari. [I'm not even trying to make it work with IE5/Mac. Screw that.] But having said that, I'd also like it to work in IE6/Win and Firefox [Mac/PC] to give people at least a few more options, like if they're on their PC at home... whatever. Just thought I would explain that before I get flamed by those who think I'm crazy for going that route.)

Anyway, I'd like to have tables with cells/columns that are hidden on the screen but visible on printouts and vice versa. But I've discovered that using display:none for table cells in the print style sheet crashes Safari. It does not affect span tags within table cells.

This will crash Safari.
Code:

td { display: none; }

This is okay.
Code:

td span.printhide { display: none; }

This is also okay, but why do this if it's still going to take up the space on the page? Might as well just leave it.
Code:

td { visibility: hidden; }

Now, I've found a workaround that works, but it's a pain. Basically, instead of setting it up like a normal table, like this:

Code:

<table>
<tr>
<td>Cell</td>
</tr>
</table>

You have to set it up like this:

Code:

<span class="table">
<span class="row">
<span class="cell">Cell</span>
</span>
</span>

As long as you give those span tags their respective display attributes, this works when you set this in your print stylesheet, for example:

Code:

span.cell { display: none; }

But the big problem with doing it this way is that you're now completely handcuffed to the stylesheet. At least if the style sheet bonks the old way, you still have a table with tabular data in it. Plus, say if the next version of Safari fixes this problem, then you'd have to go back and fix it on every page that uses these span tags in order to "unlock" the handcuffs, which kind of nullifies the purpose of style sheets in the first place.

So I guess what I'm asking is if anyone knows of a workaround that I can use that does NOT involve converting my <table><tr><td> to <span><span><span>? Thanks for reading.

I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy)

The problem:
Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear.

Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world.

shortened HTML:
Code:

<div class="menu">
menu here
</div>

<div class="contents">
the rest of page
</div>

shortened CSS:
Code:

.menu
{float: left;
width: 20%;
padding: 1%;
}

.contents
{float: left;
padding: 1%; 
width: 76%; 
}

I have set my table cell #3 to 246px and have placed an image (called keyboard.jpg) with a width of 246px in it as a background image (the only cell in the table with an image), yet the table cell has expanded beyond that 246px width.

I need to set the cellpadding to 5px because for legibility for all the other cells (with just text) in the table. Can I turn off the cellpadding for just this one cell #3 that has an image in it? Why does a background image in a table cell react to the table's cellpadding? Should I remove the keyboard.jpg as a background image and make it an in-table image?

<em>Whatever the case, how can I make the image fit nicely without any extra space in the cell?</em>


Here's my code and my stylesheet:

<div id="table">
<table width="725" border="0" cellpadding="5" cellspacing="0" class="table">
<tr>
<td width="1">&nbsp;</td>
<td class="cell1" width="130"><p><strong>Yada</strong></p>
<p>Bla bla bla</p>
<p>Bla bla bla</p></td>
<td class="cell2" width="124"><p><strong>Yada</strong></p>
<p>Bla bla bla</p>
</td>
<td class="cell3" width="246"></td>
<td class="cell4" width="174"><p><strong>Yada</strong></p>
<p>Bla bla bla<br />
<br />
Bla bla bla</p></td>
</tr>
<tr>
<td class="tdblue">&nbsp;</td>
<td class="cell5"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
<td class="cell6"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
<td class="cell7"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p></td>
<td class="cell8"><p><strong>Yada</strong></p>
<p>Bla bla bla</p></td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="cell9"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla</p></td>
<td class="cell10"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla.</p></td>
<td class="cell11"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p></td>
<td class="cell12" width="174"><p><strong>Yada</strong></p>
<p>Bla bla bla Bla bla bla Bla bla bla </p></td>
</tr>
</table>

Here's my stylesheet:

table {
width: 760px;
margin: auto;
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: 400;
line-height: 150%;
text-align: left;
text-decoration: none;
letter-spacing: .5px;
}

table td {
vertical-align: top;
}

td.cell1 {
background: white;
padding: 5;
width: 130px;
}

td.cell2 {
background: #F7F4EE;
padding: 5;
width: 124px;
}

td.cell3 {
background: #ffffff;
background-image: url(../images/keyboard.jpg);
background-repeat: no-repeat;
spacing: 0;
padding: 0;
width: 246px;
}

td.cell4 {
background: #F7F4EE;
padding: 5;
width: 174px;
}

td.cell5 {
background: #DFE5F0;
padding: 5;
width: 130px;
}

td.cell6 {
background: white;
padding: 5;
width: 124px;
}

td.cell7 {
background: #DFE5F0;
padding: 5;
width: 246px;
}

td.cell8 {
background: white;
padding: 5;
width: 174px;
}

td.cell9 {
background: white;
padding: 5;
width: 130px;
}

td.cell10 {
background: #F7F4EE;
padding: 5;
width: 124px;
}

td.cell11 {
background: white;
padding: 5;
width: 246px;
}

td.cell12 {
background: #F7F4EE;
padding: 5;
width: 174px;
}

.tdblue {
background: #DFE5F0;
}

.tdtan {
background: #F7F4EE;
}

hi

i have a page that contains a large html table. this table spans many pages (in internet explorer it spans 6 pages). however, when i view the print preview in firefox it only shows 1 of 1 page, and at the bottom of the page, where i would expect a page break to exist, the table continues on and then off the bottom of the page. basically, it seems to be attempting to render the entire table on to one page, even though it won't fit.

has anyone got any ideas how i can make this table print on multiple pages?

i've read somewhere that gecko based browsers have a problem with floated content, but i'm sure i've un-floated everything.

thanks in advance.

dave

This is the line in my index.html:
PHP Code:
<PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> 





This is my PRE code in style.css:
PHP Code:
 PRE {
    BORDER-RIGHT: #2f6fab 1px dashed; 
    PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; 
    PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; 
    COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; 
    BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9;
    width: 90%;
}
PRE.yup {
    COLOR: #000000;
    FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
    FONT-SIZE: 12px;
    text-align: left;
    width: 80%;
    margin: 12px auto;
} 





The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas?

Hello,

I started off trying to find a content box that expands depending on screen res because the last one I made would break in the middle if the users screen res was over 1600px wide.

This box worked great with the screen res but now I'm trying to put content in it and my content is not expanding the box down. Instead of pushing the box lower and forcing a scroll bar. The content keeps going down past the bottom of the box and makes a scroll bar.

Any idea how I can make the box expand with my content?

here is a link to my test page. http://www.gamerunion.com/test.html

My css code.

Code:

div#case {
position:absolute;
z-index:1;
top:200px;
left:50px;
bottom:50px;
right:50px;
background:url(/assets/images/tile.png) repeat;
}
div#tlcorner span, div#trcorner span, div#blcorner span, div#brcorner span, div#lftile span, div#rttile span, div#tptile span, div#btmtile span {
width:0;
height:0;
overflow:hidden;
display:block;
}
div#tlcorner {
position:absolute;
z-index:10;
top:0;
left:0;
background:url(/assets/images/corners.png) -369px 0 no-repeat;
width:123px;
height:123px;
}
div#trcorner {
position:absolute;
z-index:10;
top:0;
right:0;
background:url(/assets/images/corners.png) -246px 0 no-repeat;
width:123px;
height:123px;
}
div#blcorner {
position:absolute;
z-index:10;
bottom:0;
left:0;
background:url(/assets/images/corners.png) 0 0 no-repeat;
width:123px;
height:123px;
}
div#brcorner {
position:absolute;
z-index:10;
bottom:0;
right:0;
background:url(/assets/images/corners.png) -123px 0 no-repeat;
width:123px;
height:123px;
}
div#lftile {
position:absolute;
z-index:5;
top:0;
left:0;
bottom:0;
background:url(/assets/images/lr.png) -20px 0 repeat-y;
width:20px;
}
div#rttile {
position:absolute;
z-index:5;
top:0;
right:0;
bottom:0;
background:url(/assets/images/lr.png) 0 0 repeat-y;
width:20px;
}
div#tptile {
position:absolute;
z-index:5;
top:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 0 repeat-x;
height:123px;
}
div#btmtile {
position:absolute;
z-index:5;
bottom:0;
right:0;
left:0;
background:url(/assets/images/tb.png) 0 -123px repeat-x;
height:123px;
}
div#case div.content {
position:absolute;
z-index:10;
width:100%;
min-height:400px;
overflow:hidden;
}
div#case div.content h1 {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:16px;
color:#000000;
margin:5px 0;
padding:100px 0 0 100px;
text-align:left;
text-transform:capitalize;
}
div#case div.content p {
font-family: "Times New Roman", serif, sans-serif, Arial;
font-size:14px;
color:#000000;
text-align:justify;
padding:0 100px;
}

HTML

Code:

<body>
<div id="header">
<h1 class="small">GamerUnion</h1>
<h2 class="small">For Gaming Addicts by Gaming Addicts.</h2>
</div>
<div id="case">
    <div id="tlcorner"><span>top left corner</span></div>
    <div id="trcorner"><span>top right corner</span></div>
    <div id="blcorner"><span>bottom left corner</span></div>
    <div id="brcorner"><span>bottom right corner</span></div>
    <div id="tptile"><span>top side tile</span></div>
    <div id="lftile"><span>left side tile</span></div>
    <div id="rttile"><span>right side tile</span></div>
    <div id="btmtile"><span>bottom side tile</span></div>
    <div class="content">
    <div id="nav">
		<ul>
			<li><a href="/" class="current">Home</a></li>
			<li><a href="/about.html">About</a></li>
			<li><a href="/forum/">Forum</a></li>
			<li><a href="/resources.html">Resources</a></li>
			<li><a href="/contact.html">Contact</a></li>
		</ul> 
	</div>
        
        <h1>Gamerunion</h1>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
        <p>Text text text text</p>
               
    </div>
</div>
</body>

hello,
I'm trying to create my first site in CSS and I'm having trouble with a simple task after tackling so many challenges.

Basically I want a row with three cells
______
|_|_|_|

and the text inside to be lined left, middle and right, respectively.

This is what I was trying, next I'm going to position them absolutely. But figured I would ask for a better way.

html4strict Code:
Original - html4strict Code #greyrow { width:452px; background-color: #EEECE7; padding: 4px 4px 4px 10px; } #leftgrey { display: inline; width: 150px; } #midgrey { display: inline; width: 152px; text-align: middle; } #rightgrey { display: inline; width: 150px; } <div id='greyrow'> <div id='leftgrey'> left </div> <div id='midgrey'> middle </div> <div id='rightgrey'> right </div> </div>

  

  


  


 #greyrow


 {


     width:452px;


     background-color: #EEECE7;


     padding: 4px 4px 4px 10px;


 }


 #leftgrey


 {


     display: inline;


     width: 150px;


 }


 #midgrey


 {


     display: inline;


     width: 152px;


     text-align: middle;


 }


 #rightgrey


 {


     display: inline;


     width: 150px;


 }


  


 <div id='greyrow'>


 <div id='leftgrey'>


 left


 </div>


 <div id='midgrey'>


 middle


 </div>


 <div id='rightgrey'>


 right


 </div>


 </div>


  

thanks for any help.
webg

Hello, I have question regarding proper use of CSS, so I can get web site layout to display properly in both IE and Firefox.

At the moment it's laid out properly in FF, but I have some problems with IE.

The cells of a table "deform" while browsing in IE.
This is how it looks like:
URL
http://i38.tinypic.com/5ffe6q.gif
Here is html of the cells in question:
Code:

<table class="cHs" width="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="pic/topcenter.jpg">

<tr>
<td colspan="3" class="cHs" width="1000" height="145"><img src="pic/logo.jpg"  border="0">
</td>
</tr>

<tr>
<td class="cHs" background="pic/left.jpg" width="47" valign=top></td>
<td class="cHs" align=center width="906" background="pic/backcen.gif" class=interior valign=top>
<td class="cHs" background="pic/right.jpg" width="47"></td></tr><tr><th align="left" valign="top" scope="row" height=\"37\" background="pic/bottom1.gif"></th><td class="cHs" height="37" width="906" background="pic/bottom2.gif" align="center" valign="top">
</td>
</tr>
</table>

Here is used CSS:
Code:

table.cHs{ background: transparent;
border: none;
}

td.cHs { border: none;

}

Does anybody see a problem?
Thanks in advance.