|
CSS - Css Table Dynamic Cell Height
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 Similar TutorialsHello 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 I want to set up a table so that error messages appear directly above specific table columns in the form of a div tag with a red background and the same width as the column. To do this I've added a div tag inside the <th> element of the table, with the display property set to 'none'. Code: <th> <nobr>Header Content</nobr> <div id="error_message">Error Message</div> </th> When I want to display an error message above the table I use the following styles on the div tag Code:
background-color: #ffcccc;
width: 100%;
position: relative;
left: 0px;
top: -100px;
z-index: 1;
display: block;
It displays the div tag above the header like I want, but it still stretches the height of the <th> element as if it was still contained inside of it. How do I do this without stretching the cell height? Hi 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. I'm assuming this is going to be a CSS issue. I have a table cell which contains text, and for the sake of accessibility, I'm allowing text resizing and would like to prevent the table cell from changing in height when the font size is increased. Basically, as the font size increases, the width of the cell is the only thing that will change, not the height. First, is this possible? Second, if so how can this be achieved? I'm pretty sure that I've seen other sites do this, just can't remember where. Thanks in advance! Hi everybody Is there a way to inherit the height of a surrounding table cell? <td> <a href="..." style="display: block;">...</a> <!-- Should have the same height as the td --> </td> Thanks for help :-) Josh -------------------------------------------------------------------------------- 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 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 I use Quote: <tr><td style="background-color: rgb(255, 255, 255); height: 100px;" colspan=9> </td></tr> and it creates the proper cell height but the color is not black. If I use PHP Code: <tr><td style="background-color: rgb(255, 255, 255); height: 1px;" colspan=9> </td></tr> the cell height does not collapse to 1px and the color is not black either. Any suggestions? I have a table in which I use divs to put content, here's my simple table; Code: <table border='1' width='500'> <tr> <td colspan='2'><div id='navHeader'>Header</div></td> </tr> <tr> <td><div id='navContent'>content</div></td> <td class='fullheight' bgcolor='yellow'><div id='navSidebar'>nav bar</div></td> </tr> </table> and here's the CSS code Code:
#navHeader
{
margin: 10px;
border: 1px solid #000000;
}
#navContent
{
margin: 10px;
border: 1px solid #000000;
height: 500px;
padding: 10px;
}
#navSidebar
{
margin: 10px;
border: 1px solid #000000;
padding: 10px;
}
.fullheight
{
height: 100%;
}
you can see the result here : http://www.net-cube.ca/fullheight/ as you can see, the 'nav bar' isn't taking 100% in height. In the CSS, I defined a 100% height rule (fullheight) and I'm calling it in it's appropriate td cell, it's parent, to make it 100% full height, I painted it yellow. What I want, is that #id navSidebar div to take 100% of the cell height, like the 100% width. I know I should not be using tables, but I'm starting to get used to CSS, I was doing tables layout for years ... and years, so much clear for me now, I' m making the transition. My problem is that the 'navContent' div will be much longer in height than the navSidebar div, but I want them equals, how can I achieve that?? I could define '500px' in the navSidebar too, but I don't want to, I don't want to specify any length at all, this line will disappear when content will take place. Thanks Hi, Does anyone have any ideas or fixes to get an image to be 100% height of a table cell in IE. (XHTML Transitional) Here is an example http://www.degs.co.uk/test/css/height.htm Works fine in Mozilla/Firefox & Opera Code: html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
height: 96%;
}
table {
padding: 0px;
height: 100%;
width: 700px;
border: 1px solid #000000;
}
.vdivider {
width: 5px;
height: 100%;
}
Cheers, Degs Here's the code: Code: <table class="tab_thin_table"> <tr> <td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 1</td><td class="tab_end_off" rowspan="2"></td> <td class="tab_start_on" rowspan="2"></td><td class="tab_bg_on" rowspan="2">Example 1 ON</td><td class="tab_end_on" rowspan="2"></td> <td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 3</td><td class="tab_end_off" rowspan="2"></td> <td class="tab_thin_spacer"></td> </tr> <tr> <td class="tab_thin_top"></td> </tr> </table> Here's the CSS: Code:
tab_thin_table
{
width: 578px;
vertical-align: top;
}
.tab_thin_top
{
height: 1px;
background-color: #6E7073;
}
.tab_thin_spacer
{
height: 19px;
}
.tab_start_on
{
width: 6px;
height: 20px;
background: url(../container/tab_start_on.gif);
background-repeat: no-repeat;
}
.tab_bg_on
{
background: url(../container/tab_bg_on.gif);
}
.tab_end_on
{
width: 10px;
height: 20px;
background: url(../container/tab_end_on.gif);
background-repeat: no-repeat;
}
NOTE: tabs with "off" are same as tabs with "on" just different image Here's the problems As you can see the tab_thin_spacer and tab_thin_top sit on top of each other. The cells with are using the tab ons and offs are of dynamic widh determined by each page. However, the tab_thin_table is a set width. I need tab_spacer and tab_top to always stretch the rest of the existing width of the table; whatever width is not taken up by the tab ons and offs Thanks say you have a page with 2 main columns inside a container. the right column is a sidebar. both are supplied content dynamically. i'd like the container (inclusive) to be the height of the content column (as determined by its children), and the sidebar should scroll (vertically) its content based on that size. there's a (non-functional) example attached. if you run it you can see the container takes the height of the sidebar - it (the bordered container) should end at the bottom of the content div, and the sidebar should scroll. it's laid out using floating divs, but tables would be fine; javascript is not (per client). any ideas would be welcome. tyia. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.container {
border : 1px solid #F90; /* just to show container height */
}
.content {
float : left;
width : 400px;
height : 100%;
}
.sidebar {
float : left;
width : 400px;
height : 100%;
}
.scroller {
overflow : scroll;
height : 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
<p>Random content</p><p>Random content</p><p>Random content</p><p>Random content</p>
</div>
<div class="sidebar">
<div>Sidebar</div>
<div class="scroller">
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
<p>This content should scroll.</p><p>This content should scroll.</p><p>This content should scroll.</p>
</div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
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. Ok im trying to have a division that expands with the content however, although this works in IE if i dont specify a height, in browsers like firefox the background color just stops even though the content carries on. Code: <div id="content"></div> Code:
div#content
{
background-color: #F3F3F3;
}
ive tried adding height: 100% but it doesnt make any difference I have a page where I would like to have boxes floating to the left. I have a constant width on the containing div, so that I get three boxes per row. Now, I would like these boxes to have the same height per row so that if one box have more content than the others on that row, they will stretch so that they all have the same height. I would like it to look like the products on www.netonnet.se, but using divs instead of tables. As I've done it now the boxes get different height. Anyone got a fix? here's my content and the css for the boxes: #contentProducts{ position:absolute; width:600px; margin-top:1em; } .box { float:left; text-align:center; width: 190px; background: #ffffff; border-right: 1px solid rgb(151,149,150); margin-left:0.4em; margin-bottom:0.5em; height:100%; } .box a{ font-weight: bold; text-decoration: none; color: #0c2c56; } .box a:hover{ text-decoration: underline; } .box h1 { margin:0; font: bold 1em Verdana, Arial; text-align: center; } .box h2 { margin: 0.5em 0.5em 0.9em 1em; font: .8em Verdana, Arial; text-align: left; } .box h3 { margin:0; font: 1em Verdana, Arial; text-align: center; color: #ce3929; font-weight: bold; } .box .contentProductButtons { position:relative; cursor:hand; background: url('../../Images/fill.gif'); background-color:#fff; border-right:1px solid #999; border-bottom:1px solid #999; Z-INDEX: 3; bottom: 0px; left:0px; margin-top:10px; WIDTH: 190px; height:20px } I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you. Code: #content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}
/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/
/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/
/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/
Code: <div id="content"><!--CONTENT SECTION START-->
PHP MENU IS CREATED HERE...
<div id="locationBox"><!--OPEN BOX-->
<div class="boxTop"></div>
<div class="boxContent">
<div class="locInfoMap">
MAIN CONTENT GOES HERE...
</div>
</div>
</div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->
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, 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. |
|||||||