|
CSS - Table Cell Issues In Firefox
Hello,
I am trying to make the table cells in the chart (URL below) at the bottom of the page to be invisible. I have styled the border & background color to #FFFFF (white). When viewed in Firefox, cell borders in gray appear. http://oharenoise.org/2010_news_releases-2.htm Similar TutorialsHi and thanks in advance for any of your help. I need a single colum with several rows, all of which but one have a fixed height. The remaining row/cell should fill the remaining space. I have achieved this in IE6/7/8 with the style "height:100%" attribute but Firefox lets the page scroll of the bottom of the screen. I want the table to be fully visible at all times but with the felxible row/cell collapsing to fit the screen. Code is below with screenshot attached of what I expect to happen (as in IE). Code: <html style="height:100%;"> <body style="height:100%; margin:0;"> <table style="height:100%; width:250px;"> <tr><td style="vertical-align:top; background-color:#eee;">row 1<br />fixed height, some navigation links</td></tr> <tr><td style="height:100%;"><div style="vertical-align:top; height:100%; background-color:#ccc; overflow:auto;">text<br />text<br />text<br />text<br />text<br />text<br />text</div></td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 3<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 4<br />fixed height again, some navigation links</td></tr> <tr><td style="vertical-align:top; background-color:#eee;">row 5<br />fixed height again, some navigation links</td></tr> </table> </body> </html> Thanks again for any help or pointers as to where I have gone wrong. my goodness what a popular site this seems to be. im just a n00b in css and xhtml right now, but hopefully not for long. im trying to use a table to arrange the images in my website introduction page. im trying to make the page look exactly the same no matter the browser window size. im trying to float the two images that have the names programmingimg.gif and programmingtext.gif, but they are not floating to the right, they are just staying adjacent to the other image in the same cell. one other problem that i am having is, that the only way for me to stretch the background gif across the window size it to fake a background. its just the first image in the file with a z index of -1. this works in FIREFOX but not in IE. in IE, nothing can be seen except the background image. does anyone have a solution to either of these 2 problems? css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Patrick Allard's Very Graphic Website</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <img src="backgroundfire2.gif" alt="background image" id="bg" /> <table border="1" class="introlayout"> <tr> <td class="introtitle"> <img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" /> </td> </tr> <tr> <td class="skillpics"> <img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" /> <img src="programmingpic.jpg" alt="background image" id="programmingimg" /> </td> </tr> <td class="skilltext"> <img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" /> <img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" /> </td> </tr> <td class="menu"> <img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" /> </td> </tr> </table> </body> </html> html: Code:
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
img#bg
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}
img#titleimg
{
width:100%;
}
img#mainmenuimg
{
text-align:center;
width:30%;
}
img#analogskillsimg
{
width:40%;
height:60%;
}
img#programmingimg
{
float:right
vertical-align:bottom;
width:40%;
height:60%;
}
img#analogskillstext
{
vertical-align:bottom;
width:40%;
}
img#programmingtext
{
float:right
width:40%;
}
table.introlayout
{
width:100%;
height:100%;
}
td.introtitle
{
width:100%;
height:10%;
}
td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}
td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}
td.menu
{
text-align:center;
width:100%;
height:10%;
}
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…</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! I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong. Correct look Incorrect look I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any. Here is my main CSS: Code:
body { background-color: #FFFFFF; }
a { text-decoration: none; font-weight: bold; }
a:link { color: #003366; background-color: transparent; }
a:visited { color: #003300; background-color: transparent; }
a:active { color: #339933; background-color: transparent; }
a:hover { text-decoration: underline; }
table { border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
td, th { border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
tr.one { background-color: #FFFFFF; }
tr.two { background-color: #DDDDDD; }
table.squares { border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
td.square { border: 1px solid grey; padding: 4px; }
td.nopadding { padding: 0px; }
.default { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
.h1 { font-size: 200%; font-weight: bold; text-align: center;}
.h2 { font-size: 120%; font-weight: bold; }
.h3 { font-weight: bold; }
.step { font-size: 150%; font-weight: bold; color: #999999; }
Here is one of the sets of squares: Code: <table class="squares">
<tr>
<td class="square" style="background-color: #CCCC66"></td>
<td class="square" style="background-color: #CC9966"></td>
<td class="square" style="background-color: #990000; border: black"><td>
<td class="square" style="background-color: #669966"></td>
<td class="square" style="background-color: #669999"></td>
</tr>
</table>
And finally, here is one of my progress bars: Code: <table style="color: white; width: 100px">
<tr>
<td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
<td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
</tr>
</table>
And in case that code is not enough, here is a link to the full HTML. According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers? My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work? Hi there! This might seem really basic but I don't seem to be able to remove the default border from a cell I created. The code looks like this: "<p> </p> <table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;"> <tbody> <tr> <td> <div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;"> <p align="center"> <img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" /> </p> <p align="center"> </p> <p> </p> </div> </td> </tr> </tbody> </table> <p> </p> How shall I do to hide the border? Thanks in advance! /Kristoffer Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned): Quote: html, body { margin: 0px; padding: 0px; background-color: #ffffff; font-family: verdana, tahoma, serif; font-size: 11px; color: #000000; } a:link, a:visited { text-decoration: none; color: #ff0000; } a:active, a:hover { text-decoration: underline; color: #ff0000; } form { margin: 0px; } img { border: 0px; } table { border-collapse: collapse; } #top { background: url(../images/top.jpg); height: 100px; } #bar { background: url(../images/bar.jpg); font-weight: bold; color: #ffffff; height: 26px; width: 100%; } #bar1 { position: absolute; top: 100px; left: 0px; background: url(../images/bar1.jpg); height: 26px; width: 4px; } #bar2 { position: absolute; top: 100px; right: 0px; background: url(../images/bar2.jpg); height: 26px; width: 4px; } .bar4 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; width: 200px; } .bar5 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; height: 18px; } a.nav:link, a.nav:visited { text-decoration: none; color: #ffffff; } a.nav:active, a.nav:hover { text-decoration: underline; color: #ffffff; } img.top { height: 100px; width: 395px; } td.bar1 { padding-left: 6%; } td.bar2 { padding-right: 6%; } td.bar3 { padding-left: 1.4%; } And here is the HTML (in bold again the place concerned): Quote: <?$page='';?><?include'body/head.txt';?> <div id="top"> <img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div> <table id="bar"> <tr> <td class="bar1"> <a href="index.php" class="nav">Index</a> | <a href="forums.php" class="nav">Forums</a> </td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom"> <table> <tr> <td><input type="hidden" name="domains" value="xander6669.com"/></td> <td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td> <td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td> <td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td> <td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td> </tr> </table> </form></td> </tr> </table> </body></html> So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/. Thanks for any help. Hello, I need to place an image in the bottom right-hand corner of a table cell. How would I do this using CSS, keeping in mind that text and other goodies are already present in the cell? I'd appreciate any advice. Thanks. Hi. I've got a question regarding placing an image within a table cell and using CSS to achieve a certain result. The table cell's width is determined at 530px, but the height is dependent on the actual length of the copy. What I'm looking to accomplish is have an image ghosted in the background of the text. It is supposed to appear in the lower right hand corner of the cell. I've already created the image with a transparent background, but it's not implementing correctly. Can I use a Z-Index style to achieve the item being placed under the text? Also, how do I make sure that the image is positioned in the lower right hand corner of the cell regardless of the height of the cell? Thanks! Simon315 Check out the following code. Notice how the dark blue cell has one thin layer peeping through right inside the black border of the outer table? I can't figure out why. What this should look like is a black border, followed by a border of 3 white thickness all around the light blue cells, as well as between the light blue cells. Fixing this peeping cell in a way in which it is sucked out is fine - but if you have a better solution as to how to make the white spacing 3 around the cells AND the table, with a black border, I will accept. Thanks Code:
<html>
<head>
<style type="text/css">
.table1
{
border-collapse: collapse;
border: 1px;
border-style: solid;
border-color: #000000;
background-color: #FF0000;
}
.table2
{
border: 1px;
border-style: solid;
border-color: #FF0000;
border-collapse: collapse;
width: 300px;
}
.cell1
{
background-color: #0099ff;
border: 0px
border-style: solid;
}
.cell2
{
border: 3px;
border-style: solid;
border-color: #FFFFFF;
background-color: #95caff;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td class="cell1">
<table class="table2">
<tr>
<td class="cell2"> </td>
</tr>
<tr>
<td class="cell2"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
hi all... i have a table cell "td" with 3 divs in it. what i need is to get it to align the top div to the top, middle div to the middle and 3'ed div to the bottom... this is all fine but i cant get to do that, and the auto increase height on the middle one dont work ? btw: this is for the IE style sheet, mozilla(firefox) works great.... frank/ Hello, I have a table and I am styling its cells: table.Grid td {background-color: red;} Inside this table I will have some other tables but I don't want their cells to have the styles changed. I see two options: give a class to Grid table cells: table.Grid td.Grid {background-color: red;} Reset the changes in child tables: table.Child1 td, table.Child2 td, table.Child3 td {background-color: white;} But can I apply the following style: table.Grid td {background-color: red;} And make it only for the cells inside that table but not inside the child tables in this code line? ... without needing to reset the styles on child table cells or give main cells a class ... Thanks, Miguel hi, and thank for the help in advance. i was wondering if it is possible to make a table cell's top border different thickness versus the sides and the bottom. hi all, i'm trying to make a vertical menu using CSS2 and XHTML. the problem i'm facing is that i need a DIV inside a table cell, which should take 100% width and height, and inside this DIV i will place arbitrary contents that scrolls if they overflows. This is the code i have written so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
TestMenu
</title>
<style type="text/css">
BODY, HTML {
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.menuContainer {
background-color: red;
width: 300px;
height: 100%;
border-spacing: 0px;
}
.menuItem {
background-color: green;
}
.menuItemOpen {
background-color: yellow;
}
.menuItemContents {
margin: 0px;
padding: 0px;
vertical-align: top;
}
.menuItemContainer {
height: 100%;
width: 100%;
border-spacing: 0px;
}
.menuTitle {
background-color: blue;
color: white;
height: 20px;
margin: 0;
padding: 0;
}
.menuContents {
padding: 0px;
}
.menuInnerContents {
background-color: orange;
overflow: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table class="menuContainer">
<tr class="menuItemOpen">
<td class="menuItemContents"><table class="menuItemContainer">
<tr>
<td class="menuTitle">Item 1</td>
</tr>
<tr>
<td class="menuContents"><div class="menuInnerContents"><div>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/></div></div></td>
</tr>
</table></td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 2</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 3</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 4</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 5</td>
</tr>
</table>
</body>
</html>
as you can see the "menuInnerContents" DIV isn't taking all the space available and the text inside it doesn't overflow. Help me please! Hello, I am using a series of nested ULs to display information in a kind of tree structure with some DHTML involved to make it behave pretty. What I am trying to achieve is to have the information in the LI elements well spaced apart, using <span>s. Since these elements are inline I cannot give them a specific width. A workaround that solves the problem in using the property display:table-cell and then I can give it a width. Of course this doesn't work in IE. Could someone please suggest an alternative way of achieving the following: Code:
<ul id="tree">
<li id="node1">
<a href="#">
<span>CB200801</span>
<span>02/03/2007</span>
<span>IPS20003</span>
<span>17.58</span>
<span>3.08</span>
<span>0.00</span>
</a>
<ul>
<li id="node2">
<a href="#"><span>12028077</span></a>
</li>
<li id="node3" >
<a href="#"><span>12046086</span></a>
</li>
</ul>
</li>
etc etc
and then I give the <span> the display:table-cell and a width. In Firefox this is giving me the visual layout I require. Can something be done to help IE? Thanks in advance Andy Hi, I have a HTML page linking to a CSS file in the header. My main table is defined using class="formBody". This includes: Code: table.formBody td {
border-width: 1px 1px 1px 1px;
padding: 5px 5px 5px 5px;
border-style: solid solid solid solid;
border-color: black black black black;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
}
I need to override this on certain cells, so that a SINGLE certain cell will not have any borders (these will be cells on the bottom row, so the table will have the appearance of having half of its' actual width on the bottom row). Any ideas? I tried explicitly setting border="0" in the <td> tag and also defining a new class called "noborder" with border set to none, and then using <td class="noborder"> but neither of these work. essentially, what I want, is a table that looks like: Code:
________________________
| | | |
------------------------
|________|
Any suggestions on how to do this? I have an image I want to display in a <td> cell, that scales with the cell dimensions. How do I do that? Hello people I have a silly style-related question I am trying to render a simple HTML table The table has 2 rows on its left column and one cell on its right column (rowspan = 2) What I am trying to do is to cause the top-left cell to have a fixed height, and to give the remaining height to the cell below it (in the same column). This should work no matter how tall is the table Here is my snippet: Code: <html> <body> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="50" height="45" valign="top" style="padding-right:5px; padding-top:5px;"><img src="graphic.jpg" width="30" height="40" style="border:1px solid red;"></img></td> <td width="99%" rowspan="2" valign="top" style="padding-bottom:5px;">This<br> is<br> the<br> content<br> of<br> the<br> text<br> on<br> the<br> right</td> </tr> <tr> <td width="50" style="padding-bottom:5px;" valign="top">text under photo</td> </tr> </table> </body> </html> The code behaves correctly when viewed in Firefox 1.5 (see attachment screenshot) but when viewed in IE6.0, the top-left cell seems to ignore my height request... any help would be appreciated Hello, i am creating a dynamic content php page. I start with a photoshop image and create slices and have it output the HTML and CSS table. The problem i am having is that the center cell where the content should go does not expand when the the text goes out of its bound. Is there a way i can do this? Here is the code and a link to the example output. Code:
<STYLE TYPE="text/css">
<!--
#index-01 {
position:absolute;
left:0px;
top:0px;
width:923px;
height:103px;
}
#index-02 {
position:auto;
left:923px;
top:0px;
width:100%;
height:103px;
background-image:url(images/headerbkgdlg.gif)
}
#index-03 {
position:absolute;
left:0px;
top:103px;
width:240px;
height:35px;
}
#index-04 {
position:absolute;
left:240px;
top:103px;
width:487px;
height:40px;
}
#index-05 {
position:absolute;
left:727px;
top:103px;
width:196px;
height:35px;
}
#index-06 {
position:absolute;
left:923px;
top:103px;
width:32px;
height:452px;
}
#index-07 {
position:absolute;
left:0px;
top:138px;
width:36px;
height:417px;
}
#index-08 {
position:absolute;
left:36px;
top:138px;
width:182px;
height:312px;
}
#index-09 {
position:absolute;
left:218px;
top:138px;
width:22px;
height:417px;
}
#index-10 {
position:absolute;
left:727px;
top:138px;
width:196px;
height:398px;
}
#index-11 {
position:absolute;
left:240px;
top:138px;
width:683px;
height:397px;
}
#index-12 {
position:absolute;
left:36px;
top:450px;
width:182px;
height:105px;
}
#index-13 {
position:absolute;
left:240px;
top:536px;
width:683px;
height:19px;
}
#index-14 {
position:absolute;
left:0px;
top:555px;
width:923px;
height:22px;
}
#index-15 {
position:absolute;
left:923px;
top:555px;
width:100%;
height:21px;
background-color:#DCCC00;
}
#index-16 {
position: absolute;
left: 923px;
width: 100%;
height: 451;
top:103px;
}
-->
</STYLE>
http://67.86.83.106:81/homeline/index.php I would like the bottom portion along with the menu cell to resize vertically based on the amount of data but always atleast have the given size it is now. Thanks for the help Hi, I am very new to CSS and was wondering if there is a way to angle text in a <TD></TD> cell of a table? My problem is that along the top of my table I have to list the times e.g. 12:00:00, 12:15:00, to 23:45:00. This makes the width of my table much bigger. I was wondering if its possible to angle the text so it stands ons its head - so to speak - that way the column width would be much smaller? Thanks in advance j |
|||||||