|
CSS - Table Cell Height 100% - No Vertical Scollbar In Firefox?
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. Similar TutorialsI'm trying to reduce the amount of real estate that a form and button are taking up in my table. They are expanding the whole row and lining them up with the other contents isn't working in the CSS methods I've tried. Finally I tried reduce the font-size of the cell containing the form and button (all the way down to 1px) which gives the desired result... but I'm a bit concerned about implementing it into all the tables in the site because it seems a bit 'hacky'. Is there a better way to do this? My Webpage You'll see in the first table, final column containing the button, that the button and form and pushed up against the top of the cell and the other cells now have more padding. In the second table, my "font-size:1px" has been applied and gives the desired result. Just curious if there is a better way to do this or if this is will be fine. 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 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 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? 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, 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 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 noticed that in Firefox, setting the height to 100% in the style tag attribute, does not work. See code below: Code:
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Table Height</title>
<style type="text/css">
.wrapper {
min-height: 100%;
max-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
}
#divider {
cursor: e-resize;
width: 8px;;
background-color: #444444;
vertical-align: center;
min-height: 100%;
max-height: 100%;
height: auto !important;
height: 100%;
}
</style>
<script type="text/javascript">
<!--
//global variables used to track status
var curWidth=0
var curPos=0
var newPos=0
var mouseStatus='up'
//this function gets the original div height
function setPos(e){
//for handling events in ie vs. w3c
curevent = (typeof event == 'undefined' ? e:event);
//sets mouse flag as down
mouseStatus = 'down';
//gets position of click
curPos = curevent.clientX;
//accepts height of the div
tempWidth = document.getElementById('leftMenu').style.width;
//these lines split the width value from the 'px' units
widthArray = tempWidth.split('px');
curWidth = parseInt(widthArray[0]);
}
//this changes the height of the div while the mouse button is depressed
function getPos(e){
if(mouseStatus=='down'){
curevent = (typeof event == 'undefined' ? e:event);
//get new mouse position
newPos = curevent.clientX;
//calculate movement in pixels
var pxMove=parseInt(newPos-curPos);
//determine new width
var newWidth = parseInt(curWidth+pxMove);
//conditional to set minimum width to 5
newWidth = (newWidth < 10 ? 10:newWidth);
//set the new width of the div
document.getElementById('leftMenu').style.width = newWidth+'px';
}
}
function toggleMenu(e) {
e.stopPropagation();
if (document.getElementById('leftMenu').style.display != 'none') {
document.getElementById('leftMenu').style.display = 'none';
} else {
document.getElementById('leftMenu').style.display = '';
}
}
//-->
</script>
</head>
<body style="margin: 0; width: 100%; height: 100% !important;" onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<table cellspacing="0" style="width: 100%; height: 100%;">
<tr valign="top">
<td id="leftMenu" style="width: 230px;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</td>
<td id="divider" onmousedown="setPos(event)"><a href="javascript:void(0);" onclick="toggleMenu(event);" style="color:white;"><></a></td>
<td id="mainContent">
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis nisl in lectus consectetuer ornare. Phasellus mi lectus, laoreet nec, bibendum eget, posuere sit amet, urna. Sed ut sem. Mauris tincidunt. Sed suscipit ultrices orci. Morbi quis augue. Ut id felis quis ipsum vestibulum vulputate. Nulla sit amet tellus ut nisl varius scelerisque. Nulla commodo eros. Maecenas luctus, nisi in pulvinar malesuada, magna felis egestas pede, tempus sagittis metus quam ut orci. Quisque quis mauris id dui venenatis adipiscing. Nulla cursus nulla dictum mi. Sed sollicitudin sapien sit amet tellus.</p>
<p>Aenean eros lectus, pulvinar id, varius et, eleifend in, erat. Curabitur non ipsum in risus cursus faucibus. Sed aliquet lectus id neque gravida pulvinar. Fusce tincidunt tortor sit amet mauris tempor dapibus. Integer quis nulla. Maecenas sit amet eros. Aliquam ac massa. Ut commodo dapibus dolor. Proin ut tortor. Suspendisse pharetra laoreet mauris. Aenean viverra turpis auctor mauris. Vivamus tristique.</p>
<p>In faucibus rhoncus mauris. Etiam lacinia suscipit arcu. Etiam consectetuer pharetra nisi. Cras dolor ante, ultrices suscipit, gravida sit amet, auctor tincidunt, purus. Integer ut nisl eget mi vestibulum viverra. Donec ac nibh. Vestibulum vel lorem. Sed sed orci at libero tempus tincidunt. Integer feugiat convallis nisl. Sed luctus sodales risus. Morbi eu neque. Donec lobortis gravida tellus. Pellentesque viverra bibendum lacus. Fusce nunc massa, tincidunt nec, porta ut, euismod a, quam. Nulla semper, dui sed nonummy cursus, velit lectus vestibulum enim, eu accumsan mi quam sed lorem. Cras suscipit, leo a vulputate pharetra, enim mi posuere turpis, non nonummy arcu nibh quis ante. Suspendisse sagittis facilisis turpis. In dui. Ut vitae est.</p>
<p>Vivamus quis risus quis justo facilisis nonummy. Duis eget massa. Sed lacus purus, adipiscing quis, accumsan sit amet, gravida at, nibh. Nullam malesuada. Morbi molestie. Praesent rhoncus, dui quis pharetra tristique, leo mauris semper nisi, eu pellentesque est quam volutpat quam. Nunc congue, nisi at cursus suscipit, eros metus faucibus eros, sed eleifend enim lacus sit amet dolor. Maecenas sed lectus consequat magna aliquet rhoncus. Nullam purus. Cras rutrum, neque in aliquam aliquet, felis nisl semper ligula, id scelerisque tellus orci at massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet est.</p>
<p>Morbi eget tellus vel ante rhoncus placerat. Maecenas libero. Fusce quis massa. Vestibulum euismod, nisl eget congue lobortis, mauris dolor aliquet dui, eu auctor tellus ligula eu justo. Donec mollis dolor interdum nunc. Quisque eget ipsum ut turpis aliquam volutpat. Aenean ac enim vitae purus fringilla consectetuer. Etiam consectetuer augue a enim. Sed felis. Maecenas et elit a lectus nonummy tincidunt. Morbi nulla ante, pharetra quis, egestas quis, commodo id, tortor. Quisque dignissim dapibus arcu. Cras rhoncus. Quisque fringilla sapien id pede. In vehicula pretium libero. Pellentesque ut lectus. Vestibulum pulvinar nibh sit amet justo. Phasellus a lacus in purus congue accumsan. Nullam luctus laoreet arcu. Praesent nonummy, arcu ut porttitor dapibus, nunc augue nonummy quam, et consectetuer nunc mi vel tortor.</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Can anyone suggest a solution? 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 So I'm trying to be "proper" and move from tables to divs. But one thing keeps getting me. Say I have a shadow that is to the left and right of my center content page. Easy enough w/ tables. (I'm really dumbing this all down). <table> <tr> <td background="images/shadow.gif"><img src="images/spacer.gif"></td> <td>My content here<br /><br /><br />etc.</td> <td background="images/shadow_r.gif"><img src="images/spacer.gif"></td> </tr> </table> In tables, that height of the left and right cells automatically move with the content of the right cell, so that if there's more or less text, the shadow gets longer or shorter. Now, this is how I'm seeing DIVs would work. <div style="float:left; background-image:url(../images/shadow.gif);background-position:top right; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> <div style="float:left">My content here<br /><br /><br />etc.</div> <div style="float:left; background-image:url(../images/shadow_r.gif);background-position:top left; background-repeat:repeat-y;"><img src="images/spacer.gif"></div> But in this case, the divs to the left and right do not automatically adjust to be the height of the div in the center. So I just get one pixel of height for the shadow "cells". Is there a way to use CSS and still do this? Thanks, JBL 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>
I have a navigation bar I've created that always extends the vertical borders past it's span tag. Could someone please look at let me know if there's something weird with my css? Is there some kind of work around for FF for this? In IE it works just fine. I have attached a screenshot for reference of what I'm talking about. CSS -- headertable, headercell, and nav are the ones directly relating to the bar. I put them in for proper context. Code:
.logo {
border: 0px;
display: inline;
}
#header {
height: 92px;
width:188px;
background: url(/theme/Green/logo.jpg) no-repeat;
}
.banner {
border: 0px;
margin: 0px;
padding 20px 5px 5px 5px;
float: right;
}
.headertable {
width: 770px;
padding: 0px;
margin: 0;
height: 133px;
}
.headercell {
height: 35px;
vertical-align: top;
}
#nav{
padding: 5px 0;
float: right;
}
#nav a,#nav a:visited {
background: url(/theme/Green/bgnavbutton.gif) repeat-x;
padding: 9px 9px;
margin: 0;
color: #fff;
font: bold 14px/22px arial,sans-serif;
text-decoration: none;
}
HTML Code:
<table class="headertable">
<tr><td valign="top"><div class="banner"><?=proam_loc(9)?></div><div id="header"><h3><a href="/"><span>TDS</span></a></h3></div></td></tr>
<tr>
<td class="headercell">
<span id="nav"><a href="/index.php" id="home" title="TDS Home">Home</a><a href="http://www.tdstelecom.com/redir.asp?keyword=HOME" id="shop" title="Shop TDS">Shop TDS</a><a href="https://secure.tds.net/" id="mya" title="Manage Your Account" target="_blank">Manage Account</a><a href="http://tdsmail.tds.net/" id="jobs" title="Jobs @ TDS" target="_blank">TDS Mail</a><a href="http://tdstelecomhelp.tds.net/" id="help" title="Help / FAQ" target="_blank">Help / FAQ</a><a href="http://www.tdstelecom.com/hr/job_opps.asp" id="jobs" title="Jobs @ TDS" target="_blank">Jobs @ TDS</a></span>
</td>
</tr>
</table> <!-- End Header Table -->
Hey, I have been looking EVERYWHERE for a solution and there seems to be none just quite yet. I've searched google and all sorts of help forums... and still zip, nothing. What I want to do is vertically-align the text in this example: http://www.tri-m.com/test.html in the middle of the white space. The problem though is that there is an unknown height of the whitespace because I want it to be that no matter what size you size the window, the content will always be vertically aligned... so I'm pretty stuck on how to do this. I'm needing the solution for this desperatly and I have been searching and trying everything for weeks. If anyone could help that would be VERY VERY apperciated. Thank you sooo much to everyone that tries this out. Once again here is the Example: http://www.tri-m.com/test.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tri-M Systems INC.</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
body
{
color:#000;
}
#container-page {
background:#fff;
width:100%;
min-height:100%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:100%; /* For IE */
position:relative;
text-align:left;
margin:0 auto;
}
#container-head
{
background:#fff;
}
#header
{
background-color:#0000FF;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:81px;
position:relative;
}
#container-content
{
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
text-align:center;
position:relative;
padding: 0 0 162px 0;
}
#container-content:after
{
height:0;
clear:both;
display:block;
content:".";
visibility:hidden;
}
#content-sec ul,#content-sec ul li {
list-style: none none;
}
#container-foot
{
background-color:#ff0000;
width:100%;
min-width:830px;
width:expression(document.body.clientWidth < 832 ? "830px" : "auto" );
height:162px;
position:absolute;
bottom:0 !important;
bottom:-1px; /* For Certain IE widths */
}
#foot
{
height:162px;
}
</style>
</head>
<body>
<div id="container-page">
<div id="container-head">
<div id="header">
</div><!-- END "header" -->
</div><!-- END "container-head" -->
<div id="container-content">
<center>
<div id="box">VERTICAL ALIGN THIS IN WHITE SPACE</div> <!-- END "box" -->
</center>
</div><!-- END "container-content" -->
<div id="container-foot">
<div id="foot">
</div><!-- END "foot" -->
</div><!-- END "container-foot" -->
</div><!-- END "container-page" -->
</body>
</html>
- Jacenta 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. |
|||||||