Is IE 11 tr:active selector broken? - css

I can select and highlight td elements in IE but cannot highlight all td in a tr using tr:active. This works as expected in FireFox and Chrome. Here is a JsFiddle example, am I doing something wrong in the CSS?
Still doing it...
In Chrome, Safari, Opera and FF...
HTML
<body>
<br />
<div id="rowCount">
<table class='t2'>
<tr>
<th>Click a Cell should highlight all in the row</th>
</tr>
<tr>
<td>tr:active td</td>
<td>td:active</td>
</tr>
</table>
</div>
</body>
CSS
table {
cursor: default;
border: 1px solid black;
background-color: transparent;
}
div {
z-index: 0;
display: block;
border:4px solid #CC3300;
width: 80%;
background-color: #4D70DB;
}
th{
text-align: left;
}
td{
border: 1px solid #000000;
}
tr:hover td {
border:1px solid #CC3300;
}
tr:active td{
background-color: #CC3300;
}
td:active {
color: aqua;
}

This is correct, the tr:active is not working on IE11 and below. I have not tested on the Edge browser yet, but this is clearly a bug. It can be reproduced in IE9, 8, 7 as well.
After doing a bit of research, I found that most other browsers had this bug too before. See that bug report on Firefox (exactly the same problem).
I searched Microsoft Connect and did not find a bug report that was reporting exactly your problem. I created a new bug report that you can follow using this link.
Like some said in the comments of the topic post, another post on Microsoft Connect was also strongly related, you can follow this bug report here.
Thank you for pointing that out. It is a really good find.
PS: That is sadly the maximum I can do. Later today I will test on Edge to see if this problem is resolved on this new browser.
UPDATE
The Microsoft Edge Team contacted me to add:
"This issue appears to be fixed in MS Edge."

Related

CSS not working in chrome but does work in firefox

I have created a class called "titles" and for some reason it does not want to work in chrome. I looked at the page in Firefox and it was fine. Below is the code:
.titles {
font-size: 4.5em;
color: #154;
text-shadow: 1px 2px #000;
}
<h1 class="titles"><b>DREWSPLAINING</b></h1>
the change I made was adding the text-shadow. Prior to that, the CSS was fine. Now, even when I remove the test shadow portion it doesn't work properly.
It works fine. May be you should clear you cache.
As you can see in the demo, it works in all the browser. Might be you have added some css to the .title class on the other place.
Also you can try to clear cache.
.titles {
font-size: 4.5em;
color: #154;
text-shadow: 1px 2px #000;
}
<div class="titles">
Stack overflow
<div>

How to remove extra border spacing between TBODY elements?

IMPORTANT: This question is no longer valid. This bug was fixed in recent versions of Chrome.
I use border-spacing: 1px CSS rule to get all the cells in my TABLE to have a 1px spacing between them. However, I have to use multiple TBODY elements in my table. I get 2px between THEAD, TBODY and TFOOT elements (Chrome).
What's the easiest way to replace these 2px gaps with 1px?
Exact HTML and CSS code: http://jsfiddle.net/qQA3Z/
Note: This is a Webkit-specific bug. (Not present in Firefox, and as usual IE won't even load jsFiddle to test it.)
Unfortunately, there is no way to properly fix this. There is an open question on this very topic already. Additionally, there is an open bug report since Chrome 8 which has been confirmed to exist through Chrome 20 (and I can confirm in Chrome 25). There is also an open Webkit bug thread on this matter, which is still "NEW".
To be honest, I can't even find a workaround for this. Playing with border-spacing, margin, and even position don't seem to have an effect on this.
It would appear that there's a conflict between the border-collapse at table level and the children thead,tbody,tfoot. A possible workaround:
http://jsfiddle.net/qQA3Z/3/
body { margin: 10px; }
div {border: 1px solid #aaa; display:inline-block}
table {
background: #fff;
border-collapse: collapse;
}
td {
font-family: Tahoma;
background: #ddd;
padding: 5px 8px;
border:1px solid #fff
}
<div>
<table>
<thead>
<tr><td colspan='2'>Header</td></tr>
<tr><td>Column 1</td><td>Column 2</td></tr>
</thead>
<tbody>
<tr><td>Element</td><td>Element</td></tr>
<tr><td>Element</td><td>Element</td></tr>
</tbody>
<tfoot>
<tr><td colspan='2'>Footer</td></tr>
</tfoot>
</table>
</div>
This solves it for me:
table { border-collapse: collapse!important;}
What personally solved it for me was changing the line-height to 0
line-height:0;
border-spacing: 0

CSS to border <tr> entirely doesn't work properly in Internet Explorer

I'm using the following CSS to border a <tr> entirely.
<style type="text/css">
tr.top td { border-top: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
tr.row td:first-child { border-left: thin solid black; }
tr.row td:last-child { border-right: thin solid black; }
</style>
It works perfectly in Mozilla Firefox but in Internet Explorer, it doesn't border the last right <td> as shown in the following snap shots.
In Firefox, it displays the following table.
In Internet Explorer(8) however, it displays the table as follows.
Means that in the above CSS, this CSS class tr.row td:last-child { border-right: thin solid black; } doesn't work in IE. What is the solution to this? I'm using IE 8.
IE 8 doesn't support the :last-child pseudo class (CSS 3), but it does support :first-child (CSS 2.1)
CSS Compatibility and Internet Explorer
You'll need a different selector for the last cell such as a custom class name.
btw, what if you declare the border out of the css file, but instead after style, within the TD tag? I was told that IE8 has some bugs with border rendering. Post it here, and see if it works.
another doubt, why don't you use 1px instead of thin!?

Last-child selector with border still leaves th underlined

I would really appreciate some help.
I have a problem with html markup in asp.net, so, have to make workaround. For Firefox and Opera, everything is perfect, but Chrome on Safari still have one issue.
I want to make last <th> tag unbordered. Header <tr> line has "bordered" css class. Here is css part:
.bordered th
{
border: 1px solid black;
}
.bordered th:last-child
{
border: 0px none white;
border-bottom: 0px none white;
}
HTML markup:
`<table class="bordered" cellspacing="0" border="0" id="ctl00_body_gvTimeTable" style="border-collapse:collapse;">
<tr style="border-width:0px;">
<th scope="col">One</th>
<th scope="col">Two</th>
<th scope="col">Three</th>
<th scope="col"> </th>
</tr>`
But still last <th> stays underlined. What's the problem?
I checked this out in jsFiddle. I wasn't able to see any problem in Chrome (version 15) nor Safari (version 5).
I made a slight adjustment to your CSS (changed your border values to zero - as suggested by Stack Overflow):
.bordered th { border: 1px solid black; }
.bordered th:last-child { border: 0; border-bottom: 0; }
Something to note, :last-child is a CSS3 selector. That means it will not work in IE8 or below (unless you are using Selectivizr or similar).
:last-child will select the last child element of the targeted parent (in this case, .bordered th). You'll need to use something like th:last-of-type.
Try throwing it an !important this will override any previously given stylings, aswell as stylings that would override it later on.
.bordered th
{
border: 1px solid black;
}
.bordered th:last-child
{
border: 0 !important;
border-bottom: 0 !important;
}

CSS cross browser issue

IE6,7 are givimg me grieves on browser display. I didnt have prblems with Safari nor FF.
I'm not a CSS expert and in need of advice for this column alignment issues on IE.
And I don't know where to begin because I've tried messing around with the css files and the css browser selector javascript and still I can't get it to work on IE.
The problems I believe center around id doc, bd, yui-main, yui-b, box and box-titles.
For unclear reasons, the sizes show differently in IE from other better browsers.
The sizes width and height values are different.
<body>
<div id="doc" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div id="header" class="yui-g">
<a href="index.php">
:
:
unfortunately, the 2 css files are a little overwhelming over me to understand.
I tried pasting it here but the format got out of whacked.
Could someone lend a helping hand ?
Any help is appreciated.
app.css
body {
font-size: 85%;
font-family: "georgia";
}
.yui-t2, #bd, #yui-main {
z-index: -5;
}
.yui-b, .yui-g {
z-index: auto;
}
div.yui-b div.box {
color: #333333;
border: 1px solid #c6e1ec; /* this controls the left boxes on front page */
margin-top: 15px;
}
div.yui-b div p.box-title {
/* background: #0590C7;
border-bottom: 2px solid #c6e1ec; */
background: #6f6f6f;
border-bottom: 2px solid #c6e1ec;
color: #FFFFFF;
display: block;
font-size: 93%;
font-weight: bold;
margin: 1px;
padding: 2px 10px;
}
div.yui-b div ul {
margin: 0;
}
div.yui-b div ul li {
border-bottom: 0px solid #fff;
list-style-type: none;
}
div.yui-b div ul li a {
color: #333333;
display: block;
text-decoration: none;
padding: 3px 10px;
}
div.yui-b div ul li a:hover {
background: #c6e1ec;
color: #333333;
}
grids-min.css
body
{text-align:center;}
#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7
{margin:auto;text-align:left;width:57.69em;*width:56.301em;min-width:750px;}
.yui-b{position:relative;}
.yui-b{_position:static;}
#yui-main .yui-b{position:static;}
#yui-main
{width:100%;}
.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main
{float:right;margin-left:-25em;}
.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main
{float:left;margin-right:-25em;}
:
:
more but format is bad over here at stackoverflow to make it readable.
I apologise for I don't wish to come across in this post as unhelpful or rude.
Sincerely
This is a useful resource for dealing with ie6 generally
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs
There are many many possible IE6/7 issues. Particularly IE6.
First thing to check is does your HTML code include a valid <!DOCTYPE> declaration? If not, your page will go into quirks mode, which will make all versions of IE (but IE6 in particular) go nuts. Quirks mode is effectively an IE5 compatibility mode. It is badly broken, so make sure you have a doctype.
Second thing to do is read up on some of the IE issues that may be giving you problems, and on browser support for some of the features you may be using. There's a very good website called (appropriately enough) Quirksmode.org which has a comprehensive set of compatibility tables for a wide range of browser features.
The following sites may also help:
http://haslayout.net/css/index
http://css-class.com/test/bugs/ie/ie-bugs.htm
http://positioniseverything.net/explorer.html
Google is your friend here too. ;-)
Next tip, try to narrow down your problem. Strip out the bits that are working until you end up with a page that demonstrates the problem with the minimum of other stuff getting in the way. Save that example to a site like JSFiddle. It'll be easier to work out the issue if you know exactly what the issue is.
Finally, if the remaining issues are minor display glitches that don't prevent the page being used, you should give yourself permission to simply ignore them. The market share for both IE6 and 7 has been dropping rapidly over the last year, and will continue falling. There's very little to be gained by spending too much time sweating over minor issues in these browsers.
See here for up-to-date browser usage stats: http://gs.statcounter.com/#browser_version-ww-monthly-200911-201011
(obviously if your site has significantly different demographics, you may need to pay more attention to IE6 and 7, but if that's the case you'll know already)

Resources