|
CSS - Data Table Overlaps My Div - Why?
Hi
Could someone take a look at this please http://dmumford.bizhat.com/rca/fixtures.htm When viewed in firefox you will see my data table overlaps the div coloured brown, anyone know why this is ? Thanks for your help. Similar TutorialsHello, My code overlaps on FF unlike at IE , but I need the positioning at one div though. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#con{background:#685127;
margin:10px;
width:350px;
padding:20px;
border: 2px solid #000;
position:relative}
div#con2{background:#cc0033;
height:80px;
padding:0;
margin:0;
border:2px solid #2ff;
float:left}
</style>
</head>
<body>
<div id="con2">
<p>lorem fill column strong column fill fill column strong column fill</p>
</div>
<div id="con">
<p>fill fill column strong column fill</p>
</div>
</body>
</html>
how can i stop my buttons overlapping the formfield, without using spacers? Using margin-top=5px; doesnt work Code: <style type="text/css">
<!--
* { margin: 0px; padding: 0px; border-style: none; text-align: center; }
.ff { font: 11px Verdana, Geneva, sans-serif; margin: 2px 0px 0px; padding: 0px; border: 1px solid #0FF; color: #000000; }
a.Butt:link, a.Butt:active, a.Butt:hover, a.Butt:visited { color: #FFF; background: #06F; padding: 2px; border: 1px outset #00C; }
-->
</style>
</head>
<body>
<p><input name="pword" type="text" class="ff" id="pword" size="30" maxlength="40" /> </p>
<p><a href="#" class="Butt">login</a> <a href="#" class="Butt">reset</a></p>
<p>ready</p>
<p> </p>
</body>
I was reading through some articles here about dropdowns and have found that the Son of Suckerfish menus were a good bet. When it rolls over it displays it correctly in IE by putting the dropdown under the link, but in Firefox it puts it smack over the top of it so you cannot read the original link. It worked in both browsers untill I added the main links to what they in the code below to include the pics. I had to put them in divs to align the text next to the icon correctly (verticle mid align next to img?? I jsut set a top margin to push it - is this best?). Heres a link to show you: http://skyyfinancial.com/demo/menutest2.php I put it all together and my list looks like this: Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>
<ul id="nav">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Hard Money Loan General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Real Estate Leasing General </div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Lease to Own</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Apartment</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial</div></a></li>
</ul>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav2">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Home Loans General</div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Purchase</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Refinance</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Construction</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Second Mortgage</div></a></li>
</ul>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Broker Application</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav3">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial Lending General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Financial Analysis</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
</table>
As of right now it works as it should and I only have the one serious issue with it overlapping. Any help on the rest of my questions would be great as well. Other questions I had: Because I had to split them up, I had create a new id for each in IE or it wouldnt work. Only the first one would work. I renamed them and duplicated the code over to the new names ( so theres 3x as much code). I think this could be a javascript issue, but I am not positive. I put my css and javascript at the bottom of this post. I can make a new thread in javascript forum if someone can tell me if that is the problem. ( I looked at it and it seems maybe it needs some type of loop? Not positive ) Lastly, in order to list the lists under eachother, i had split them up into a div per row inside of a table. Otherwise they would just continue across the page. Anyway better of doing this? css: Code:
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px; color:#636363;
font-weight:bold;
}
#menu a {
display: block;
width: 275px;
}
#menu li {
float: left;
width: 275px;
}
#menu li ul {
background-color:#FFFFFF;
position: absolute;
width: 200px;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
Javascript Code:
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Thanks for the help Hi, folks. I'm running into a pretty serious problem to which I'm really, really hoping someone will know a solution. We use a menu system on our site which is made up of layers. It provides for flyout-hierarchical menus, and up until now has caused me no grief. However, now that I've embedded a flash movie onto a particular page the layers that comprise the flyout menu items are hidden beneath the Flash movie. I've tried putting the object tag inside a div and setting the z-index of the div to 1 (and also to -1) but that didn't work. Can anyone take a look and let me know if they have any ideas? http://www.unbc.ca/test.html Cheers and TIA, Pablo I am trying to display data from a XML document in table form...can anyone help me...this is what i have so far, but it's not working and I'm running out of ideas. This is the XML document... Code: <?xml-stylesheet type="text/css" href="nasdaq.css" ?>
<quotes>
<heading>NASDAQ 100</heading>
<subHeading>Current quotes</subHeading>
<dateTime>
<date>11/01/2008</date>
<time>11:45:05</time>
</dateTime>
<titles>
<column id="c1">Symbol</column>
<column id="c2">Name</column>
<column id="c3">Last Sale</column>
<column id="c4">Net Change</column>
<column id="c5">% Change</column>
<column id="c6">Volume</column>
</titles>
<stocks>
<stock class="down">
<symbol>AAPL</symbol>
<company>Apple Computer, Inc.</company>
<lastSale>$15.26</lastSale>
<netChange>-0.17</netChange>
<pChange>-1.10%</pChange>
<volume>5.548</volume>
</stock>
<stock class="up">
<symbol>ABGX</symbol>
<company>Abgenix, Inc.</company>
<lastSale>$9.22</lastSale>
<netChange>0.06</netChange>
<pChange>0.66%</pChange>
<volume>1.396</volume>
</stock>
...so on and so on...
This is what the end result is suppose to look like... http://mtm324php.info/nasdaq.bmp This is what I have so far (the best I could apply a similar example from my textbook to the problem), but the stock data is not seperating in different rows like I specified...any help or direction would be wonderful. Thank you. Code: quotes {display:table;}
heading {display: block; position: absolute; top: 17%; left:44%}
subHeading {display: block; position: absolute; top: 20%; left:44%}
dateTime {display: block; position: absolute; top: 10%; left:75%;}
titles {display:table-header-group; position: absolute; color:blue; top: 24%;}
stocks {position: absolute; top: 30%;}
stock {display: table-row;}
symbol, company, lastSale, netChange, pChange, volume {display: table-cell}
With my CSS the XML document looks like this... http://mtm324php.info/nasdaq.xml I've read the pros and cons about using DIV over TABLE for layouts but what about displaying data? Should I go about using the DIV or TABLE commands? Hi all, I have a table that contains regular numeric data. When the user clicks/hovers over each entry of the right most column, I would like to display a hidden div with some sort of description of that data. I would like this information to display to the immediate right of the last column of data, but not in the table itself. Any ideas? Thanks Hi all, I dnt want to retype my situation, i put my 1st thread in the wrong forums. U can read up on what my query is in this link http://forums.devshed.com/t188904/s.html Thanks all Jim 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 Hello, I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF & IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table. Any thoughts? Any suggestions will be greatly appreciated! Below are snippets of code from the css code and html code: CSS Code:
body {
margin: 0px 20px 0px 20px;
background-color: #069;
background-image: url(../images/bkgd.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #036;
}
#container {
width: 100%;
margin: 0px auto 0px auto;
background-color: #DDD;
}
...
#content {
background-color: #FFF;
padding: 20px;
margin-left: 190px;
}
...
#content_main table.data {
margin: 0px 0px 0px 0px;
border: 1px solid #369;
background-color: #FFF;
}
#content_main table a.nobrdr {
border-bottom: none;
}
#content_main table.data th {
height: 20px;
color: #E8E8E8;
text-align: center;
background-color: #369;
border: 1px solid #2C537D;
text-transform: uppercase;
}
#content_main table.data td {
height: 25px;
padding: 3px;
border: 1px solid #CCC;
vertical-align: top;
line-height: 15px;
}
HTML Code: <table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data"> <tr> <th scope="col" width="5%" nowrap>fund</th> <th scope="col" width="6%" nowrap>bsli</th> <th scope="col" width="4%" nowrap>reg</th> <th scope="col">title</th> <th scope="col" width="9%" nowrap>projcode</th> <th scope="col" width="7%" nowrap>cip</th> <th scope="col" width="4%" nowrap>afc</th> <th scope="col" width="10%" nowrap>avail</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th scope="col" width="10%" nowrap>unoblig</th> <th scope="col" width="5%" nowrap> </th> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>140</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>3J0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>TC</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>4C0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> </table> 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 have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) 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'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description">
<tr><th class="title">Text</th></tr>
<tr><td class="data"><div class="ggcode">Text</div></td></tr>
</table>
So I've been formatting it like this: Code: div#Main
table#Description
.title {
border-color:#F0E68C;
background-color:#F0E68C; }
div#Main
table#Description
td.data {
border-color:#F0E68C;
background-color:#F0E68C; }
However the last table is like this: Code: <table id="recentPosts">
<tr>
<th class="title">
Recent Forum Posts
</th>
</tr>
<tr>
<td>
<table class="data">
<tr>
<th>Topic</th>
<th>User</th>
<th>Posted At</th>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text></td>
<td class="username">Text</td>
<td class="date">Text12/04/2009 03:25 PM</td>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text</a></td>
<td class="username">Text</td>
<td class="date">Text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 {
width: 1000px;
vertical-align:middle;
}
.style36 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}
And the table wich is declared as Code: <div class="scrollingDiv">
<table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >
And the CSS controlling it Code:
div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:1024px;
}
table.style13 {
width: 1000px;
vertical-align:middle;
}
/* Since the table has a class of style13, all td elements under that style can be
selected as below... no need for more style definitions...
*/
.style13 td {
vertical-align:middle;
}
.style13 th {
vertical-align:middle;
}
My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
<td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td>
AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! |
|||||||