Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Other › [Solved] Firefox Anchor Links

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 17, 2013 at 3:24 am #42806
    gAttkins
    Member

    Long-time reader, first-time poster…

    I know this isn’t a CSS question, but it does relate to the use of IDs as anchor targets…

    I recently put together a one-page website, using anchor links. This works fine in all browsers, except Firefox (Mac and Windows).

    Having hunted around the web, I’ve tried setting:

    <a id="x" name="x"></a>

    … as my target – but that made no difference. As far as I knew, we just needed:

    <a id="x"></a>

    … these days.

    Does anyone have a quick solution for me?

    If you need to see the page in question, you’ll find it over at http://www.do-not-shop4usb.co.uk

    Many thanks in advance.

    February 17, 2013 at 3:50 am #124933
    Paulie_D
    Member

    I can’t think of any reason why but try changing the links from this format

    Who are shop4usb?

    to this one

    Who are shop4usb?

    February 17, 2013 at 3:58 am #124934
    Paulie_D
    Member

    If that doesn’t work try removing any hashes (#) from your ‘names’ and ‘IDs’.

    February 17, 2013 at 1:29 pm #124971
    gAttkins
    Member

    Thanks Paulie – I had the links originally without the index.html in them – so I know that doesn’t make a difference, but will try removing the hashes to see if that makes a difference (doesn’t sound right though!)

    G.

    February 17, 2013 at 1:32 pm #124972
    gAttkins
    Member

    Hmmm – as I secretly suspected, that made the links lead to a page not found message… Any other suggestions?

    G.

    February 17, 2013 at 4:28 pm #124985
    wolfcry911
    Participant

    believe it or not, Firefox may be correct here. All the section child divs are floating, so they’re taken out of the document flow. The target anchors have no content and nothing to size them, so they’re essentially 0 in height, as is the parent sections. So all the sections effectively stack up on the top of the page. Contain the floats and it will work (I’d use either overflow: hidden or clearfix on section).

    February 18, 2013 at 2:31 am #125028
    gAttkins
    Member

    Thanks wolfcry911 – that makes sense in a way – if the top of each section is seen to be at the top of the screen, there would be no reason to jump down. Will have a look at the containing DIVs to see what can be done.

    February 18, 2013 at 4:42 am #125039
    gAttkins
    Member

    Thanks wolfcry911 – your suggestion pointed me in the right direction… I added a display:inline-block attribute to each section within the page, and now the anchor links are working as they should in Firefox.

    August 29, 2013 at 1:36 pm #148532
    SmArgus
    Participant

    Hola! This problem was absolutely infuriating me to no end. (although most coding problems do :)

    I am using FireFox 23.0.1 and unfortunately the display:inline fix above was insufficient as it broke other portions of the layout.

    Fortunately, I stumbled upon a JavaScript fix which successfully gets around the bug so thought I would share it too in hopes of getting a couple of fixes all in one place.

    I inserted the following into the HEAD of the HTML doc:

    <SCRIPT LANGUAGE=JavaScript>
function now(){
    window.location.reload(true);
}
</SCRIPT>
    April 25, 2017 at 10:14 pm #254234
    parsiants
    Participant

    hi my name is reza in iran
    i have a site and ask a request for create anchor link in page in the site
    i have code anchor link in middle page with top code
    a id=”c1″ name=”c1″ href=”#c1″ rezerv /a
    and
    a id=”c1″ rezerv /a
    this code work in chorom browser and dont work in mozilla firefow browser
    please tell me where bug

    April 25, 2018 at 7:55 am #270233
    bluelarch
    Participant

    I ran into a similar problem and went a different way for the solution to avoid having to change any HTML or CSS.

    I added a piece of javascript to examine the current URL and if it contains the value #anchorname (which is the actual name of the anchor I want to load the page at) in the URL then AFTER the page has fully loaded it goes to that anchor tag. That way the page has figured out the sizing of all the elements and knows where the anchor is.

    if (window.location.href.indexOf(“#anchorname”) != -1) {
    window.onload = function (event) {
    window.location.hash = “#anchorname”;
    };
    }

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Other’ is closed to new topics and replies.