39332

Top of Page Slightly Cutoff When Using Hashtag/Anchor Links (FF Only)

Question:

This is part 2 of this question: <a href="https://stackoverflow.com/questions/21175632/hashtag-link-causes-content-to-jump-why" rel="nofollow">Hash(#) Link Causes Content To Jump - Why?</a>.

The root issue is actually something that's only occurring in FireFox (my apologies for not bringing this up in the original question). When I put together the <a href="http://jsfiddle.net/GKCE6/10" rel="nofollow">Fiddle</a>, I thought I had recreated it cross-browser, but even with the fix that was suggested by <a href="https://stackoverflow.com/users/1299385/skyout" rel="nofollow">SkyOut</a>, the issue is still not resolved in FF.

Here's the original: <a href="http://jsfiddle.net/GKCE6/10/show" rel="nofollow">http://jsfiddle.net/GKCE6/10/show</a>

And here's the version with the hashtag in the URL: <a href="http://jsfiddle.net/GKCE6/10/show/#some-content" rel="nofollow">http://jsfiddle.net/GKCE6/10/show/#some-content</a>.

This time it's a bit harder to notice, but you can see that 'A link' is slightly cutoff at the top (just on FF). I removed the height: 1000px rule from the original Fiddle, just to verify that, while the issue gets fixed on Chrome, there's still a similar issue in FF.

Any ideas?

<em>Fiddle: <a href="http://jsfiddle.net/GKCE6/10" rel="nofollow">http://jsfiddle.net/GKCE6/10</a></em>

<strong><em>UPDATE 1/17/2014</em></strong> I actually found the problem - seems like it's a result of the height property in the 'clearfix' that's being used. If you compare this <a href="http://jsfiddle.net/GKCE6/21/show/#some-content" rel="nofollow">fiddle</a> with this <a href="http://jsfiddle.net/GKCE6/23/show/#some-content" rel="nofollow">fiddle</a> (in FF), you'll see what I mean. Removing the height:0 fixes it. Any idea why that would be breaking FF in this one, tiny instance?

Answer1:

Edit: Took a look at your fiddle again and this time I updated it with a few changes. <a href="http://jsfiddle.net/GKCE6/12/" rel="nofollow">http://jsfiddle.net/GKCE6/12/</a>

I took the off all of the set widths that you had, which will make it more fluid/responsive to the screen size. Also your nav was collapsing because of the floated elements inside of it, so I added a clear class and cleared the floats in your nav.

html { margin: 0; padding: 0; background: none repeat scroll 0 0 #FFFFFF; height: 100%; width: 100%; } body { min-height: 100%; } #container { margin: 0 auto; overflow: hidden; position: static; width: 100%; height: auto; } nav { border-bottom: 1px solid #E6E6E6; margin: 0 auto; padding: 1em 0 0.2em; display: block; } nav h2 { float: left; display: inline; } nav a { float: right; display: inline; } #content:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } #content { border: medium none; border-radius: 0; box-shadow: none; margin: 0 auto; padding: 0; } .clear { clear:both; }

Recommend

  • pandas to_datetime parsing wrong year
  • Autocorrelation returns random results with mic input (using a high pass filter)
  • Angular2: dynamically making parts of a text clickable
  • Elastic search Not filter inside and filter
  • Pandas conditional on index column
  • RealmBaseAdapter with multiple RealmObjects
  • Optimization of an all-paths algorithm
  • Who can crack this twitter regexp?
  • How to edit css for jquery datepicker prev/next buttons?
  • Base Internationalization and “Could not find a storyboard named […]”
  • UITableView takes much longer to load when numberOfRows returns a large number
  • C# 4 and CLR Compatibility
  • Is there a way to call library thread-local init/cleanup on thread creation/destruction?
  • Classic ASP URL Rewriting
  • How to create a Unix-domain socket with specific access permissions
  • Efficient User-Agent Regex to find Safari in Python
  • uml Composition relationships to RDF and OWL
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • Install PHP intl extension on MacOS
  • Webgrid not refreshing after delete MVC
  • Jquery UI tool tip close icon
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Can Jackson SerializationFeature be overridden per field or class?
  • Java applet as stand-alone Windows application?
  • Deserializing XML into class C#
  • Updated Ionic CLI but shows previous version (Windows)
  • Javascript + PHP Encryption with pidCrypt
  • Large data - storage and query
  • Apache 2.4 - remove | delete | uninstall
  • Circular dependency while pushing http interceptor
  • Traverse Array and Display in markup
  • Android Studio and gradle
  • How to include full .NET prerequisite for Wix Burn installer
  • AngularJs get employee from factory
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • Qt: Run a script BEFORE make
  • costura.fody for a dll that references another dll
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize