When I open an HTML file in Chrome, the page loads with some random h3 tag from the middle of the document (see last h3 tag in code below) at the top of the window, instead of the actual top of the page. All of the content above that point is loads, but I have to scroll up to get to the top.
Same thing happens when I use Firefox, although it loads with the first h3 tag in my example at the top of the window. Safari loads with the "Here is an example of bold text" paragraph at the top. Any idea why this might be happening?
<h3>Audio</h3>
<audio src="07 Wake Up.mp3" controls>Here is some audio</audio>
<p>
Back to top
</p>
<hr />
<h3 id="B">Bold text</h3>
<p>Here is an example of <b>bold text</b></p>
<h3>Bi-directional override</h3>
<p><bdo dir="rtl">This text will go from right to left.</bdo></p>
<p><bdo dir="rtl">.tfel ot thgir morf og lliw txet sihT</bdo></p>
<h3>Blockquotes</h3>
<p>Blockquotes specify a section that is quoted from another source, like in the passage below:</p>
<blockquote cite="http://www.archives.gov/exhibits/charters/declaration_transcript.html">We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.</blockquote>
<h3 id="button">Buttons</h3>
I think I know what's going on now. The issue isn't with the tags that are loading at the top of the page, but with an autofocus button that appears a few lines down:
<h4>Autofocus button</h4>
<button type="button" autofocus>Autofocus button</button>
For anyone playing around with autofocus buttons, it seems like they cause the browser to "autofocus" (duh) on that point upon loading. In my original case, my page loaded with the autofocus button on the bottom of the window, some headings from a few lines up at the top, and the actual top of the page nowhere in sight.
Without being able to see you code, I would guess that you have an anchor tag somewhere that it is trying to navigate to. If you have a hash (#) in your URL, is in 99% likely. Otherwise, check your JS for a random scroll function that is attached to the wrong thing or perhaps running too early.
Without being able to see the code, this would be my best guess.
Related
On our (Vue.js v.2) webpage we have a section where you can swipe between cards, or by pressing "left" and "right" button. This swiping section is written with vanilla JS, and no fancy library. In order to have the adjacent visible when swiping, I need to have all of them visible in the DOM tree, but hiding them from the viewer. I have made it so all the unfocused cards are aria-hidden, and it works great when using ChromeVox. The problem is that when using VoiceOver, and I click the "right" button, and immediately tab down to the card, it will read out the card to the left, and also get trapped there since the card is aria-hidden. Code-wise the change from aria-visible to aria-hidden happens as soon as the button is pressed, but it seems like VoiceOver has already decided that when I am focusing on the "right" button, that the next element should be card 5 (for instance). If I wait around 1 or 2 seconds after clicking the "right" button, it will change the "next" element, and focus on the correct one (card 6) when I tab down. Is there any way to get around this, so it will focus only on the aria-visible element? Maybe a way to "force refresh" VoiceOver's stack of elements to read next? Maybe if I remove the message being read out when clicking the button, it will refresh immediately? I still haven't found of doing either of those things. I created a low quality flowchart to illustrate the problem better. What I want is for it to behave like ChromeVox.
I have tried several methods of getting this to work now, and it feels like it's a bug with VoiceOver. Some of the (desperate) attempts I've tried: setting tabindex=-1, role=presentation, changing the ID of "right" button dynamically as I navigate between cards, creating an empty div with a dynamic ID below the button, using aria-flowto, dynamically setting aria-describedby on the "next" element, and different variations between these and some other stuff I can't remember.
Eventually I found a solution that kinda works. I'm not very happy about it, but it's better than nothing. What I did was to make the title inside the card aria-hidden, and creating a currentHeader variable in store. I created an sr-only & aria-visible title above the swiping section, where the v-html points to the currentHeader variable. This way, the "next" element for the "right" button will always be the same element, but content will change after I click the button. It's not a perfect solution, and for some reason it makes VoiceOver "halt" when trying to go to the next element immediately after clicking the button, but at least the user won't read the wrong text and get trapped. Here's a pseudocode illustration of how I did it if my explaination was confusing:
// old solution // old swiping-section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 v-html="element.title" />
<swiping-section /> <p v-html="element.desc" />
</div>
// new solution // new swiping section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" /> <p v-html="element.desc" />
<swiping-section /> </div>
If anyone finds a better way to do it, please post your solution.
I have a page which is not formatting properly, or at least not formatting as I expect it to.
Below is a simplified version of the code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
links within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more links
within the text.</span>
And more text.
</pre>
</div>
</div>
Only the font color is changed by the <span class="blue">.
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between the </a> and the </span> is black (instead of blue).
Any idea as to why, after the </a> tag, the text color does not return to blue?
Thanks!
John
* UPDATE *
First, thanks to all who created examples to test the premise that the color SHOULD be blue after the </a> tag! You proved I'm not crazy! (or not completely crazy).
I made a copy of the example at JS Bin and on the copy page pasted in a major section of the page with the text color problem. To my amazement, the text after the </a> tag is blue, as it should be.
Next I looked through the CSS to find any style elements that might affect the div, span, a, or pre tags, and put them in the CSS section on JS Bin. The resulting formatting still looks correct, with the text after the </a> tag still blue.
So then I copied the entire CSS file and pasted it into the CSS section on JS Bin. That broke it. The text after the </a> tag changed to black, which was the problem I've been having with the page.
So, somewhere in this massive CSS file there is something which is affecting how this page renders. Why, I don't know. I've always been under the impression that after an in-line closing tag the formatting should return to that in effect before the opening tag, but somehow something is changing that behavior.
It is now about 2:15 AM here, so I'm going to call it a day, get some sleep, and take a fresh look at it after some rest.
John
* UPDATE *
I've gone through the entire page making sure that all tags are matched, the nesting correct (no DIV elements inside a SPAN, etc.), and it still does not format properly.
I can't spend any more time on it, so I've come up with a kludge - close the span immediately before the <a href...> and open a new <span class="blue"> immediately after the </a>, as shown below. I know it shouldn't be necessary, but if that is what it takes to make it work, so be it. So, here is the revised simplified code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
</span>links<span class="blue"> within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more
</span>links<span class="blue">
within the text.</span>
And more text.
</pre>
</div>
</div>
I still would like to know why the browsers are behaving in this manner. If anyone has any thoughts as to what is happening to cause the formatting to break down after the </a> tag, I'd love to hear them.
Thanks,
John
I couldn't get into a source code file for another project (locked for editing), so while waiting I took another look at the problem page.
In looking through the page in Firebug I noticed that while the page source has exactly one <a name="top"> tag, the Firebug display shows multiple instances of that tag. Strange.
Then I looked closer and noticed that there was no </a> tag matching the <a name="top"> tag.
After replacing:
<a name="top">
with:
<a name="top"></a>
The page works correctly!!!
At some point the web site needs to be updated to replace the:
<a name="top"></a>
...and other "a name=" tags with:
<a id="top"></a>
...tags to comply with HTML 5, but with over 2,300 dynamic pages, most with from one to thirty <a name="text"> tags, it will be a long time before there will be funding for such an effort. Another reason why some tags and options need to be supported for backward compatibility.
Thanks again to all who have contributed assistance in any form!
Best wishes,
John
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between them </a> and the </span> is black (instead of blue).
If I assume you are using .blue {color: blue;} this property for span then it will change the text color blue for text which is inside the span tag. The text out of <span> will be black.
Have a look at this DEMO.
in this case, I've changed the <span> color from blue to red and you see <a> tag text is still blue which is by default.
Note: only the text inside span will be in blue color that not include the text inside the<a> tag. by default giving a link to <a> tag its change to blue color.
I have come over a very strange issue and I really have no clue what's going on. Is this a bug, or am I missing something in my code?
Basically what I have is a page with text and a textarea and it works fine in FireFox, Chrome and on my iPhone. But in IE on Windows Phone 8 the textarea seems to eat up the whole rest of the page. Below you can see what it looks like on the iPhone and how it should look like.
Text, followed by an empty text area, followed by more text. Below you can see what I get on the WP8.
Here the textarea is no longer empty, but instead it seems to contain the closing tag of the element that is wrapping the textarea and all HTML following it. The rest of the page is blank. Everything seems to be inside that text area.
Seriously, what's going on here? I'm using XHTML 5, so if there was a missing or unmatched end tag the whole page would have crashed. I have tried to remove all styling from the textarea element as well, but same issue. Any ideas?
Some of the HTML around the element:
<body>
<article class="day">
<h1>Romersk lov</h1>
<div class="exercise">
<p><span class="action">Les</span> <a class="ref" href="http://www.bibel.no/Nettbibelen?parse=Luk+2%2C1%E2%80%935">Luk 2:1–5</a>. Hva kan vi lære av den måten folket forholdt seg til det politiske miljøet?</p>
<textarea/>
</div>
<p>Siden republikkens første ...
</article>
</body>
Update: Seems to only happen when the textarea is empty on load... *confused*
I'd suggest this might be caused by your use a self-closing tag for the <textarea> it isn't a void element, it can, and is intended to, have contents. Instead of self-closing, try using the more appropriate:
<textarea></textarea>
This is, however, purely a guess.
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.
I'm making a quick site and all the content is on one page, and I'm using a small menu with anchor links to make navigating to a certain part faster for the end user. I have two anchor links that work fine (About Me, My Projects) but the "Contact Me" link jumps to a random part of the "My Projects" section.
A preview of the site is available here : http://dev.cuonic.com/cuonic.com/
I have checked the IDs, they correspond, there is no random "contact-me" ID lying around in the "My Projects" section, I've changed the ID, still happens, and this in both Firefox and Chrome. Whats going on ? Any help is appreciated :)
All of then content within //*[#id="content"]/div[2] is floated to the left. Floating elements don't affect the height of their containing block-level elements. If you add this:
#contact-me { clear:both; }
to your CSS somewhere, the <span id="contact-me"> tag will reposition to where you actually want it. Your page still isn't long enough for the contact form to go all the way to the top (at least on my monitor), but it will still scroll to the end of the page.
Change this section of code:
</div>
<span class="anchor" id="contact-me"></span>
<h1>Contact Me</h1>
<div class="text">
To this:
</div>
<h1>Contact Me</h1>
<span class="anchor" id="contact-me"></span>
<div class="text">