|
CSS - Table Width Not Affected By Css, Html
I'm pretty new to CSS but I'm slowly working through problems on a site I am making for some friends (more accurately a template for their content publisher) and I came across a problem. I have a table that contains all of the pictures spaced properly, but I can't get it to resize down to something that makes sense. I tried adding style="... directly to it as well as width="... but none seem to resize it. (I tried both fixed and percentages)
Link: http://www.coreconsciousness.com/orangenew.html Heres the code, the external CSS doesn't contain anything important at the moment: 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>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /><!--Don't add anything above this line, you may change the DTD to match your page-->
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<style type="text/css">
td.c1
{
background-image:
url('images/textboxorange.gif');
background-repeat: repeat-y;
width:100%;
}
</style>
</head>
<body>
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="900px">
<tr>
<td colspan="8"><img src="images/Orangenew_02.png" alt="" /></td>
</tr>
<tr>
<td colspan="8"><img src="images/Orangenew_04.png" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/Orangenew_05.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_06.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_07.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_08.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_09.png" alt="" /></td>
</tr>
<tr>
<td><img src="images/Orangenew_11.png" alt="" /></td>
<td><img src="images/Orangenew_12.png" alt="" /></td>
<td rowspan="3"><img src="images/Orangenew_13.png" alt="" /></td>
</tr>
<tr>
<td colspan="7"><img src="images/Orangenew_14.png" alt="" /></td>
</tr>
<tr>
<td colspan="8" class="c1">
<h1>#CONTENT#</h1>
<img src="images/Orangenew_15.png" alt="" />
</td>
</tr>
</table>
</body>
</html>
Similar TutorialsHello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... 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 Here's the code. Code: <div class="entry"> <p>Blah blah blah</p> <div class="postmetadata"> <div class="hide"> Blah blah blah </div> Blah blah blah </div> And the CSS. Code: #content div.post div.entry {
float:left;
margin:-5px auto auto 6px;
width:570px;
font-size:12px;
line-height:20px;
}
#content div.post div.entry p {
margin:0;
padding:0;
background:white;
}
#content div.post div.entry div.postmetadata {
margin:10px auto 20px auto;
font-size:11px;
line-height:19px;
border-top:1px solid #bcbcbc;
}
#content div.post div.entry div.postmetadata div.hide {
display:none;
}
Apparently I have to set background:white; to the #content div.post div.entry p for div.postmetadata's border-top to appear in IE7. Firefox and IE8 displays this correctly. Any ideas? I like dashed underline links. The trouble is a couple of sections of my site use line-height and vertical-align to center their content. This means that applying a border-bottom: 1px dashed black; to an href has the effect that the underline appears at the bottom of the line height and not directly underneath the link. Is there a way to overcome this? I'm writing a modification for a bulletin board. One of the beta testers had a problem with their template... My modification uses a left & right float, with a clearing div at the bottom with a copy right. I know the problem, but my question is, why is it a problem: width="75%" will sometimes, in certain templates, make the right floating table drop down beneath the left floating menu, and it's width is 100%. When I change it to inline styling, style="width: 75%;", it works as it should. I'd really like to know why it's doing this, because I've never ran into this before. Here's a slimmed version of the HTML/CSS: Code: <div id="st0re_wrapper" style="float: left; width: 24%; clear: both;"> <table class="borderwrap iptable" cellpadding="3" cellspacing="2" width="100%"> <tr> <td colspan="" class="maintitle"><p>Your Menu</p></td> </tr> <tr> <td style="padding-left: 5px;" valign="middle"> <div style="margin-left: 5px;"> Sample menu item. </div> </td> </tr> </table> </div> <table class="borderwrap iptable" style="float: right;" cellpadding="3" cellspacing="2" width="75%"> <tr> <td colspan="" class="maintitle"><p>Sample</p></td> </tr> <tr class="row2"> <td valign="top" width="100%"> Sample content. </td> </tr> </table> The used CSS classes a Code:
.ipbtable
{
width: 100%;
}
table.ipbtable,
tr.ipbtable,
td.ipbtable
{
background: transparent;
color: #222;
font-size: 10px;
line-height: 135%;
}
.ipbtable td,
.divpad
{
padding: 5px;
}
.borderwrap,
.borderwrapm
{
background: #edede7;
border: 1px solid #91908B;
color: #55554F;
padding: 0px;
margin: 0px;
}
.borderwrapm
{
margin: 5px;
}
.borderwrap h3,
.maintitle,
.maintitlecollapse
{
background: url(style_images/convention/maintitle.gif);
color: #f6f4ef;
font-size: 12px;
font-weight: bold;
margin: -1px;
padding: 7px 7px 7px 12px;
}
.maintitle td
{
color: #EEEDE8;
font-size: 11px;
font-weight: bold;
vertical-align: bottom;
}
.maintitlecollapse
{
border: 1px solid #FFF;
}
.maintitle p,
.maintitlecollapse p,
.formsubtitle p
{
background: transparent !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
st0re_wrapper is just an unused id, besides the inline styling. Hi Is it possible to give a table widths style the ability to have a minimum and maximum width? eg, it has to be 10px to 30px in width? so if content doesnt fill it enough, it will be 10px but if there is loads of content it will only goto 30px in width ? Code: table.community {
background-color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#414141;
table-layout: fixed;
width: 548px;
margin: 1px;
}
<table class='community_field'> The table is ignoring the width..doesn't stretch the width designated. Percentage doesn't work either.. im trying to make a table have a max width (so it can shrink of the browser window shrinks or the user has a smaller screen resolution) Code:
<STYLE type="text/css">
#max800 { max-width: 800px; text-align: left;}
#max750 { max-width: 750px; text-align: left;}
</STYLE>
thats the css in the header section of my document (which is a .php document but this part is not in <?php ?> tags on a table if i put <table id="max800"> it does not fallow the max width propety i am trying ot give it (or the text align for that matter) instead it shrinks to the smallest possible width like it would nomrally do what am i doing wrong? Hello, I have not used CSS very much, so this may be a fairly simple problem. I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing: Code: <table class="masterTable"> and Code: <td class="masterCell"> This code results in a DIV box with 1 pixle borders, with tabs at the top. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css" media="screen">
/* Top Tab Menu */
#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist a:hover
{
color: #666;
background: #fff;
}
/* Big Box Below Tabs */
#content_box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
body {
margin: 10px;
}
</style>
<title>Test</title>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Test One</a></li>
<li><a href="#">Test two</a></li>
<li><a href="#">Test three</a></li>
<li><a href="#">Test four</a></li>
<li><a href="#">Test five</a></li>
</ul>
</div>
<div id="content_box">
<table width="100%" border="0" cellpadding="5">
<tr>
<td>
Test<br />Test<br />Test
</td>
</tr>
</table>
</div>
</body>
</html>
In it, is a table with 100% width which will hold row data from a database. It works very well if Firefox. But in IE, the right edge of the DIV box is pushed to the right by two pixles. I believe it is the table doing this. I'm not understading how to have the non fixed width DIV contain a non fixed width table. See the real thing at Siliconsatan.com/example.php See a close up image below. http://tonglebeak.ath.cx/boards/ In firefox, it renders as I expect it to: the caption is half the width of the table, and the caption is centered. In IE, however, it doesn't want to become half the width of the table. Hell, setting a px amount doesn't even affect it. What can be done to fix this in IE? I have a table with two rows. It has some very basic CSS - borders, padding, etc. In FF and Chrome it works exactly like I expect, but, big surprise, IE7 is causing me some problems. I haven't tested with any other IE versions. The first table row is a header with a CSS background image and some text. The second row is a basic content row. If I put just one text character in the cell everything is fine. If I put enough text in the cell that it wraps to the second line that makes the second row display about 4-6 pixels WIDER than the top row. Any ideas? I can send the source if you like, but it's a lot to take in. Thanks! I have set my table cell #3 to 246px and have placed an image (called keyboard.jpg) with a width of 246px in it as a background image (the only cell in the table with an image), yet the table cell has expanded beyond that 246px width. I need to set the cellpadding to 5px because for legibility for all the other cells (with just text) in the table. Can I turn off the cellpadding for just this one cell #3 that has an image in it? Why does a background image in a table cell react to the table's cellpadding? Should I remove the keyboard.jpg as a background image and make it an in-table image? <em>Whatever the case, how can I make the image fit nicely without any extra space in the cell?</em> Here's my code and my stylesheet: <div id="table"> <table width="725" border="0" cellpadding="5" cellspacing="0" class="table"> <tr> <td width="1"> </td> <td class="cell1" width="130"><p><strong>Yada</strong></p> <p>Bla bla bla</p> <p>Bla bla bla</p></td> <td class="cell2" width="124"><p><strong>Yada</strong></p> <p>Bla bla bla</p> </td> <td class="cell3" width="246"></td> <td class="cell4" width="174"><p><strong>Yada</strong></p> <p>Bla bla bla<br /> <br /> Bla bla bla</p></td> </tr> <tr> <td class="tdblue"> </td> <td class="cell5"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> <td class="cell6"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> <td class="cell7"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p></td> <td class="cell8"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> </tr> <tr> <td> </td> <td class="cell9"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla</p></td> <td class="cell10"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla.</p></td> <td class="cell11"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p></td> <td class="cell12" width="174"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla </p></td> </tr> </table> Here's my stylesheet: table { width: 760px; margin: auto; font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 150%; text-align: left; text-decoration: none; letter-spacing: .5px; } table td { vertical-align: top; } td.cell1 { background: white; padding: 5; width: 130px; } td.cell2 { background: #F7F4EE; padding: 5; width: 124px; } td.cell3 { background: #ffffff; background-image: url(../images/keyboard.jpg); background-repeat: no-repeat; spacing: 0; padding: 0; width: 246px; } td.cell4 { background: #F7F4EE; padding: 5; width: 174px; } td.cell5 { background: #DFE5F0; padding: 5; width: 130px; } td.cell6 { background: white; padding: 5; width: 124px; } td.cell7 { background: #DFE5F0; padding: 5; width: 246px; } td.cell8 { background: white; padding: 5; width: 174px; } td.cell9 { background: white; padding: 5; width: 130px; } td.cell10 { background: #F7F4EE; padding: 5; width: 124px; } td.cell11 { background: white; padding: 5; width: 246px; } td.cell12 { background: #F7F4EE; padding: 5; width: 174px; } .tdblue { background: #DFE5F0; } .tdtan { background: #F7F4EE; } Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Styling HTML select elements</title>
<style type="text/css">
select {
width: 100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
This code does exactly what I want it to in Mozilla. The widest select determines the width of the column, and then every other select takes the same width. In IE, however, the width is determined by the plain text cells, and the text of the options get cut off. Without making the width fixed, which is a problem as I have a very large table with dropdowns in each cell where I don't really know what the values are or whether the user modifies the text size, is there any workaround in IE to acheive the same effect using CSS? Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. Hey guys, I'm having trouble with the cellpadding on a "tab" on my page. I've got a div that has a table with a single cell inside it. The table is left justified in the div and has a black background. I can't give the table cell a fixed width because a word of variable length will appear inside it. The text in the cell appears aligned center and valigned middle, with 10 pixels of padding on the left and right sides. This appears exactly right in every browser but IE 6 on Windows, where the left and right padding is lost, and the word is bumped right up to the edge of the black table cell. How can I fix this? Thanks a lot. Here's the page: http://aoi2.keysandwings.com/about.php Here's the HTML: Code: <div class="relativetitle"">
<table class="titletable">
<tr>
<td align="center" valign="middle">About</td>
</tr>
</table>
</div>
And here's the CSS: Code: .relativetitle {
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
width: 682px;
height: 30px;
color: white;
background: transparent;
font-size: larger;
text-align: left
}
.titletable {
height: 100%;
padding-left: 10px;
padding-right: 10px;
background: black
}
Hi, My client very much likes a website that belongs to their competition. The thing she likes the most is the fact that the content is centered horizontally and vertically in the browser window. The way they (her competition) have constructed the site is to to place all the content inside a table 100% wide and 100% high with the content centered horizontally and vertically using the table's valign and align attributes. However, this isn't very "standards", is it . . . so, does anyone know of a way this same effect (content centered horizontally and vertically in browser window) can be acheived using CSS? Thanks! In PHP I limit the heading to 35 characters. This works great and fits within the allocated width unless the heading is in all caps or mostly caps. I want to allow caps, but depending on how many are used will determine the over all width of the heading. I want to maintain constant width with Capital Letters in a table. I also don't want text used in a heading <p> to wrap, but by not wrapping it will continue beyond the borders of the cell and table. What I really need to do is cut off characters from the end if it goes beyond the border. How can I cut off the end of a sentence (heading) to kept the heading within assigned borders without it wrapping? This is the code I am experimenting with: Code: <html>
<head>
<title>Fixed widths</title>
<style type="text/css">
table {
table-layout:fixed;
width:613px;
}
td {
table-layout:fixed;
width:260px;
vertical-align:top;
text-align:center;
}
p {
white-space:nowrap;
}
</style>
</head>
<body>
<table border="1" cellpadding='0' cellspacing='10'>
<tr>
<td><p><strong>This heading can only have 35 chars</strong></p></td>
<td><p><strong>THIS HEADING CAN ONLY HAVE 35 CHARS</strong></p></td>
</tr>
</table>
</body>
</html>
|
|||||||