In the following example, the word Test is not clickable in Internet Explorer, even though the link URL appears at the bottom of the page when it's hovered over, and the link's area is represented accurately in the horrible IE debugging tool (F12). This works fine in all other browsers (of course).
<table><tr><td>Test</td></tr></table>
I know it's not technically valid to nest a table inside a hyperlink tag, but it's really the only practical way to do what I want to accomplish, and seeing how it works fine in all browsers, is there a way to get it to work in IE?
So far, I've tried giving both the table and link a height, width, and also a display property of inline-block. None have worked. Thanks.
You say "seeing how it works fine in all browsers" -- but that's really not true. What's actually happening in some browsers is they're doing work to make it work.
Do something like this instead:
<table onclick="location.href='/'" style="cursor: hand;">
<tr><td>Test</td></tr>
</table>
Also a hack, but a more valid one.
UPDATE
If you have concens about crawlers, there are two possible approaches. One is to add a link after, something like:
<table onclick="location.href='/'" style="cursor: hand;">
<tr><td>Test</td></tr>
</table>
Test
You can also use a <link> tag in the <head> of the document, something like:
<link href="/" rel="section" />
Or whatever link rel type makes sense.
Additionally, HTML structured as you have in your question is invalid according to the spec. In terms of what works reliably and into the future, your code does not qualify. Code written more towards an eye on standards will work more reliably.
ANOTHER UPDATE
Given your comment, here's how I would structure this, assuming markup like this:
<table class="dataTable">
<tr>
<td><img></td>
<td>Description</td>
<td>Details</td>
</tr>
</table>
Your details link represents the link you're using, so what I would do is add this bit of JavaScript (uses jQuery, but could be rewritten for whatever libraries you're currently using:
<script>
jQuery(function($){
$('table.dataTable').delegate('td', 'click', function(){
$(this).find('a.details').trigger('click');
});
});
</script>
Related
In the last days we have seen how our newsletters doesn't print as they use to do in Yahoo Mail. Some <td> elements are taking more space that they were supposed to take. After some checking we have seen that width attributes in our inline styles are replaced by min-width.
I was try to see if there were any change in Yahoo Mail but I couldn't find anything. The only thing I have found an issue in github explaining how this behaviour is suppose to happen in Yahoo and in Gmail with the height. I've checked Gmail and it's not happening and everything was ok last week in Yahoo Mail.
Is anyone suffering the same issue? Does anyone know the explanation to that?
This is one of the newsletters suffering the problem, and this is how we see it now.
I answered this question earlier today, here's that answer:
Quick fix, place this in your <style> tag: #media yahoo {min-width:0!important}
This change/bug is brand new at the time of this posting. Yahoo is now changing width to min-width, breaking hybrid layouts among other things. There is a good discussion about other hacks in the Litmus Community.
Table elements for my purpose are parent elements to a button.
For (parent) table elements I placed "!important" next to "min-width" with no spaces.
The html is placed "inline". See the example below:
<table align="center" width="200px" bgcolor="#0076be" style="border-spacing:0;Margin:0 auto;width:95%;max-width:200px; min-width:0%!important;">
Button element has no inline style element of "width".
See example below:
<img src="[[asset_3]]" width="195px" style="border-width:0;max-width: 195px; height:auto;display:block;margin:0 auto;" border="0" alt="Click Show Images to Make Links Work">
Visit Yahoo Mail Update Potentially Breaks Hybrid Emails for more information.
I have a header row which has this structure:
<th...
<a...
<span...
{text}
If you look at the attachement, you will notice that all the headers with this structure are aligned.
Well, when a specific header is clicked for "sorted" status, the structure will be like:
<th...
<a...
<span...
<table>
<tbody>
<tr>
<td>
{text}
</td>
<td>
<div> //with a background image
</td>
</tr>
</tbody>
</table>
Well, in IE8 this sorted column is no longer aligned (see the screenshot please).
I've tried a lot to put some css style (position:relative, etc) to the table inside the span to fix the alignment in IE8 but I failed..
Is here any css guru which can suggest a fix?
Please note that I can NOT change this structure (its some generated code from ICEfaces library) but I can apply css attributes (if I know where...).
Also, there is no css difference (some specific important style) to the sorted column applied. Just plain table inside that span.
Thanks.
Check the vertical-align property, maybe. Here, judging by the screencap, it seems to be in default mode, 'baseline'. (I'm not sure it will do much, though)
Try :
th.stuff {
vertical-align:top;
}
or :
th.stuff {
vertical-align:middle;
}
Also you could make all th slightly higher and gain somme padding to align the content. I think the problem, overall; commes from the select that appears in the th, inside the table.
You can use IE specific style sheets. They are known as conditional style sheets.
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
The idea of course would be to change the CSS for that element for IE only (because it does work already with other browsers).
I have a situation that I am looking at where certain CSS properties will not be inherited. This revolves around tables and IE8. Using the sample HTML below I cannot get the text within the table to inherit the green colour.
This works in Firefox and Chrome, but not IE8 and from reading up this seems to have always been a problem in IE but was meant to be working in version 8 from what I read.
I have tried to specify the inherit value everywhere possible, but to no avail so the question is whether the CSS inheritance support in IE8 is buggy, or am I missing something?
I don't want answer changing inline CSS to be classes and I certainly dont wan't any comments on tables as this all stems from building and designing HTML emails where inline CSS and tables are essential.
<html>
<head></head>
<body>
<table style="color: green;">
<tr>
<td>
<span>Span</span>
<p>Paragraph</p>
<div>Div</div>
<table style="color:inherit;">
<tr>
<td>Table</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You're right, this is pretty odd, although I find that adding a valid doctype solves the problem. http://jsbin.com/etuti/2
I've never had a problem with inheritance in any of the IEs. I usually have problems with lack of selector and property support, as well as positioning bugs etc.
Could it be you don't have the correct specificity with your selectors? I'm pretty sure they go in this order (from most specific to less)
Inline style attribute (style="color: green;")
Id selector (#bob)
Class selector (.jill)
Element selector (body)
If that all fails, could adding !important help? I'd use this as a last resort, as usually you can just give specificity by providing a more specific selector.
I am writing Selenium script. For a html page include a table, I can not use "css=table tr:nth-child(2) td:nth-child(3) a" to locate the link in the table. Selenium IDE give me the "[error] locator not found".
But use "css=table tr:nth-child(2)", it can locate to the row.
So am I mistake for the css locator, I think adding the "td:nth-child(3) a" should work for the link in td , why not?
Edit: I am using firefox 3.0.15
Given the HTML:
<html>
<body>
<table>
<tr><td>Hello</td><td>World</td></tr>
<tr><td>I'm</td><td>Batman</td></tr>
</table>
</body>
</html>
You can use the following locator for the link in the 2nd column of the 2nd row:
css=tr:nth-child(2) > td:nth-child(2) > a
Update:
After a little bit of research, it seems your original locator should work, but doesn't due to a bug in the cssQuery library used by Selenium (http://jira.openqa.org/browse/SEL-698). My suggestion above works, but it's really only a workaround until the bug is fixed. Unfortunately, considering the cssQuery hasn't been updated for some time I'm not sure how soon this will be addressed.
A similar issue is still around in Selenium IDE 2.1.0
I'm testing a group of web sites to check if a specific URL has been changed.
The link I'm supposed to check for is in a table, in the 25th or so tr from the top ...
<tr>
<td>
<div align="center">
<font color="#FFFFFF">
<a target="_blank" href="http://[The link I need to test] ...
I've used both
assertElementPresent //*[starts-with(#href,'The Link')]
and
assertElementPresent //*[contains(#*,'The Link')]
In some cases, the first one will find a result, but the second one will not. Most of the time neither will find the Link.
I'm using KML and the GGeoXml object to overlay some shapes on an embedded Google map. The placemarks in the KML file have some custom descriptive information that shows up in the balloons.
<Placemark>
<name />
<description>
<![CDATA[
<div class="MapPopup">
<h6>Concession</h6>
<h4>~Name~</h4>
<p>Description goes here</p>
<a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
</div>
]]>
</description>
<styleUrl>#masterPolyStyle</styleUrl>
...Placemarks go here ...
</Placemark>
So far so good - the popups show up and have the correct text in them. Here's the weird thing: I'm trying to use CSS to format what goes in the popups, and it halfway works.
Specifically:
The <h6> and <h4> elements are rendered using the colors and background images I've specified in my stylesheet.
Everything shows up in Arial, not in the font I've specified in my CSS.
The class names seem to be ignored (e.g. none of the a.Button formatting is applied; if I define a style like the one below, it's ignored.)
div.MapPopup { background:pink; }
Any ideas? I wouldn't have been surprised for the CSS not to work at all, but it's weird that it only partly works.
Update
Here's a screenshot to better illustrate this. I've reproduced the <div class="MapPopup"> markup further down on the page (in yellow), to show how it should be rendered according to my CSS.
As suggested I've gone in with Firebug to see what's going on. It looks like Google is doing two obnoxious things:
It's stripping out all class attributes from my HTML.
It's throwing all kinds of hard-coded styles around.
Here's my HTML along with the first couple of wrappers inserted by Google:
<div style="font-family: Arial,sans-serif; font-size: small;">
<div id="iw_kml">
<div>
<h6>Concession</h6>
<h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
<p>
Description goes here</p>
<a target="_blank"><span />View details </a>
</div>
</div>
</div>
As you can see, my classes (e.g. MapPopup in my first div, Button etc. in the <a> tag) have all been stripped out.
Knowing this I'll be able to work around Google's interference, using !important and targeting the container div for the whole map - still, this is annoying, and unexpectedly clumsy coming from Google.
More related obnoxiousness related to the HTML in a KML <description> block: Any links are given the attribute target="_blank", whether you like it or not. I'm currently exploring ways to undo that, using jQuery, but what a drag. I really don't understand why Google feels the need to tamper with this HTML.
See also this thread on the official Google Group.
I've had similar issues. I don't know how you are implementing your Marker, or if you are using InfoWindow, or .addListener, but they way I have had to get css styling to work inside of the "pop up bubble" (over the Marker) is to use what is called "inline styling." So I have a variable that I pass into InfoWindow. Assuming you have initialized a variable "marker" with some options, and have the "map" instance created, some example code would look like this:
/*start of myHtml2 variable*/
var myHtml2 = "<div style=\"background-color:lightgray\"><div style=\"padding:5px\"><div
style=\"font-size:1.25em\">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style=\"padding:5px\"><tr><td><img src=\"A lake.jpg\"
width=\"75px\" height=\"50px\"></td><td>More text<br/>Again, more text<br/><div
style=\"font-size:.7em\">Last text</div></td></tr></table></div></div>"
/*end of variable*/
var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
/*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){
infowindow2.open(map, marker);
});
I know the css styling code is cumbersome, but I haven't found a way to use complicated css styling inside "the bubble pop up" using css in the head, or from a style sheet There are always conflicts, and some features don't render properly.
My first guess is that you're running into an issue with CSS specificity. There is a good article on it at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, so if you can include a container element ID, that may help.
Let me know if this doesn't turn out to be the problem and I'll come up with more ideas.