|
CSS - Alternative To Display:table-cell
Hello,
I am using a series of nested ULs to display information in a kind of tree structure with some DHTML involved to make it behave pretty. What I am trying to achieve is to have the information in the LI elements well spaced apart, using <span>s. Since these elements are inline I cannot give them a specific width. A workaround that solves the problem in using the property display:table-cell and then I can give it a width. Of course this doesn't work in IE. Could someone please suggest an alternative way of achieving the following: Code:
<ul id="tree">
<li id="node1">
<a href="#">
<span>CB200801</span>
<span>02/03/2007</span>
<span>IPS20003</span>
<span>17.58</span>
<span>3.08</span>
<span>0.00</span>
</a>
<ul>
<li id="node2">
<a href="#"><span>12028077</span></a>
</li>
<li id="node3" >
<a href="#"><span>12046086</span></a>
</li>
</ul>
</li>
etc etc
and then I give the <span> the display:table-cell and a width. In Firefox this is giving me the visual layout I require. Can something be done to help IE? Thanks in advance Andy Similar TutorialsI 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 Hi guys, I've recently been updating a flash games site, but i ran into a little problem. Check out this page: Spank the monkey The size of the game is so big in width, that it overlaps the "Related" box. (I currently have overflow set to "hidden", so you cant see it now). Back when a table was used for that portion of the site, whenever a game was too big, it pushed the "Related" box outside of the main container. How can i achieve a similar effect with CSS? Regards, I have worked as a web developer for two years now, and yet I still have not found a satisfactory solution to the problem of table-less layouts. Table-less layouts always end up needlessly complicated or full of CSS and other hacks. Here is the challenge for you all. I have a very simple table layout with header, left nav, main content, and footer: http://brentonboy.com/misc-pages/layouttest.html I am trying to figure out if there is a way to replace the table with CSS stuff only while meeting all of the following requirements: Must be a simple solution with as few HTML elements as possible. Must look and behave the same as the example table. Thus: When the content area is taller than the left nav, the blue of the left matches the height of the content exactly, and the footer drops down nicely below. When the left nav area is taller than the content area, the green of the content area matches the height of the left nav exactly, and the footer drops down nicely below. The solution uses new HTML and new CSS only... not looking for a javascript solution or something else. Do not make use of CSS hacks or any other hacks. All code must be valid. Do not make use absolute positioning: in case I need to center it or do some other fluid thing later. Also avoiding relative positioning would be great too. Must work flawlessly in every browser, just as the table does. Basically, I don't think it's possible to meet all of those requirements, which means that layout tables are better. Please prove me wrong! 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 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. 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>
Hi. I've got a question regarding placing an image within a table cell and using CSS to achieve a certain result. The table cell's width is determined at 530px, but the height is dependent on the actual length of the copy. What I'm looking to accomplish is have an image ghosted in the background of the text. It is supposed to appear in the lower right hand corner of the cell. I've already created the image with a transparent background, but it's not implementing correctly. Can I use a Z-Index style to achieve the item being placed under the text? Also, how do I make sure that the image is positioned in the lower right hand corner of the cell regardless of the height of the cell? Thanks! Simon315 hi all... i have a table cell "td" with 3 divs in it. what i need is to get it to align the top div to the top, middle div to the middle and 3'ed div to the bottom... this is all fine but i cant get to do that, and the auto increase height on the middle one dont work ? btw: this is for the IE style sheet, mozilla(firefox) works great.... frank/ 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. Hello, I have a table and I am styling its cells: table.Grid td {background-color: red;} Inside this table I will have some other tables but I don't want their cells to have the styles changed. I see two options: give a class to Grid table cells: table.Grid td.Grid {background-color: red;} Reset the changes in child tables: table.Child1 td, table.Child2 td, table.Child3 td {background-color: white;} But can I apply the following style: table.Grid td {background-color: red;} And make it only for the cells inside that table but not inside the child tables in this code line? ... without needing to reset the styles on child table cells or give main cells a class ... Thanks, Miguel hi all, i'm trying to make a vertical menu using CSS2 and XHTML. the problem i'm facing is that i need a DIV inside a table cell, which should take 100% width and height, and inside this DIV i will place arbitrary contents that scrolls if they overflows. This is the code i have written so far: 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>
<title>
TestMenu
</title>
<style type="text/css">
BODY, HTML {
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.menuContainer {
background-color: red;
width: 300px;
height: 100%;
border-spacing: 0px;
}
.menuItem {
background-color: green;
}
.menuItemOpen {
background-color: yellow;
}
.menuItemContents {
margin: 0px;
padding: 0px;
vertical-align: top;
}
.menuItemContainer {
height: 100%;
width: 100%;
border-spacing: 0px;
}
.menuTitle {
background-color: blue;
color: white;
height: 20px;
margin: 0;
padding: 0;
}
.menuContents {
padding: 0px;
}
.menuInnerContents {
background-color: orange;
overflow: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table class="menuContainer">
<tr class="menuItemOpen">
<td class="menuItemContents"><table class="menuItemContainer">
<tr>
<td class="menuTitle">Item 1</td>
</tr>
<tr>
<td class="menuContents"><div class="menuInnerContents"><div>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/></div></div></td>
</tr>
</table></td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 2</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 3</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 4</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 5</td>
</tr>
</table>
</body>
</html>
as you can see the "menuInnerContents" DIV isn't taking all the space available and the text inside it doesn't overflow. Help me please! Hello, I have too work with 3rd party code which I am not allowed to modify. It is .jsp code that calls(includes) a header file which I am alloud to modify. However the header unfortunatly is trapped inside a table cell that is 540 px wide but I want my header to span the full width of the page. I built the Header.jsp with a css layer. If I set the layer property to width=100% well 100% of 540 is 540 so it comes out short. If I set the absolute px width than at 860 screen resolution the header gets cut off. Here is some 'view source' code to just generate the .jsp to html: </head> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <!------------------------------The Login Page calls itself to verify login info and then redirects---------------> <TABLE width="540" border="0" cellspacing="0" cellpadding="0" > <TR> <TD align="left" valign="top" nowrap> <form NAME="Login" onSubmit="return checkRequired()" ACTION="LoginValidate.jsp" METHOD="post"> <input type="hidden" name="finalize" value="0"> <!------------------------------------------------------HEADER---------------------------------------------------------> <p> </p> <div id="Layer1" style="position:absolute; width:100%; height:115px; z-index:1; top: 0;"> <table border=0 cellpadding=0 cellspacing=0 align="center" width="100%"> Blah blah blah. So you see that a 100% table is created then a 540px table with the 'include/header.jsp' code. So Basically is there a way to break out of the table cell? I understand 'float' allows you to overide the inherited structure but it does'nt really apply here? here is a url: URL The header at the top needs to span the whole page. The header file is the upper blue banner as well ast the light blue faded banner logo. Thanks in advance... 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 hi all ! Im doing a calendar and I want to make the cell "TODAY" different from the rest. So far I have to sets: Code: .dayrow {
background: #FFF;
height: 20px;
}
And today Code: .today {
color:#007eff;
height: 20px;
}
And the PHP code that controls it: PHP Code: if($col==1) $xml.="\n<tr class='dayrow'>"; $xml.="\t<td valign='top' onMouseOver=\"this.className='dayover'\" onMouseOut=\"this.className='dayout'\" onClick=\"AfterDaySelected($cur,$month,$year,event)\">"; if($i <= ($days+($start-1)) && $i >= $start) { $xml.="<div class='day'><b"; if(($cur==$today[mday]) && ($name==$today[month]) && ($year2==$today[year])) $xml.=" class='today'"; $xml.=">$cur</b></div>"; Is there a way to overwrite the BG in dayrow with one I put in the today class? So all the days remain the same except for that one? Thanks a lot ! Hi, I am very new to CSS and was wondering if there is a way to angle text in a <TD></TD> cell of a table? My problem is that along the top of my table I have to list the times e.g. 12:00:00, 12:15:00, to 23:45:00. This makes the width of my table much bigger. I was wondering if its possible to angle the text so it stands ons its head - so to speak - that way the column width would be much smaller? Thanks in advance j 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 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 am not sure the best way to colour half a table cell? Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each? |
|||||||