My code below works great in IE8, but in FF 3.5 clicking the link causes an error that "start_upload is not a function". What is going on? (Of course start_upload is a valid function that works fine in IE)
<div align="left">
<a href="#" onClick="start_upload();"
onMouseOver="start_upload.src='/Images/Buttons/Upload-glow.gif'"
onMouseOut="start_upload.src='/Images/Buttons/Upload.gif'">
<img src="/Images/Buttons/Upload.gif" id="start_upload" width="90" height="25" border="0"></a>
</a>
</div>
That is because of the way on.... events are handled, or are standardly supposed to be handled. The context of the onclick inline function is the <a> element to which it was attached, then its parent, then its parent, so on until document and window. Since IE supports referencing items by ID (and FF should, but still don't do it) it works. However, it's correct anyways - start_upload is not a function. It's an image. What do you intend start_upload(); to do, exactly? You can set its src and that's correct, but you cannot invoke an element as a function.
What's going on is that IE is violating the ECMAScript spec. When you do start_upload there it resolves it to either a function or an element depending on whether it's followed by () or not. In Gecko start_upload in that situation resolves to the element in all cases, and then you're trying to call an element.
Somehow,your code is running smoothly in Firefox also (assumed that you have define start_upload function). Here is my code which works fine. Also see, you have close </a> two times (that should not be a problem).
<body>
<div align="left">
<a href="#" onClick="start_upload();"
onMouseOver="start_upload.src='/Images/Buttons/Upload-glow.gif'"
onMouseOut="start_upload.src='/Images/Buttons/Upload.gif'">
<img src="/Images/Buttons/Upload.gif" id="start_upload" width="90" height="25" border="0">
</a>
</div>
</body>
</html>
<script>
function start_upload()
{
alert ("a");
}
</script>
Related
We have a graphic that doesn't render properly in IE10. It was working fine and then about a month ago, it quit working on IE10 but continues to display properly on Chrome and Firefox. I've read that HTML5 does not work properly with IE10. Is that the issue? Not sure of the fix.
<table width="" border="0" cellspacing="0" cellpadding="0"><tr><td width="220" valign="top">
<div class="menu">
<!--#if expr="${REMOTE_HOST} = /.usgs.gov$/" -->
<b>NGP Intranet</b>
<!--#endif -->
<p>
<!--#include virtual="include/tnm_menu.html"-->
</div>
<!--<p class="space"></p> --><br class="space" />
<img src="images/nav_spacer.jpg" width="185" height="1700" border="0" alt="This is a formatting graphic." />
</td>
Looking at the website you provided, not the fiddle as it is still pretty pointless as it doesn't replicate the issue at all, you can fix the "skewed" green space by adding to the CSS:
#nav {
padding:0;
}
For the other problem of the CSS menu, and possibly the above problem, I believe this is due to the HTML code being completely invalid. There are so many problems with the code that it doesn't know how to render it correctly. Give it a quick pass through a validator and you will see some errors. Firstly, you are using HTML5 elements, but declared the DOCTYPE as XHTML. And that's just the start, you have unclosed tags, obsolete attributes, unescaped characters, plus others.
The reason why this is a problem is that when using position:absolute the browser looks for the parent of the element but if it can't work it out, it could position the element anywhere. FF and Chrome work because they are less strict than IE over this, and I think this is an issue with FF and Chrome, they try to "fix" what the developer has done, but in my opinion this just breeds lazy and bad development.
Fix the issues, especially the unclosed tags, and it should help. (At least help narrow down the issue.)
I am trying to build an email template in which i have to show some images to different mail client (eg.. outlook, thunderbird...). Now problem is when these clients does not allow to show image at that time broken image box is displaying which i don't want to display.
I had also refer
Refered link 1: How to remove borders around broken images in webkit?
Refered link [2]: input type="image" shows unwanted border in Chrome and broken link in IE7
Refered link [3]: How to stop broken images showing
but not able to find any proper output.
Note : I can not use div tag. I must have to use table tags.
CODE What I am using :
<table style="background:#fff; width:600px; margin:auto auto;">
<tr>
<td>
<a href="http://www.sampleurl.com">
<img src="http://sampleimageurl.com/sampleimage.png" height="55" width="198" />
</a>
</td>
<td style="text-align:right;"><a href="http://www.sampleurl.com" target="_blank">
<span style="font-family:Myriad Pro; color:#0d5497; font-size:20px;">www.sampleurl.com</span>
</td>
</tr>
<!--<tr>
<td colspan="2" style="height:1px; background: #0d5497;"></td>
</tr>-->
OUTPUT what i get.
use alt here for fallback
demo
html
<img src="abc" alt="image" />
css
img {
width:200px;
height:200px;
}
Alternatively, if you dont want to show any alt text, just give a blank space.
demo here
HTML
<img src="abc" alt=" " />
I know I'm late to the party but I didn't see a simple solution that used native javascript. Here is the solution I came up with
<img src="https://test.com/broken-image.gif" onerror="arguments[0].currentTarget.style.display='none'">
onerror calls a function, passing an error event as an argument. Because the argument is not actually defined as 'error' we need to get it from the arguments array that all functions have. Once we have the error we can get the currentTarget, our img tag, and sent the display to none.
I think you can use on error event on img.
here is a simple solution
Please pay attention that this script uses onDomReady event. In this case you should write:
<script type="text/javascript">//<![CDATA[
$(function(){
$('img').on('error', function () {
$(this).remove();
})
});//]]>
</script>
UPDATE
Why do you load images ? You can attach this image to email and show it via CID
You could any other element instead of and IMG and set the background-image using CSS. If that image is not found, you will not get the strange looking box.
<span style="background-image:url('http://sampleimageurl.com/sampleimage.png'); display:inline-block; width:198px; height:55px">
element with background
</span>
Sounds like a tough call not being allowed to use ALT text
If whoever is making this decision is convinced by a bit of styling you can do that e.g.
<img src="logo.jpg" width="400" height=”149″ alt="Company Name" style="font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px; background:#ccffcc">
see http://jsbin.com/IcIVubU/1/
use this code block in your mail content to keep unrendered image as hidden.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<img id="imgctrl" src="imgs/sandeep11.png" onerror="$('#' + this.id).hide();" alt="Alternate Text" />
concept is.. use any CDN jquery reference then only jquery code will work. and I guess your src image path also should be some live url. if not then, it should be in attachment.
Please Click on "Show Remote content" to get remote urls into
thunderbird. this is security constraint of thunderbird. that's why
your images are not being loaded.
I know it is an old question but I found I had this problem too today (08 January 2020) and found a way to get around it.
I tested with the latest versions of Firefox and Chrome, I still could not find a solution for Safari.
Firefox:
For firefox you must add alt=" " note the space
Chrome:
For Chrome it must be alt="" note the empty space
The problem is that when I add the space the icon shows up on Chrome and disappears on Firefox, and vice versa when I remove it.
I added just a space because I did not want any text showing up on the image.
I did not have to add any of the following lines for it to work (I saw many solutions proposing some or all of them), but I left them in just in case
border: none;
outline: none;
border-image: none;
From there I guess it would be detecting a the browser in JavaScript and changing the alt attribut to " " or "".
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror =function(){this.parentNode.removeChild(this);
})});
DEMO
you can remove img by javascript:
arr = document.getElementsByTagName("img");
for(i=0; i<arr.length; i++){
if(arr[i].src=="")
arr[i].parentElement.removeChild(arr[i]);
}
I declared an iFrame in my html, and the source is my XQuery file. In my XQuery, I defined a <div>, within which I also declared a button named "convert".
My XQuery file basically looks like this (this is the source for the iFrame）
return
<div id="content">
<table>
....
<tbody>
{
...
<td>
<a id="{$t/#id}"
rel="nofollow"
target="_new"
name="{util:document-name($t)}:{util:node-id($t)}"
href=
"http://localhost:8080/exist/rest/db/motorola/xquery/toDita.xql?xml={
util:document-name($t)
}&xsl=mot2dita.xsl">
<input type="submit" value="convert"/>
</a>
</td>
...
}
</tbody>
</table>
</div>
As you can see, in a td, I declared a button called "convert", and the "href" gives the link. Right now this button works perfectly in Firefox and Chrome(opening a new window to do the task), but in IE, after clicking it, it just doesn't do anything.
I wonder if this is a browser issue or my XQuery script has problems. Thanks in advance for helping out.
<input> tags are not valid inside <a> tags. The XHTML code is therefore not valid, which will account for the inconsistent behaviour - some browsers are better at compensating for odd cases like this than others.
Recommend you remove the <input> entirely and use CSS to style your <a> tag to look like a button, if it's just the look of a button that you're after.
Unless you're inside a form, it's not going to submit anything...definitely not an A tag.
I prefer to do these with Jquery UI's button feature. It gets the desired behavior you're looking for, is progressively enhanced and tested to handle the full gamut of browsers, and can be done use a href links, button elements, or input type=submit elements. Plus, styling looks great and is instantaneous.
Here's a quick tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
I'm trying to get everything in the anchor tag to be a clickable link. Unfortunately, in IE6 (which is the only browser I'm concerned with currently), the only thing that isn't a clickable link are the inline images. I know that it's not valid html to put a div inside of an anchor but it's not my markup and I've been asked to avoid changing it. Any suggestions to altering the CSS to enable the images as clickable links? If changing the markup is the only solution... any suggestions there? My initial thought was to set the image as a background of it's parent (.ph-item-featured-img), although I'm unclear if that will solve the problem.
Thanks!
<div class="tab-panel-init clear ui-tabs-panel ui-widget-content ui-corner-bottom" id="ph-flashlights">
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
<a href="#" class="last ph-item-featured clear">
<div class="ph-item-featured-img">
<img src="#">
</div>
<strong>
PRODUCT CODE
</strong>
<p>
PRODUCT CODE Heavy Duty Aluminum Led Flashlight
</p>
<span>Learn more ></span> </a>
</div>
The problem is that it isn't valid html. Explain that you have to change the markup to make it work as desired. Changing the div to a span and setting the class .ph-item-featured-img to display: block should produce the same look-and-feel and be correct html.
Edit: Another, not as clean solution, is to add a click-listener with JavaScript and invoke the link upon a click on the image.
If you can't change the mark up (which you admit isn't valid), I don't think there is anything you can do here.
You should reconsider changing the markup. This example is bad in so many ways it could serve as a textbook example of what not to do.
Alternate strategies:
Remove everything but the image and
give it an onclick handler that does
the link mechanics.
Remove the DIV and just have the IMG
inside the anchor tag.
etc.
Well i looks like youre already using jQueryUI so why not just through a click even on the containing DIV. Also you should definitely change the markup. If its not valid, its not valid. That can lead to all kinds of problems other than the one youre currently facing. If there is a good reason for change this is it.
This is what the w3c validator returns when I pass in the snippet you posted:
Line 15, Column 46: document type does not allow element "DIV" here; missing one of "OBJECT", "MAP", "BUTTON" start-tag
<div class="ph-item-featured-img">
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
If I remember correctly, IE6 requires that every element inside of the <a> tag to be an element with CSS display: inline set on it (or inline-by-default elements like <span>, <b>, <strong>, etc.), or else it doesn't get linked, or links act weird.
Perhaps it is even IE6's HTML parser that is to blame. Maybe it sees the <img src="#"> and thinks, "that's not a valid URL to an image! :ignore:". IE6 is strange that way, often acting in a way that is a diametric opposite to how standards-compliant browsers act.
Truth is, this I have no way of checking all this; thankfully, every Windows computer I have access to has IE7+ on it. Perhaps you should take Google's route and just explicitly say that you're not going to support IE6, redirecting all IE6 browsers to a place where they can upgrade.
I believe you can do this with conditional comments like so:
<html>
<head>
<!--[if lte IE 6]>
<meta http-equiv="refresh"
content="2;url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<![endif]-->
...
</head>
I have the following is really weird. Bassically when I view the source of the page everything looks fine but the page looks all wrong. So I decided to take a look at the source using firebug and firebug shows a very different story. But if I refresh the page the page looks fine and the source and firebug match up.
See below for what the source is but what firefox displays and firebug shows:
View source shows this:
<div class="mainpanel">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
<div class="thumbphototitle">Little Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
<div class="thumbphototitle">Split Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
<div class="thumbphototitle">Rock Pointer</div>
</a>
</div>
But firebug shows this and it renders on the screen as if its like this:
<div class="mainpanel">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
<div class="thumbphototitle">Little Rock</div>
</a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"></a>
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a>
<div class="thumbphototitle">
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock">Split Rock</a>
</div>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a>
<a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer">
<div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
<div class="thumbphototitle">Rock Pointer</div>
</a>
</div>
The offending html is the middle a tag which goes crazy...
Any ideas.
Cheers
Anthony
Like others said, this happens because your markup is invalid. Going a bit deeper, the problem is that when the parser received <a><div> in its input, it may mean two things:
You forgot to close the anchor tag, in which case this should become <a></a><div>... in the DOM, or
The anchor wraps the div, in which case the DOM should be <a><div></div></a>.
The correct decision can be made only when more (potentially much more) characters are known; the parsing, as you could have noticed, happens incrementally -- i.e. you can see parts of the page before it's fully downloaded.
Unfortunately, the Mozilla's HTML parser (as of Firefox 3.6 and earlier) is non-deterministic in this case -- the resulting DOM depends on the portions your HTML is split into, while going over network.
There's a Mozilla bug about a problem that looks very similar to yours.
I'm sorry for you, and I don't know how to implement (nor have any desire to try implementing ;) the solution to your original problem, but perhaps a hack involving setting innerHTML (to avoid parser non-determinism) is in order?
BTW, it would be interesting to check how the HTML5 parsing algorithm says your markup should be treated, since that's what will eventually be implemented in the browsers.
You should not wrap block elements/tags (like <div>) in inline tags (like <a>). That's asking for trouble.
That's because your HTML is invalid. Inline elements can only contain other inline elements and cannot contain block elements.
Browsers encountering HTML which breaks this rule is allowed to do anything at all in order to parse the page (including not displaying the page) and apparently firefox's interpretation of anything-at-all is not the same as yours.
Note that you can convert inline elements like <span> to a block element by setting it's display css property. But I'm not entirely sure if that is legal for an element with additional semantics such as an <a> tag. Of course, you could convert those divs to inline elements.
I don't want to stop putting block elements inside anchors. It's just too useful:
http://html5doctor.com/block-level-links-in-html-5/
I developed a workaround which seems to disable progressive rendering and avoid this problem.
I use server-side sniffing to look for "Firefox/3" in the user-agent. If found, I put this right after <body>:
<script type="text/javascript">
// hack for firefox 3.x progressive rendering pessimism
document.body.style.display = 'none';
</script>
And this right before </body>:
<script type="text/javascript">
document.body.style.display = 'block';
</script>
In testing, I found that simply inserting an empty <script> tag after the body tag avoided the issue I was experiencing. But it feels more correct and safer doing a show/hide.
Hard to know for sure what FF is really thinking - I'm curious to know whether this solves the problem for others.
I'm used to doing this sort of thing for IE. FF3.x is vying for my new least-favorite browser award.