In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a. Download Mozilla Firefox, a free Web browser. Firefox is created by a global non-profit dedicated to putting individuals in control online. Get Firefox for Windows, macOS, Linux, Android and iOS today!
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:
… as my target – but that made no difference. As far as I knew, we just needed:
… 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.
I can’t think of any reason why but try changing the links from this format
to this one
If that doesn’t work try removing any hashes (#) from your ‘names’ and ‘IDs’.
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).
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:
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 bugI 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”;
};
}
Editing Configuration
Currently I have it set to view properly on Firefox PC because Im assuming most people are using a PC. If I change the.headerimage 'margin-top' to 7px, it will view properly in Safari and FF Mac. I had the #margin-top entered so I could have it viewing properly in Safari, FF Mac, and IE. The CSS code I added works in Opera. The checkbox is styled exactly as I want it in Opera (although it has a weird border colour) but it doesn't work in Firefox, Internet Explorer, Safari. Firefox 47 Gecko 47 47.0.1 on Win10 and Mac Safari 9.1.1 WebKit 9.1.1 on Mac Chrome 51 Chromium 51 51 on Win10 and Mac Opera 38 Chromium 51 38 on Win10 and Mac UC 5.6 Chromium 48 5.6 on Windows 7 Operating systems Mac Mac Mini with OS 10.11.15 This is my main test station. It also runs all virtual Windows systems. Windows 7 and 8.1 All.
Css For Firefox Mac Version
- The forum ‘Other’ is closed to new topics and replies.