Anchor tag issue in Firefox - css

I have an HTML file which contains anchor tag with the link to another HTML file.
When I click on the link in firefox, its not opening the other HTML file. Please refer the below HTML snippet:
<html>
<body>
<table align=left border=1>
<tr><th>Report Name</th></tr>
<tr><td><a href="G:\parent directory\Report\Forms Report Summary_2015-08-25 102050.html" target=report_page>Missing Forms Report</a></td></tr>
</table>
</body>
The issue is that when the link in "href" is clicked and opened in new Firefox window inseted of "G" (capital letter) "g"(small letter) is displayed in Firefox and I get error page not displayed. I am strugggling to understand why Firefox is taking the "G" in caps as small letter "g".
Can someone please help me out here?
However, when I open the same link in Chrome or IE its opening fine.

The specifications of anchors expect a valid uri with a protocol as href:
i.e file, ftp, and mailto or an url fragment #
https://developer.mozilla.org/en/docs/Web/HTML/Element/a#attr-href
In your example it think you need the file
This should work in your case: (check also to escape it, some browsers do strange different things)
<a href="file:///G:\parent directory\Report\Forms Report Summary_2015-08-25 102050.html" target=report_page>Missing Forms Report</a>

Related

Wordpress anchor tag contents moved out after switching to visual and back to text mode

Using <a name="foobar">Hello</a> in the text mode editor and switching to visual mode and back to text editor results in 'Hello'. Using latest wordpress 4.8.2. Anchor tag itself works but not sure why the contents are moved out of the a tag. Any idea?
This is the default behaviour of TinyMCE - the default WP editor, and also used in many other applications.
The format you are using is valid according to the HTML 4.01 spec:
<a name="foobar">Hello</a>
However when you use TinyMCE to insert anchors into content, it uses the following format:
<a name="foobar"></a>
...and it appears that it enforces this structure, even if you manually add an anchor manually with text between the tag.
However, you can use any tag (not just <a>) to define the anchor point, if you need to have text in your anchor. The following example from the HTML 4.01 spec shows an id on a h2 tag being used as the anchor:
Section Two
//...later in the document
<h2 id="section2">Section Two</h2>
So if you want to keep the structure you have, you can change your anchor to
Go to foobar
[...]
<p id="foobar">Hello</a>
Note on HTML5 the name attribute of the <a> tag has been deprecated in HTML 5 - use id instead
Hope that helps :)

Internet Explorer misinterprets html tags

Internet Explorer misinterprets website: it reads <tag></tag>bla bla</tag><//tag> instead of <tag>bla bla</tag>. For instance the code of the nav section is:
<nav>
<ol>
<li><form action="Algemene Voorwaarden Bijles Studio.pdf" method="get" target="_blank">
<button>algemene voorwaarden</button>
</form>
Bla Bla
</li>
</ol>
</nav>
But the inspect element function of IE shows the following:
<nav></nav>
<ol>...</ol>
</nav><//nav>
And this doesn't only happen with the nav tags, it also happens with figcaption, section, footer and other tags, for instance the IE inspect element shows:
<figcaption></figcaption>
Onze bijlesdocenten
</figcaption><//figcaption>
Furthermore the website works fine in Google Chrome and other browsers.
The url of the site is: http://www.bijlesstudio.com
Comment: I asked this question on ProWebmasters, but they send me here because the mod thought it was an CSS problem, so don't delete this post for being a duplicate s.v.p.
Regards,
Jens Wagemaker
One thing that can be happening is that you are using Internet Explorer in
IE8 or older document mode which do not support the new semantic elements of HTML5.
Can I use... Support tables for HTML5, CSS3, etc
To resolve:
check and change the document mode to IE9+ by right-cliking on the page->inspect element->(look around the right top corner in the inspect elemnt section) select Edge from dropdown.
OR
you can add this to your pages <head>...</head> section
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
as common sense would tell, this is a much better option than the previous one.
There is a space <ol > which might be part of it but your editor is inserting a few Byte-Order-Marks which may be messing with IE. Check your editor's settings to turn that off.
Always validate your HTML to find such things.

IE 8 issue with ajax html editor extender

Test Color <font color="#ffcc99">This is Color</font> --> Google Chrome
Test Color <FONT color=#ffcc99>This is Color -- > IE 8
When i save the text using ajax html editor extender with font color change in google chrome it works fine but when i do the same in IE8 the text changes into a different format mentioned above which doesn't work.
How can i solve the same?
This forum post helped me: http://forums.asp.net/t/1751476.aspx
When you read or write the html, just use Server.HtmlDecode(whatever your html is);
Also, on postback, I had to do this:
htmlEditor.Text = Server.HtmlDecode(htmlEditor.Text);

Chrome inserts random whitespace

I've a page whose styling gets messed up in Chrome (no problem for Safari and others). It seems that it inserts for a reason some strange whitespace in the HTML that ruins my layout at the top of the page and in other places.
If I choose to see the source of my PHP page, what I see is:
<body><div id="header-outer">
<div id="header" class="container">
<div class="row">
<div id="site-logo" class="span5">
<img src='logo.png' />
</div> ... etc ...
(I've modified the PHP to have no space whatsoever between BODY and DIV). But when I open the developer tools what I see is:
<body>
"" <- why?
<div id="header-outer> etc. etc..
If I manually delete the "", the layout just goes fine. What is happening here? I'm puzzled.
EDIT: you can see the page at http://bit.ly/ZkZxVG
EDIT: I've tried to disable all extensions, but with no effect on my issue.
Hint: I'm using bootstrap and JQuery. Could they mess with the code?
It's really weird, you might have some undesired char within your file, try removing <body><div id="header-outer"> and rewrite it down.
Try encoding your file with utf8 No BOM too and see if it resolves the problem.
More infos about utf8 BOM here.
Edit
Thats not white space, they must be a physical charter in there. This might not be displayed on your screen, but just press delete and backspace until you have the next element in your markup.
white space in HTML is completely ignored by the browser, it does not render it. Looking in Firebug you have "" rendered when editing the item.

Hide Alt text when Hover

I have a DIV tag. Inside the DIV, I have a Table and in a row, I have placed a script code which displays random images which on a click leads to a url.
This is how the script renders inside the Div Tag
<div>
<table>
<tr>
<td>
<script />
<a href="some random url">
<img></img>
</a>
...
When the user hovers over these images, the anchor url shows as a message on browser status bar. This is very misleading for users. I want to know how to use CSS to hide this status message - Cross Browser and display a custom message instead. On the Div, I have given onmouseout and onmouseover, however it does not help.
Can this be done?
See https://developer.mozilla.org/en/DOM/window.status :
This property does not work in default configuration of Firefox and some other browsers: setting window.status has no effect on the text displayed in the status bar. To allow scripts change the the status bar text, the user must set the dom.disable_window_status_change preference to false in the about:config screen.
This is a security feature that you can't realistically bypass.
common users dont know that they should look at that place in the browser window.
but you can hide that message... you can maybe just redirect with javascript
something like this:
<a href="javascript:void(0);" onclick="someredirectfunction('someurl');return false;" >
<img />
</a>
onmouseout and onmouse over are used for events for client side scripting. Those are used "mostly" for a language called ecmascript(javascript). You unfortunately will not be able to do what you are asking with CSS, css is desinged to represent the appearance of a site, HTML the form, and javascript (other scripting sources) the function.

Resources