I got the following webpage-builtup:
<div id="menu">
</div>
<div id="content">
<!-- you just need to see the last part of the page? us this link -->
down
<!-- A LOT OF CONTENT ... no fun to scroll down -->
<!-- EVEN MORE CONTENT ... still no fun to scroll down -->
<a name="down" id="down" />
</div>
This works fine except Opera. Why is that? Does someone know a solution or am I doing something wrong?
There's nothing wrong with the code. Except maybe for the fact that you're trying to self-close a tag that isn't a self-closer. In this case, the anchor tag. Close it properly at least.
But, tested in Opera 9.64 and it's working fine.
The expected outcome of that code chunk alone is to go right down to the named link, which it does.
If you have a clashing ID that you're not showing, that's probably a reason.
Tested and working in Opera 10.0 on Windows Vista.
You must have some other problem, like a duplicate name or id, that Opera handles differently from other browsers.
Have you tried validating your HTML?
Does not work in Opera 9.5.1 as thats what I'm using and how I found the same question. Might be a bug for that version of Opera
Related
I have the following html:
<div class="awpcp-subtitle">Contact Information
</div>
Contact $adcontact_name
<a href="tel:$adcontactphone">
<div class="phone">$adcontactphone
</div>
</a>
<div class="location">
<Location: </label> London, UK</div>
This makes a button link to dialing screen on mobile, with the number displayed on screen.
It works fine in Android, on Chrome/ Firefox, but as soon as I try it on an Apple phone on Safari, instead of just linking to dialing screen with the number displayed, it asks if I want to dial this:
<br><label>,hone<label>07945xxxx
When I press yes, it says it can't dial:
<br><label>,hone<label>07945xxxx
For obvious reasons in that it can't dial a code.
This must be a Safari iPhone/Mac issue, and what on earth does 'hone' mean anyway?
So I tried this html after the tag in my header.php, to make my site browser compatible.
<script
src="css_browser_selector.js"
type="text/javascript"></script>
This didn't work for the phone issue (there are others but let's stick to this for now.)
So how do I get apple iPhone, using Safari browser, to perform the same simple task as Firefox, Chrome, Android etc.
Perhaps there is a way to hide
<br><label.....
Like:
.div class ["<BR><label..."]
{display: none}
? It's behaving like published text so treat it as such?
I came across this but not sure what to do with it or if it is the right code? I'm getting the same issue with Google maps
"<"followedby"!"<br/><label>Phone:
</label>""followedby">"
"<"followedby"!"<br/>.
<label>Location:
</label>""followedby">"
But
$adcontactphone
Represents generic phone as well as specific phone number -including label tags
Based on the link provided in the comments I can deduce that $adcontactphone is being assigned the following value:
<br/><label>Phone:</label> 7576XXXXXX
You can see that string contains valid html tags, but then you are using $adcontactphone inside an href attribute:
<a href="tel:$adcontactphone">
...
</a>
This results in the following html after interpolating the variable:
<a href="tel:<br/><label>Phone:</label> 7576XXXXXX">
...
</a>
Many browsers will not consider this as a usable value for href. Some browsers may be made to filter out tags inside the attribute and others may not. This is not a browser compatibility issue because each browser is free to handle this invalid attribute in its own way.
If you fix $adcontactphone to contain just the phone number you will find that the link will start working in most browsers. The result you are aiming for would be this:
<a href="tel:7576XXXXXX">
...
</a>
There are also other invalid html problems that should be fixed to be sure that this section of your page is consistent across all browsers. For example:
<div class="location">
<Location: </label> London, UK</div>
You have an unmatched < here, also Location is not a supported html tag so some browsers may not like that.
Maybe it should look like this?
<div class="location">
<label>Location:</label> London, UK
</div>
I've looked everywhere and can't seem to find the code. Hopefully one of you can help!
I have a YouTube-subscribe button on my site and it's has a trouble. In microsoft edge, IE and all browsers it looks like the first link below but only in Chrome I see button correctly. (the second link below)
Here's a code of my button:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="NAME" data-channelid="ID" data-layout="full" data-count="default"></div>
http://i.imgur.com/7OfkESu.png
http://i.imgur.com/fR1UWkN.png
p.s sorry for my bad english.
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.)
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"/>
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+