Pretty weird, fine in all other browser but in IE7 the background colour is not showing the css for the table is as follows.
#warrentyFormTable tr.error { background: #ffe2e2; }
If you use some kind of CSS Reset and the background-property is set to transparent for the td-element, this causes IE6/7 to trouble.
Try only resetting these things you really need and remove td from that list.
Further information on this site:
http://www.sitepoint.com/forums/showthread.php?683598-Table-Cell-Background-Color-Issue-with-IE7-and-IE6%3E
It just wont manage TR styling
Try this :
#warrentyFormTable tr.error td {background: #ffe2e2}
carry on
Related
I'm attempting to style the jQuery UI tabs as vertical tabs, but styled slightly differently to the Vertical Tab Demo that they provide.
I'm trying to achieve this:
But the best I can get is this:
You'll notice that the color of the bottom border of the tabs matches the text color, but I really want the border to be consistent around the entire tab.
I could just add a css line in like this:
.ui-tabs-vertical > .ui-tabs-nav li {
border-bottom-color: #C5DBEC !important;
}
But I don't want to hard-code any colors as they are provided by the jQuery UI theme roller, so if I decide to change the theme, or have different themes for different branding of my website, then this will become a nightmare to maintain.
Looking a bit deeper into the problem, it seems that the standard jQuery UI theme css does this:
.ui-tabs .ui-tabs-nav li { border-bottom: 0 none; }
And this is because the whole thing is setup normally for horizontal tabs, which need the bottom border removed. I can't remove this because it's part of the generated theme roller css. I don't think that this should change the border-color property because only the first two of the shorthand border are specified (i.e. width and style). So I would expect the border-color to not be overridden here, but in fact it is, and it's setting it to the font color.
What I've done to attempt to revert this css line is this:
.ui-tabs-vertical .ui-tabs-nav li { border-bottom: 1px solid !important; }
Note that again, I'm not touching the border-bottom-color here.
The result of this, at least in firefox, is this taken from firebug:
For some reason, it looks like the color is being set back to the default browser color, even though nothing touches border-bottom-color. I just want the color from .ui-widget-content .ui-state-default to come through, but I can't work out how to do it.
Using inherit doesn't work because I don't want to take the color from a parent element in the DOM.
Here's a jsFiddle showing my problem. Can anyone help me get a maintainable, solution?
Use #hexblot's answer and get the color dynamically.
To do this create a faux item, apply the jQuery class you want and after that use .css() to get the color. Simple as that.
+1 for trying to find a clean solution, without hardcoded stuff.
just add
.ui-state-active { color: #2E6E9E !important; }
and you should be ok. updated the fiddle with this line in the CSS (last line).
I am having trouble getting my CSS to look right. I want alternating colors in my table, but it doesn't seem to be working. Here is my CSS:
table.className tbody tr:nth-child(even){
background-color: white;
}
table.className tbody tr:nth-child(odd){
background-color: grey;
}
Your code looks good. Could be two things, your version of IE that you are using is to old (IE8 and below I believe doesn't support this), or you have these styles being set elsewhere with a !important attached to them.
Without seeing the HTML, there are a couple of possibilities:
The class name doesn't match
The tbody tag is missing (either way, tbody isn't needed in the CSS selector)
There are a couple of reason as to why this may not be working for you. First the CSS code that you are using is CSS3 and may not be supported in the browser you are using: http://www.impressivewebs.com/css3-browser-support/
Another reason this may not be working is that you have included the "tbody" tag in the CSS which indicates that your html table is setup as such. This is actually a tag that some developers forego, if you html table does not have a "" tag then you must remove it from the CSS in order for this to work.
Given that its been established that you are using IE8 which doesn't support :nth-child in CSS, you can achieve the same thing using jQuery for better cross-browser support:
$(function() {
$("table.className tr:nth-child(even)").css('background-color','white');
$("table.className tr:nth-child(odd)").css('background-color','grey');
});
http://www.geneseo.edu/new_social_media_test
I am working on a new social media page for my school, and I cannot get rid of this border within my table. Under the <thead> and above the <tbody> there is this grey line that I can't seem to target. I have turned off table borders in the html and in the css, but nothing works. I can't figure out where it is coming from and its driving me crazy. Is it something from a global CSS file? Maybe one of the social media plugins at the top are messing with it? I'm out of ideas; any help would be greatly appreciated.
Also, in Firefox (8.0.1 :: Mac OS 10.7), the row colors flicker when the fade is over. Absolutely no clue on that one, either.
If you are looking at the code, sorry it is such a mess. I'm new to drupal, I don't have privileges to create my own CSS files, so I had to do everything inline.
Thanks!
Edit: Here is a screenshot to clarify: http://i.imgur.com/dOcoE.png. I also forgot to mention that when I am in preview view in Drupal, the color turns to a light blue, but not a color I have defined anywhere (like this: http://i.imgur.com/WWF0e.png).
The border is set on the th, not the thead or tr. There are a couple rules in css_4ea78c62a1f11df9a1a23dfccad4464e.css that target th, creating a bottom border:
th{text-align:left;padding-right:1em;border-bottom:3px solid #ccc;}
tbody th{border-bottom:1px solid #ccc;}
thead th{text-align:left;padding-right:1em;border-bottom:3px solid #ccc;}
Note that !important is intended only for user agent stylesheets. Use the cascade and selector specificity. Since the stylesheet that disables the bottom border is loaded after css_4ea78c62a1f11df9a1a23dfccad4464e.css, all you need is:
table th {
border-bottom: none;
}
You may need to limit the selector to target the chart more specifically, if there are other tables that you want to keep the border.
I found this CSS:
tbody {
border-top: 1px solid #CCC;
}
I disabled it in Chrome's developer tools, but it didn't have any effect. That's all I can find related to the table though, try removing it from your styles, if you can. Or overriding it.
It's this line, it's in your CSS doc.
thead th
{
text-align:left;padding-right:1em;border-bottom:3px solid #ccc;
}
I have been reading these forums for some time, but this is my first question :)
The question is related to styling tables. If you look at my page in Chrome, at the bottom left of my table and the bottom left <td> tag, I was able to hide the borders the using visibility:hidden; But, in Firefox, the <td> still shows these borders. I have found that Firefox doesn't like the visibility attribute.
http://allramhosting.com/new/shared-3/
.hide
{
visibility: hidden;
}
<td class="hide"> </td>
Does anyone know a way around this that will work in multiple browsers? I also tried border-color:white; in the <td> on <tfoot> and that almost works; it keeps the very bottom border line visible.
Use
.hide { border-style: none; }
or
.hide { border: none; }
on your tds or
.tableClass{ border: none;}
if your table has class tableClass.
Have you tried setting the border-width to zero?
Have you tried:
display:none
I find that works to hide things far better without side effects.
As an FYI I have found issues with proper size rendering when you start hiding "parts" of tables. Meaning that I have seen the browser (including chrome) not render the rest of the document properly or hang things off the end of the document when you hide parts of a table. If you hide the whole table it seems to figure that out fine.
I once worked around with the following trick:
Depends upon what you want to achieve in styling, but generally, setting relevant element's (color/background-color/border-color(in this case)) to 'transparent' usually works across browsers.
hope this helps someone.
Suppose I have something like this:
<table class="myTable">
<colgroup span="2" /><colgroup span="2" />
<tr><td>........</tr>
And so on...
Then on the stylesheet:
table.myTable colgroup
{
border-right: solid 5px #ffffff;
}
The point being that I want some space to separate colgroups in my table.
It's working fine in Firefox and IE8. I already read everywhere that IE7 does not implements borders for colgroup, but here is a call to your imagination and creativity, does anyone have an idea of how I could achieve a similar result in IE7, without adding a class to every cells or generating empty cell...
Here's an exemple of the result in Firefox 4 : http://imageshack.us/photo/my-images/853/capturezz.png/
The headers generated can be litterally of any form, some case are really complex. This is why the colgroup solution is interesting, since it is quite simple to calculate the needed span.
Every suggestions will be appreciated.
Don't have much experience in IE7, but this might work:
You can check if it is possible to set a background-image. And align that image (with the desired color) to the right side of the cell, making some kind of a fake border look.
In chrome setting a border on a colgroup doesn't work eighter. Setting a background-image does work.
Greetz,
XpertEase
In order to use the border property in tables, you must set the following rule. If not you wont get them
table {
border-collapse:collapse;
}
Then you will get borders working as you pretend