Good afternoon Stackoverflow gurus,
I wish I could show you the exact code for this issue, but I work in a secure area. I can show you an example.
Here's my CSS
table tr.header{
background: url('image.jpg') 0 0 repeat-x !important;
}
table td{
background: none !important;
color: #FFF !important;
}
td.special{
background:url('image2.png'); 0 0 no-repeat transparent !important;
color: #FFF !important;
}
The reason for all the importants is that I'm attempting to overwrite a systems god awful bland CSS; simple colors, narrow heights and no pizzazz whatsoever.
Here's my generic HTML
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="header">
<td>HEADER TITLE</td>
<td class="special"></td>
<tr>
<td>TABLE CONTENT</td>
</tr>
</tbody>
</table>
I apologize for the <tbody> tags, but the system automatically puts <tbody> tags in every table.
The problem I'm running into is only in IE8, I have a set image for the table row class "Header" and the all Table Data to show as NO background, but IE8 like to fill the TABLE DATA with white. I can see the background image of the table row if I go into Developer tools and turn off the CSS for the table data, but there shouldn't be anything in there anyways...
How can I force the table data (except for the one labeled "special") to be 100% clear and transparent in IE8?
How can I force the table data (except for the one labeled "special")
to be 100% clear and transparent in IE8?
Put the following code in an external stylesheet named ie8.css.
table,
table td {
background: transparent;
}
table td.special {
background: url('image2.png'); 0 0 no-repeat transparent;
color: #FFF;
}
Then add this code to your page.
<!--[if IE 8]><link rel="stylesheet" href="ie8.css" /><![endif]-->
background-color:transparent should work, but it doesn't dig through elements that are under it. If an element under it has a colour, you'll see that colour.
Try putting :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
at the top of the document (before the <HTML> tag). It fixed this problem for me (and moved a load of stuff round too! I hate IE8!).
Related
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:
I need help in this:
if i try to integrate this on a newsletter mailchimp the lines goes down here is the screenshot:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic4.png
can someone help me why is this happening?
if I test this in a textpad it looks good, and if I try to put the code now in mailchimp, it the lines are reformatted. any idea?
thanks
Add
border-top: 1px solid #000;
To the style attribute for the <td> tags.
You can change the color to anything you want obviously and you may want to look into using external CSS stylesheets.
Something like:
td { border-top:2px solid #fb0 }
td { padding-left:25px; padding-bottom:10px; padding-top:10px; width: 30% }
tr.alt { background: #ffc }
the row to have the background will use
<tr class="alt">
it is also common practice to put all the style in a css file or in the separate <style> tag region.
sample: http://jsfiddle.net/2LXUn/2/
If you want a table, with only border at the top, the following will work.
<table style="border-color:#008000;border-style: solid none none none;border-width:2px; width: 100%">
<tr> <td > row1</td>
</tr> <tr >
<td>row2</td> </tr>
</table>
You may also apply the border style to table rows as required.
I have a <table> with <thead> and <th> tags.
Both <thead> and <th> tags have background images. background image of <thead> is repeated and background image of <th> is positioned on the left side of the cell.
In Firefox it works fine but in IE (my IE is version 7) the background image of <thead> is not displayed. If I remove the background image of <th> then the background image of <thead> appears.
Any suggestion?
EDIT:
Here is my simplified code:
<table>
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
<th>CCCC</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
</tbody>
</table>
<style>
thead {
background: url(PATH TO MY IMAGE) repeat-x center /*this image is not displayed in IE*/
}
th {
background: url(PATH TO MY IMAGE) no-repeat left center
}
</style>
Starting from this question and modifying the answer:
<style>
table {
border-collapse: collapse;
background: url(PATH_TO_THEAD_IMAGE) repeat-x center;
}
tbody {
background: #fff; /* This covers up most of the <table> background */
}
th {
background: url(PATH_TO_TH_IMAGE) no-repeat left center;
}
</style>
Gives a reasonable approximation of what you're probably trying to achieve. This seems to work pretty much the same in Firefox and IE7, I didn't check Opera/Chrome/Safari/IE8 though.
You should put this sort of dirty kludge into an IE7-specific stylesheet and load it with an IE7-specific conditional comment so that you don't litter your CSS with IE7 kludges.
This is just one of IE's table-related bugs...
I suggest adding display:block; to thead, or styling "thead tr" instead.
This isn't a complete solution, but I can't post comments yet.
IE seems to apply the thead rules to the th elements. Change the 'repeat-x' to 'no-repeat' and set the width for th and td to something much wider than your background images and remove the th background image. You'll see the thead image repeated in each th ... So when you enable the background image for th, you're essentially overriding thead's background image. This is definitely not correct behavior, but there you go.
So, if you can, the best option might be to just back off and get that background image in there some other way. Maybe you can apply it to the table instead and use 'top' to position it?
I want to display a page with no scrollbar (height:100%). I have read suggestions to add this argument to html and body. But it does not work as I expect. In FF indeed I do not see a scrollbar. But in IE7 and 8 (Standards mode) there is a scrollbar. In Quirks mode it works as expected. Please take a look at this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0053)http://apptools.com/examples/tables/standardscss.html -->
<html><head><title>standards compliance mode with css rendering</title>
<meta content="text/html; charset=iso-8859-1" http-equiv=content-type>
<meta content=no http-equiv=imagetoolbar>
<meta name=mssmarttagspreventparsing content=true>
<style type=text/css>body {
padding-bottom: 0px; background-color: #fff; margin: 0px; padding-left: 0px; padding-right: 0px; color: #000; padding-top: 0px
}
table {
border-bottom: #008 1px solid; border-left: #008 1px solid; border-top: #008 1px solid; border-right: #008 1px solid
}
html {
height: 100%
}
body {
height: 100%
}
.fullheight {
height:100%
}
</style>
<meta name=generator content="mshtml 8.00.6001.18876"></head>
<body>
<table width=450 bgcolor=#ccccff align=center height="100%">
<tbody>
<tr>
<td colspan="2" height="200px">
<p>paragraph</p>
</td></tr>
<tr class="fullheight"><td >
<p>paragraph</p>
</td>
<td>
<p>paragraph</p>
</td>
</tr>
</tbody></table></body></html>
Umm... what you're asking can get into complicated territory, but I'd start with eliminating inconsistencies in your code. For example:
Your table is 100% height.
Inside, you have a 200px high <td> inside one <tr>
Inside, you also have a 100% high second <tr>
So you're telling the code that 100% + 200px = 100%. That fails logically, although you might want to hack your code that way sometimes.
First, try adjusting the properties so that they work logically and try to reduce your code to greater simplicity, and then work your way up from there. After that, if a scrollbar still appears, you'll probably need to start tweaking with negative margins. This will get so "intimate" with your code that frankly anyone advising you would need a clear sense of your objectives, rather than advising on individual code elements.
If the problem is the scrollbar, you can use the CSS "overflow" attribute in order to force the behavior:
visible: the overflow is not clipped.
It renders outside the element's box.
This is default;
hidden: the overflow is clipped, and
the rest of the content will be
invisible;
scroll: the overflow is clipped, but
a scroll-bar is added to see the rest
of the content;
auto: if overflow is clipped, a
scroll-bar should be added to see the
rest of the content.
Given the following HTML page a horizontal line appears at the top of the table where the 1st row would have a 2nd and 3rd cell (if they were defined).
<html>
<head>
<Title>Test Page</Title>
<style type="text/css">
table {
margin:10px 0 10px 0;
padding:0;
margin: 0 0 0 0;
border-collapse: collapse;
border: 0;
}
td {
border:1px solid #CCCCCC;
padding:5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Test Title</td>
</tr>
<tr>
<td>Sub Title</td>
<td>Sub Title</td>
<td>Sub Title</td>
</tr>
<table>
</body>
</html>
I would like the line (highlighted below) removed by modifying CSS only. This line appears in Firefox but not IE6.
Note that I cannot modify the HTML in any way as this is generated by a third party system (the example above is simply to highlight the issue). This third-party system only allows me to modify the CSS.
This will get it to render without the top border in Firefox:
table, td {
border: 1px #CCC;
}
table {
margin: 0;
border-spacing: 0;
border-style: none none solid solid;
}
* html table {
border-collapse: collapse;
}
td {
border-style: solid solid none none;
padding: 5px;
}
It also works fine in IE7 for me. If it breaks in IE6, use conditional comments or css hacks to revert it to the state it was in your own code for IE6 only.
EDIT: Your third party tool is generating bad/invalid markup which will give you a very large browser compatibility/css headache, if it is at all feasible, replace it or generate the html yourself
Technically speaking the first row should be marked up as
<tr>
<td colspan="3">Test Title</td>
</tr>
So I don't think you can acheive that using tables.
A css tip
margin: 10px 0;
Puts 10px at the top and bottom and 0 on the left and right
The empty-cells property may help you in this case.
table {
empty-cells:hide;
}
Then again, maybe not. Can you also explicitly turn off the border of the table rows?
Is using javascript an option? You could inject a non breaking space into the cell, that should draw the border.
Here is the solution for this problem that really works. I found this out after sooo long
The problem is with tbody tag.
Check the solution here:
http://www.dashplanet.com/firefox-displaying-border-top-of-table-how-to-hide-that-1px-top-border-table
From Firefox Colspan Border-COllapse Bug:
The obvious workaround is to just set
the colspan before the DOM has
finished loading, or at minimum,
before the table has finished
rendering. However, this requires that
we clutter our otherwise clean HTML
with inline tags, or have
prior knowledge of the number of
columns at the HTML generation stage.
I hope to find a more elegant
"non-invasive JavaScript" solution in
the future, but at the current time I
don't know of one. Simply setting the
table's "display" style to "none" and
then re-setting it back to "block" did
not do the trick.