|
CSS - Relative Div Spacing In Table Cell Destroys Formatting
Hello -
I am attempting to create a table of values that will have a relative style sheet that will contain a circle background image and number relative to said value. The numbers are only being added for during the creation of requirements to reference the values. The current procedure is to create the HTML, then take a screenshot of it, and manually in a photo editor (or visio) to go in and add the numbers. (So, if we have to add another value, I have to go back in and manually update the numbers and shift everything around). I figure this would be a MUCH better way, since I can just change the visibility on the style sheet and 'poof' the numbers are all gone :-), and when I need to do a screen shot, 'wham' their back again :-D. Here is an example of what I ideally want to achieve (created w/ Visio): Ideal Table Look However, here is what I am currently experiancing Here's the style sheet that I'm using Code:
<style type="text/css">
div.number { visibility:visble;
position: relative;
width: 20px;
height: 20px;
z-index: 2;
left: 5px;
bottom: 35px;
text-align: center;
text-vertical-align: center;
font-family: arial;
font-size: 8pt;
background-image: url(circle.gif);
background-repeat: no-repeat;
background-position:0px -1px
background:none;
border-style:none;
border-width:none;
}
</style>
- All of the number/circles are shifted (which isn't a major problem I can probably solve the location issue myself), but the more important item that's giving me problems is the re-formatting of my Table. I would like to have the image/numbers 'hover' outside of the table cells. Any help would be greatly appreciated. Thanks in Advance. Dave Similar TutorialsI'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, 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. 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? Hello all, firstly, thank you for all you contribute to this question. I have a website (as everyone does) which has a problem (which i always do). I have an embeded flash file and 2 lines of text which are seperated into 2 different divs inside a table cell. I am using css to position these texts over the flash file, which is just fine. The only problem I am recieving is that while using the position: relative in css for these it leaves extra unneeded space under the flash file where the text would be if they were not being positioned. Here is the page wit hthe problem: Look at the header So I am stumped. I have posted away in other CSS forums and have received no replies at all, I have googled it many times and found the same problem, but the solution will only work for that individuals situation. So, what can be done. Here is my html for the header cell: Code: <table id=main cellpadding=0 cellspacing=0> <tr> <td class=head colspan=2 height=144px> <param name="movie" value="test.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed src='images/test.swf' width=762px height=144px wmode="transparent" style="z-index: 1;" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed><div class='headtitle'><? echo $title; ?></div><div class='headquote'><? echo $quote; ?></div></td> </tr> And here is the css that is used by that cell: Code:
table#main {
height : 100%;
background : #ffffff;
width : 762px;
border : 0 none inherit;
border-left : 1px solid #000;
border-right : 1px solid #000;
border-top : 0 none inherit;
border-bottom : 0 none inherit;
margin : 0;
padding : 0;
}
table#main td.head {
height : 0px;
width : 762px;
background : #006699;
border : 0 none inherit;
border-bottom : 2px solid #000;
vertical-align : top;
padding : 0;
background-image: url(images/logo2.jpg);
}
table#main td.head div.flash {
position: relative;
z-index:1;
}
table#main td.head div.headtitle {
z-index:2;
font-size : 24pt;
color : #fff;
position : relative;
font-weight : bold;
left : 5px;
top : -45px;
}
table#main td.head div.headquote {
z-index:2;
font-size : 10pt;
font-weight : bold;
color : #fff;
position : relative;
text-align : right;
right : 5px;
top : -180px;
font-style: italic;
}
Im sure its something Im looking over as I am a newb at css. Thanks for all help! Hi, Really new to this css stuff and i'm sure i'll get a beratting for asking such a simple question but here goes... What i need is a cell with a linked word in it. Initial state is white background with blue text. On rollover i would like the whole cell to turn blue with white text. I'm sure this is simple but just need a point in the right direction. Thanks for any help Tom Hey there. im working on a website project and want to remove the cellspacings.... Im working with mm dreamweaver and got this code from the reference which is buildin: "cell-spacing" but its not working... any ideas? http://www.webpagedesignrus.co.uk/DECS Look at the text near the picture, I need to space it out a bit but only on the left side... I made the td have the id of "left": Code:
#left {
margin-left: 30px;
}
Code:
#left {
margin-left: 30;
}
I can't get it to work... 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! Hi there! This might seem really basic but I don't seem to be able to remove the default border from a cell I created. The code looks like this: "<p> </p> <table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;"> <tbody> <tr> <td> <div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;"> <p align="center"> <img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" /> </p> <p align="center"> </p> <p> </p> </div> </td> </tr> </tbody> </table> <p> </p> How shall I do to hide the border? Thanks in advance! /Kristoffer Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. Hello, I am very new to CSS, having only used stylesheets for basic formatting of text, etc. I have created a site where the layout is based on tables (I know ... when I have spare time, I will start learning CSS for this). I have a main table with 1 row and 1 column, height 95%, width 100%. Within this I have a table with a fixed layout (set height, width) for the table elements. This table is centre and middle aligned. Unfortunately the text provided for one of the cells in the table is exceeding the amount expected and the cell height has increased to accommodate for this. I thought of creating a layer and placing it over the cell and inserting the text here and setting the overflow to scroll. However, depending on screen resolution, browser the layer is not always positioned where I want it. Can I somehow position the layer relative to the table cell ? If not, do you have any suggestions as to what I can do to fix this. I do not have the option to rewrite the site using CSS, due to deadlines. Thanks in advance for your help. Bea 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 Code:
#ticker {
background: transparent url('../images/dark_gradient.png');
overflow: hidden;
display: table;
margin-left: 20px;
margin-top: 10px;
width: 835px;
height: 52px;
}
#ticker #items {
position: relative;
top: 0px;
left: 829px;
}
the point is to use javascript to scroll the #items div along the container (#ticker). now, using this method, overflow: hidden does not seem to be working correctly. (i know display: table only works in FF, but this is an internal tool, so no need to make IE fixes yet) ... now, when i change display: table to display: block, the overflow works, but now the #items div is no longer relative to the container, but relative to the window. This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and of course, it displays at it should in IE6: http://computerslayer1.spymac.com/formpics/IE---1.gif http://computerslayer1.spymac.com/formpics/IE---2.gif In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing. http://computerslayer1.spymac.com/f...s/opera---1.gif http://computerslayer1.spymac.com/f...s/opera---2.gif Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8. http://computerslayer1.spymac.com/f.../firefox--1.gif http://computerslayer1.spymac.com/f.../firefox--2.gif Any ideas, guys? I'm stuck. I have a table whose class is "dogs" How do I make all the <tr> elements within the table dogs have a certain style and not all the <tr> elements on the page? I'm trying to cleanup my html code by using more css. What would be correct way to replace spacing between table rows like this one: Code: <tr><td> </td></tr> to something "css" Thanks! 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. I am displaying data from mySQL in a table. I am having a problem controlling the width of the columns. I am trying to replace code like this: <td width="100px><?php echo $row_rsList['taskpriority']; ?></td> with a css style <td id='pcol' ><?php echo $row_rsList['taskpriority']; ?></td> where td.pcol { width: 100; } But when I display the table it seems to disregard the width setting. The only other table formatting I ahve done so far is this: table { margin:0; padding:0; } table th { vertical-align: baseline; font-size: x-small; font-weight: bold; font-variant: small-caps; background: #CCCCCC; text-align: left; } Thoughts? Hi everyone! I'm taking my first CSS class and am running into some problems formatting a table. Specifically getting the rows to line up center along with the table headings. Well, except for the first one that should be left aligned. This is my validated CSS code: Code:
.cell-alpha {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
width: 85%;
}
.cell-bravo {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
text-align: center;
}
tbody tr.odd {
background-color:lightyellow;
color: red;
}
tbody tr.even {
background-color:red;
color: white;
}
tbody tr.total {
background-color:#6699FF;
color: yellow;
}
table {
table-layout: fixed;
width: 700px;
}
How would I get each column centered since the data is entered in table row sections? Also, how to get all of the headings to line up baffle me. This is how it SHOULD look : URL And this is how its rendering with my CSS: table Check out the following code. Notice how the dark blue cell has one thin layer peeping through right inside the black border of the outer table? I can't figure out why. What this should look like is a black border, followed by a border of 3 white thickness all around the light blue cells, as well as between the light blue cells. Fixing this peeping cell in a way in which it is sucked out is fine - but if you have a better solution as to how to make the white spacing 3 around the cells AND the table, with a black border, I will accept. Thanks Code:
<html>
<head>
<style type="text/css">
.table1
{
border-collapse: collapse;
border: 1px;
border-style: solid;
border-color: #000000;
background-color: #FF0000;
}
.table2
{
border: 1px;
border-style: solid;
border-color: #FF0000;
border-collapse: collapse;
width: 300px;
}
.cell1
{
background-color: #0099ff;
border: 0px
border-style: solid;
}
.cell2
{
border: 3px;
border-style: solid;
border-color: #FFFFFF;
background-color: #95caff;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td class="cell1">
<table class="table2">
<tr>
<td class="cell2"> </td>
</tr>
<tr>
<td class="cell2"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
|
|||||||