|
CSS - Display:table & Ie 9
I am trying to organize some DIV's like a table, because the data being rendered is a series of footer menu's, not a table.
It works fine in Firefox 7 alpha Google Chrome 12 Opera 11.50 Safari 5.1 But... as usually, Internet Explorer 8 and Internet Explorer 9 suck the big one and display my list as a straight vertical list, where the rest display it horizontally. Anyone have any recommendations? my css code: Code:
div#footer-menu {
display:table;
width:960px;
}
div#footer-menu-row {
display:table-row;
}
div#footer-menu-row div.footer-menu-cell {
display: table-cell;
}
in my HTML I have Code: <div id="footer-menu"> <div id="footer-menu-row"> <div class="footer-menu-cell"> <h2><a href="#">Cat 1</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 2</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 3</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 4</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 5</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 6</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 7</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> </div> </div> Similar TutorialsHi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks I want to have the functionality of this page
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bug Tracker | View All Active Bugs</title>
<script type="text/javascript">
function toggleCard(card) {
var o = document.getElementById(card);
o.style.display=(o.style.display == "none")?"block":"none";
}
</script>
<style type="text/css">
h2 {
border: 1px 0 0 0 solid #000;
background-color: #eee;
margin: 0px;
padding: 2px 2px 2px 15px;
font-size: 1.0em;
}
p {
margin: 2px;
padding: 0px;
}
</style>
<script src="inc/js/sorttable.js"></script>
</head>
<body>
<h2 id="head1" onclick="toggleCard('card1')">Click Me</h2>
<div id="card1" style="border: 1px solid #000; display: none"><p>Click should display me!</p></div>
</body>
</html>
But instead of using a heading element (h2) I would like to use a table row to display the new div. However, when I do this, the newly displayed division messes with the spacing for the table columns and also in firefox it will leave the display space for the div blank and continue to repeat this each time the row is clicked. I've looked for similar problems with google, but haven't dug anything up. Any pointers? I've recoded my previous version which fixes a span problem, but end up with the rows not being able to use different widths & the image spanning the column width from the first row... div.bg_tp_lt = row 1 @ 105px div.bg_ct_lt = row 2 @ 53px div.bg_bt_lt = row 3 @ 68px So if you can either see what I'm doing wrong or provide a more reliable method it would be greatly appreciated. Thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$var</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/styles2.css" media="screen" />
</head>
<body scroll="no">
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td bg_tp_lt"></div>
<div class="td bg_tp_ct"></div>
<div class="td bg_tp_rt"></div>
</div>
<div class="tr">
<div class="td bg_ct_lt"></div>
<div class="td bg_ct_ct"><div class="content">$content</div></div>
<div class="td bg_ct_rt"></div>
</div>
<div class="tr">
<div class="td bg_bt_lt"></div>
<div class="td bg_bt_ct"></div>
<div class="td bg_bt_rt"></div>
</div>
</div>
</div>
</body>
</html>
Code:
div.table {
display: table;
border: 1px solid #DDDDDD;
padding: 0px;
width: 404px;
}
div.thead {
display: table-header-group;
}
div.tbody {
display: table-row-group;
}
div.tr {
display: table-row;
}
div.td {
display: table-cell;
border: 0px solid #DDDDDD;
padding: 0px;
}
div.bg_tp_lt {
width: 105px;
height: 60px;
background-image:url(images/stl.jpg); no-repeat;
background-color: #000000;
}
div.bg_tp_ct {
width: auto;
height: 60px;
background-image: url(images/st.jpg); repeat-x;
background-color: #000000;
}
div.bg_tp_rt {
width: 105px;
height: 60px;
background-image: url(images/str.jpg); no-repeat;
background-color: #000000;
}
div.bg_ct_lt {
width: 53px;
height: 150px;
background-image: url(images/sl.jpg); repeat-y;
background-color: #000000;
}
div.bg_ct_ct {
width: auto;
height: auto;
background-color: #000000;
}
div.bg_ct_rt {
width: 53px;
height: 150px;
background-image: url(images/sr.jpg); repeat-y;
background-color: #000000;
}
div.bg_bt_lt {
width: 68px;
height: 64px;
background-image:url(images/sbl.jpg); no-repeat;
background-color: #000000;
}
div.bg_bt_ct {
width: auto;
height: 64px;
background-image: url(images/sb.jpg); repeat-x;
background-color: #000000;
}
div.bg_bt_rt {
width: 68px;
height: 64px;
background-image: url(images/sbr.jpg); no-repeat;
background-color: #000000;
}
/* Little hack for IE */
* html div.td { display: inline; }
I recently relaunched our web site and, trying to stay with the times, use CSS as much as possible for layout purposes. The one place I still use a table for layout is in the top navigation bar, which includes a search form. I would like to eliminate the table and use CSS for styling the top navigation bar, but am not sure how. I want the pages to hold up in IE 5.0+, Mozilla, Netscape 6+, Firefox and Safari and to be tolerable in Mac IE 5.x - a tall order but manageable I think. Can this be done? Am I stuck with a layout table here? Any help is appreciated. You can see an example web page at: http://www.cambridgema.gov/~CDD/ The HTML is in the attached file. Hello, I got a website with a table on it. This is how it looks in firefox 2.0: http://img139.imageshack.us/img139/9822/helpffkr6.jpg And here's how it looks in IE6: http://img111.imageshack.us/img111/9675/helpiehi7.jpg As you can see, where FF do display the table border, IE does not. Here's the simplified table code and the related css code: Table -> Code: <table class="listings" style="width: 100%;"> <tr> <td colspan="2" class="darkRow">Category 1</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 1</td> <td style="width: 70%" class="lightRow">This is thread number 1.</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 2</td> <td style="width: 70%" class="lightRow">This is thread number 2.</td> </tr> </table> CSS code -> Code: <style type="text/css">
table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
.darkRow{
background-color: #4D3D4D;
border-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow{
background-color: #BFACBF;
border-color: #4D3D4D;
color: #4D3D4D;
padding-left: 4px;
}
</style>
It seems as if IE doesnt support borders around a whole row, because when i add this: Code: table.listings td{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention. Does anybody have an idea what i can do about this? thanks in advance. 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 Hello, I use the following css code to define the style of some tables. However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code: table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
}
.darkRow td{
background-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow td{
background-color: #BFACBF;
color: #4D3D4D;
padding-left: 4px;
}
I create the tables something like this: Code: <table class="listings"> <tr class="darkRow"><td>bla</td></tr> <tr class="lightRow"><td>bla</td></tr> </table> Why does it display so much different in those 2 browsers? Hi all, I have a table that contains regular numeric data. When the user clicks/hovers over each entry of the right most column, I would like to display a hidden div with some sort of description of that data. I would like this information to display to the immediate right of the last column of data, but not in the table itself. Any ideas? Thanks I've dabbled with the display: table properties for awhile, and I've looked forward to the time I could use them at work. Equal height columns! No more faking it with extra wrapper div's and background images! As we're finally rolling out IE8 at work, I decided to take a pretty typical layout that I would have laid out years ago in a table. Header, footer, nav and content, that is always at least the height of the page and will expand with more content: http://www.richarddoyle.net/tests/css_table/table.html This could be done using floats, background images, etc, but I wanted to take advantage of what display: table could offer me. So I tried to recreate the same layout. I knew there was no colspan in CSS, but I was sure I could get it to work somehow. My first attempt showed the colspan issue: http://www.richarddoyle.net/tests/css_table/cssversion1.html My second attempt I couldn't get the page to match at least the height of the browser: http://www.richarddoyle.net/tests/css_table/cssversion2.html Is this just impossible to do with display:table properties? Is there some mixture of table properties and sticky footer code that can make this work? 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. gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? Hi all, I dnt want to retype my situation, i put my 1st thread in the wrong forums. U can read up on what my query is in this link http://forums.devshed.com/t188904/s.html Thanks all Jim I'm sure this can be fixed... But I'm not sure how! I was doing the final adjustments and cross-browser tweaking when I stumbled upon this issue... I'm using a CSS with the following background tag: Quote: background: #E8E9EA url(img/test.png) repeat-x 0 8px; My PNG is 32bits, and of course, this works OK in Firefox, etc.. But not in MSIE! ( tested under 6.0.2900.x ) - Instead of correctly blending the PNG with the table background, it displays full white rects as backgrounds. I tried a few ms-ie "holy" fix scripts, etc. None of them worked on this special case. Any ideas?. I wouldn't like to work-around this one... Thanks. I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm 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 hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) 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. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. |
|||||||