This is my following table which is not working in IE 8.
The problem is when I am scrolling the table, the first column is getting fixed and remaining rows are scrolling above the first column. This is probably only in IE 8; it is working fine in Chrome and Firefox.
<table border=0 id="dataTable0" class='table_data' style="position:absolute; margin:0;table-layout:auto" width=100%>
<syn:outputData outputdata="#{DocDetailsBean.paraList}" ></syn:outputData>
</table>
This is my CSS file:
.table_data {
background-color:#F3F3F3;
color:#666666;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
Add table-layout: fixed to the 's style. Without it, applying width to a table cell is interpreted as min-width (a carryover from when min-width didn't exist)
I found two ways to solve this problem in IE8.
1) Adding extra td element of width: 0px to tr's of thead and tbody.
IE8 demo
2) Adding a hidden letter to content of after pseudo selector.
tr:after{
content: ".";
visibility: hidden;
}
I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)
<!--[if IE 8]>
<style>
/* the above css code here */
</style>
<![endif]-->
IE8 demo
I used the latter one because it is simple.
Related
For some reasons, I have to apply inline td width in a table, see lower part of table at this page using Chrome at this page
Firefox and IE seem to render this well, however, Chrome is rendering the width differently. Applying left and right paddings on tds, seem to have the same issues with Chrome.
Any ideas? Again, I need to do this inline. Global CSS seems to do render more issues with the site globally.
Try this
Remove width="" for all td's
and apply below css
CSS
.dataTables_wrapper table td {
padding: 0.5em 0 0em 0;
}
.view-footer td:first-child,
.dataTables_wrapper table td:first-child {
width: 120px;
}
The problem is allocating space for table column varying each browsers when you have not assign any width. so assign some width to your td will resolve the problem. Just add the following class in CSS to fix this problem.
#datatable-1 tr td:first-child
{
width:1%;
}
As part of redesigning a site, I am trying to style a table with css.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
I ended up with this:
<table class="table1">
.table1 {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: colapse;
padding : 0;
}
The weird problem: when applying the css style to the table, the result is slightly different. The space between cells is slightly larger.
Please see the jsfiddles:
Table not style with css: http://jsfiddle.net/32534/1/
Table styled with css: http://jsfiddle.net/47AUR/1/
Why the extra space between the text inputs? What am I doing wrong?! Thank you!
Edit: Using Google Chrome.
cellpadding affects td padding too, so simply add:
.table1 td{
padding: 0;
}
By default chrome adds it's default styling:
`border-spacing: 2px;` on the table.
In http://jsfiddle.net/32534/1/ you haven't mentioned any styling for table. Hence it's picking up default style of chrome.
But in next fiddle link: http://jsfiddle.net/47AUR/1/ you have specifically mentioned the style for the table, which overwrites the default style of chrome.
It's a good idea to use reset.css to be consistent across all browser's and ignore the default styling of all browser's
Simply add
td {
padding: 0px;
}
it will work with a padding:0 on the td (as that is what the cellpadding affects) elements and a second l to colapse
demo at http://jsfiddle.net/at4yL/
How do I remove the scrollbars but allow scrolling in internet explorer? It looks fine in FireFox/Chrome/Safari but it looks absolutely terrible in IE and is basically un-useable.
Here is my CSS:
<style type="text/css">
table
{
display:inline-block;
overflow:auto;
white-space: nowrap;
}
th, td
{
display:inline-block;
height:100px;
width:100px;
overflow:hidden;
white-space: pre-wrap;
}
th {
text-align: left;
}
td {
vertical-align: top;
padding-top:0px;
}
</style>
And here's a screenshot of my table in IE9-11 (they all look the same):
It's so hideous...
Here is a fiddle with the code http://jsfiddle.net/EZM6x/
Find the version of IE that it works in, and use this.
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=//put version here">
<![endif]-->
I would totally disable the scrollbar, and add a jquery event and use the animate or scrollTop function to achieve the results.
Or you can use a scrollbar plugin like tinyscrollbar and set the scrollbar's CSS to display:none
If you can not use jquery, you can still align the scrollable areas above each other to hide the scrollbars.
In my project, I am trying to make the tbody scroll in IE8. I know it can be scrolled by just giving overflow: auto to tbody. But this doesn't work in IE8. To make it work in IE8, the tbody must be given position: absolute (or float: left to both thead and tbody). If I make the overflow: auto work then the widths which I assigned to the th and td in percentages is being ignored. which in turn not letting the tr to occupy the full width in thead and tbody. Hence, there is a irritating space between tr and tbody/thead.
Please test this demo in IE8. (works fine in firefox and chrome)
and here is the code in fiddle.
Here are the strict points which I can't change
Width to td and th must be in percentages.
I can't change HTML markup
It must be solved using just CSS.
Actually, I did solve it with a dirty fix which is as follows
th:after,td:after{ /* only to the last column, first occurence */
content: "...................................................";
visibility: hidden;
}
The above code can also be checked by giving many dots to a specific td/th in developer tools
The above code looks ok but I need to give the :after pseudo selector only to the first row last column th and tr. If I give to every th and tr then the layout is messing up. and also the dots must be increased if the empty space between the tr and tbody is more. Then ofcourse this could be achieved only dynamically which I can't do in my current project.
PS: I maybe doing it completely wrong. I am just sharing my efforts where I reached very close to the result.
I found two ways to solve this problem in IE8.
1) Adding extra td element of width: 0px to tr's of thead and tbody.
IE8 demo
2) Adding a hidden letter to content of after pseudo selector.
tr:after{
content: ".";
visibility: hidden;
}
I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)
<!--[if IE 8]>
<style>
/* the above css code here */
</style>
<![endif]-->
IE8 demo
I used the latter one because it is simple.
The weird problem is borders disappearing when Opacity is applied in IE/8/9, but NOT in 7!
I've basically got a menu with tabs on top of the screen.
I.e:
<table>
<tr>
<td class="tab">button 1...<*/td>
<td class="tab">button 2....<*/td>
.
.
.
</tr>
</table>
<style>
td
{
opacity: 0.45;
filter:alpha(opacity=45);
.
.
.
}
td.tab:hover
{
opacity: 1;
filter:alpha(opacity=100);
}
Sorry about the stars, I couldn't get the code block formatting working right.
Basically this is just supposed to unfade the buttons when the mouse is hovered over them, but the borders just disappear! This problem only occurs on IE8/9, but everything works fine on IE7,FF,Chrome,Safari.
I've trawled the internet looking for some weird IE8+ border/opacity issues, but there don't seem to be any.
Has anyone encountered something similar?
The filter style is for IE7 and lower only.
IE8 requires you to use -ms-filter (ie with a vendor prefix) instead. Plus the syntax is more complex in IE8. It looks like this:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
IE9 drops support for filter entirely, and replaces it with standard CSS3 opacity, which works the same as it does in all other browsrs.
Quirksmode.org has the full details: http://www.quirksmode.org/css/opacity.html
This is what I discovered so far, I don't think removing background-color of your table cells could be a solution for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
table {border-top:1px solid #cccccc; border-left:1px solid #cccccc;}
table td {border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding:3px;}
table tr.opaque td {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100); opacity:1;}
/* By adding background-color below, the table borders cells disappears
in IE8. It's just the nth Microsoft's trigger tree!
IE7 does not have this issue. */
table tr.opaque td {background-color:#ffffff;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
<tr class="opaque"><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
<tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
</table>
</body>
</html>
And this is the beautiful result when background-color is applied on IE8: