Hi I have a bizarre problem. When I open my site http://www.blackflow.pl/ in IE9 "Polecamy" section on the blue footer(bottom part) gets messed up. It works when I turn on the "compability mode". When you look at the source it's just a simple list.
Everything works fine on other browsers
A <strong> tag as a direct child of a <ul> is invalid HTML. Infact, if you run your webpage through the w3 validator, you'll see that it has 46 errors, quite a few of which are related to that <ul> with a in it.
Edit: Looks like I saw the wrong ul... But the one you're having the problems with has the same error.
actually this ul isn't the same as the rest - the first "a" element is right under the ul and not inside the first li. this probably what's causing the problem
Your code is wrong on "Polcamy":
<a class="footer" href="http://blackflow.pl/index.php?id=11" target="_self">
<strong>Polecamy</strong>
<li>-Serwis Komputerowy</li>
</a>
You may render the page as IE8/IE7 like
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
Related
When I set focus on the body tag, Windows narrator reads the text in tag. How can I prevent this from happening?
I've tried aria-hidden="true", role="presentation", tabindex="-1". None of these are working.
Appears to be an Internet Explorer bug and not a Narrator bug because I hear the same problem using NVDA with IE. I used the jsfiddle example in the SO thread that #LukeT mentioned. I don't know if that sample code is similar to yours. Perhaps you can post your code.
From the SO thread, the code was (with minor changes):
<div tabindex="0" id="page-wrapper" role="region" aria-labelledby="title1">
<h2 id="title1">page 1</h2>
<ul>
<li tabindex="-1" style="display:none" presentation" aria-hidden="true">alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</div>
If I clicked or tabbed to the <div>, I would hear alpha even though it has every attribute possible to make it hidden. I could get around the problem with various changes but since I don't know what your code looks like, I don't know which one you need.
Here's what fixed the problem (any of the following - you don't need to do them all):
Changed the aria-labelledby on the <div> to aria-label with a literal string (<div ... aria-label="page 1">). That means it has duplicate text as the <h2>, but it worked.
Removed the role from the <div>
Added an aria-label to the <h2>, which is weird because it just duplicates what's already embedded in the <h2>.
If you post your code, perhaps we can find something that can work for your case.
I found this thread on the topic. Obviously you have tried the above mentioned solutions, but there is an additional comment below that may help you, dealing with explicit labeling. Also, further down in the discussion, it mentions that Microsoft Edge assists in this matter as well.
Hope this helps!
I have a simple website, as I'm a beginner programmer. I inserted a <p> tag, which worked all fine and dandy. There was two words in the paragraph which I wanted to link to a different page on my website, and it decided it didn't want to work. I don't know why it didn't work, because I have <div> tags in the same document to the same page that were working fine.
Edit: To define what wasn't working: It wasn't clickable. It changed color, like a normal hyperlink tag should, but was just a piece of text. You just couldn't click it. Even tags with an invalid or nonexistent href should be clickable. Right? Maybe I'm wrong, again, I am a beginner.
The other strange thing was that in my CSS file, I had the text-decoration set to none, so it shouldn't have changed color in the first place.
CSS:
a{
text-decoration:none;
}
This is the HTML that I had an issue with:
<p id="p1">Ingsoc is the Newspeak word for English Socialism. (For more on Newspeak, see the Ministry of Truth page.)</p>
And here's an example of a link with the same destination that worked just fine:
<a href="TruthPage.html">
<div id="minitrue">Ministry of Truth</div>
</a>
Instead of
<a href="DifferentPage.html">
try
<a href="http://www.yoursite.com/folderpath/DifferentPage.html">
where 'yoursite.com' and 'folderpath' are changed to match your situation.
The code looks ok to me. You could try...
<p />
<div>This is just basic text that was doing what it was supposed to. This was the text that I wanted to link to a different page.
</div>
if it's working within a div tag
Your problem is that your href="DifferentPage.html" is not vailid. My suggestion is to open that other page on your site, then copy the location in the address bar.
Probably a stupid question, but I honestly can't wrap my head around what's going wrong here.
http://harrisonfjord.com/thinkinc/
A site I'm building at the moment. I want to make an anchor link at http://harrisonfjord.com/thinkinc/index.php#sponsors. I've set up the anchor to occur just before in the following code:
<a name="sponsors"></a>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
However, when you click on the anchor link it lands about halfway down the div. I thought it might have been a problem with the images loading after the anchor link loads, so I manually put in widths/heights for all of the tags. I also did the same for the cufon text replacement in the title bar.
None of that helped, so now I turn to you. The anchor is also not working in Firefox, for whatever reason. Any thoughts on what I've done wrong here?
Cheers!
I think the problem is resulting from the anchors with no contents that you are using.
Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.
I'd try sticking the fragment identifier in the actual renderable entity such as:
<h2 id="sponsors">Sponsors</h2>
and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.
I got the exact same issue in Firefox and solved it with this (same as sasi answer but more generic - it detect if there is an anchor in the url and scroll to it):
$(document).ready(function() {
if(window.location.hash.length > 0) {
window.scrollTo(0, $(window.location.hash).offset().top);
}
});
It seems it's a well known issue, see https://bugzilla.mozilla.org/show_bug.cgi?id=60307
I got problem in iphone for links with fragments, having
TYPES OF INFORMATION WE COLLECT, correctly linking to
<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>.
That wasn't working properly, and I fixed with a solution like this (using jQuery):
window.scrollTo(0,$('#info').offset().top);
I solved this with a trick, I have put an empty span element with the required ID and a line break before the div
<span id="sponsors"> </span>
<br>
<div class="sponsors">
<div class="sponsors-left">
<h2>Sponsors</h2>
<p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
</div>
</div>
GO TO SPONSORS
I don't know what standard your page is trying to conform to, but it is full of errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Some of them so severe, for example:
Unable to Determine Parse Mode!
No DOCTYPE found, and unknown root element. Aborting validation.
that the validator gives up. Contrasted with a page like gnu.org
http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0
You should be pleased that the site renders at all.
I had a problem with scrolling to the wrong position and I fixed it by disabling the Development Tools panel in Chrome :) Apparently Chrome calculates the position incorrectly when DevTools is open.
My html anchor is as follows.
<a name="template-8"/>
<h4 class="template" id="template-8">A title</h4>
As far as I know the browser should skip to the element with a matching name or id attribute.
When I type in the url http://my.site.com/templates#template-8 safari jumps down the page as expected.
However when linking as below the anchor does nothing. Chrome, Opera, IE7 and Firefox all work.
A link
Safari is version 5.0, could this be a safari bug?
The problem was I had a redirect header in the page I was linking to.
Opera, IE, Chrome, Firefox will carry over the anchor to the new page. However safari loses the anchor on the redirect.
If you are having trouble with safari anchors disable any redirects.
For me, I simply had to change
http://domain.com/page#myanchor
to
http://domain.com/page/#myanchor
I just ran into the same issue and found your post while searching - obviously you've fixed this since it was back in 2010 and but figured I would post what I found in case someone else finds this. :)
I'm using htaccess to redirect my url from mydomaincom/index.php to mydomaincom/ and found that my nav didn't work in Safari since my href addresses where index.php#value and Safari v5 wouldn't carry over the anchor links.
Rather than turn off my redirect I just changed the urls to point to mydomaincom/#value. Not only did this work great for all browsers but it also made my page quicker (not yet sure how but will search this now :))
There are two side issues I see, which aren't the cause (since you found the problem already) but probably don't help:
Self-closing <a> tag. You can't self-close tags that are supposed to have end tags, it should be: <a name="template-8"></a>.
The name and id attributes share the same "namespace", so you cannot have the same value for a name and id attribute. All browsers from the past 10 years support anchors on IDs, so scrap that useless link tag.
It has not worked with the previously proposed solutions, it has worked for me to create a redirection using javascript in the following way.
<!-- <a href="#first-block"> -->
<a href="javascript:redirection('first-block')">
function redirection(destination){
window.location.href = "example.com/page.html#" + destination;
}
I leave it here in case someone serves you in the future.
To fix an anchor tag in Safari. I proceed this way :
A tag
And on my css file :
.btn{
display:block;
width:100%;
height:100%;
}
The important thing is for some reason, sometimes Safari needs to see your link as a block, and it can be useful if you create a list, with some links inside.
Example :
<ul>
<li>A tag</li>
<li>A tag</li>
</ul>
Works for Safari 6+
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>