many pages on sites run have localised links in form of http://www.site.co.uk/index.php#calendar. these work expected - taking browser calendar part of web page index.php in ie , chrome, newer versions of firefox seem have issue in only displaying chosen id area on page.
for example; have page following html content (assume name index.php ):
<!doctype html> <html class="no-js" lang="en-gb"> <head> <meta charset="utf-8"> <title>control panel</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <link rel="canonical" href="http://www.site.co.uk/avail/index.php" > <!-- javascripts --> <script src="/includes/js/jquery-1.11.0.min.js"></script> <!-- style sheets --> <link rel="stylesheet" href="/includes/css/normalize.css"> <link rel="stylesheet" href="/includes/css/sitewide.css"> <link rel="stylesheet" href="/includes/css/control.css"> </head> <body> <main> <nav>...</nav> <h1>a heading</h1> <section> <h2>heading h2 one</h2> <p>some text</p> <p>some more text</p> <p>bulking text, etc etc etc.</p> </section> <section> <h2><a id='text1'></a>section 2</h2> <p>some text</p> <p>some more text</p> <p>bulking text, etc etc etc.</p> </section> </main> </body> </html> so, when page visited @ index.php whole page - 2 headers , 6 paragraph blocks - displayed. when page visited index.php#text1 only second header , paragraph blocks displayed on firefox.
i have noticed across several different sites on html5. points:
the rendering of page begins @ dom level id tag occurs. such if id tag occurs in
<section>section , parent elements displayed.this not effected deprecated anchor
nameattribute.this not effected or in element id tag positioned.
this effect not seem influenced css/js base stylers such normalize.css or bootstrap. there minor difference in modernizer page loads problem refreshing page displays whole page but not focus browser window on id tag area.
when viewing site through firebug entire site source code present (but not displayed), firebug not seem show
display:none;have found.my pages w3c html5 valid according nu-html checker linked w3c validator.
so, conclude:
after reading can tell me how side step or solve issue? or if there syntax mistake i've made that's causing issue, can correct behaviour?
finally: test page featuring problem presents me can found here on test site page: http://www.walberswick.org.uk/index.php
the problem seems css. on click weird overflow bug in browsers. played awhile , after changing these:
@media screen , (min-width: 801px) .leftsidetext { padding: 2px 2px 2500px 2px; margin-bottom: -2500px; float: left; width: 48%; } @media screen , (min-width: 801px) .imgsidetext { padding: 1px 1px 2500px 1px; margin-bottom: -2500px; float: right; width: 48%; } to these:
@media screen , (min-width: 801px) .leftsidetext { padding: 2px 2px 2500px 2px; display: inline-block; width: 48%; } @media screen , (min-width: 801px) .imgsidetext { padding: 1px 1px 2500px 1px; display: inline-block; width: 48%; vertical-align: top; } all worked fine.
a thing note. use display: property instead of float: property or flexbox. make sure have 1 main element per page , include it's role="main".
Comments
Post a Comment