Why is my site in progress on the "HTML5 Boilerplate" system resulting in non-interactive pages?
Example: http://www.maxilham.com/buttons
I am no expert at coding, but I have made several websites and have an increasingly better knowledge of html, css, js and so on. I do not have real training or a technical background, so I always like to try systems and templates that are probably more semantically correct and up to date than anything I would write out of thin air.
Thus I downloaded the http://html5boilerplate.com/ template and then went about coding as I normally do. Everything looked perfect (at least as I expected it to, not finished designing), but when I replicated index.html to start testing links and building the other pages, I realized no links on the page were clickable, and that in general the whole thing was acting more like a screen-cap or .pdf then the website I thought I had made.
When I stripped everything out of the BP .css file (except for what I had added), I broke the structure/styling, but all the links became active, hovering states showed, etc..
I cannot pinpoint what it is about the starter index.html/style.css combo or what I am doing wrong to them, that is breaking the site.
Does anyone know of an obvious mistake/coding conflict that would freeze/lock my pages?
Thanks in advance for any help and sorry if this is too specific/generic/not in right place.
AB
Check for a negative z-index. If you have a z-index that is lower than 0, it will place it 'behind' the body tag, aka make it completely non-interactive. Only reason I guess that is because I am unable to inspect anything and I've seen this before.
Alternatively, make sure you don't have some sort of page-wide element with a z-index that is higher than everything else, however Inspecting any element on the page only selects the body tag, leading me to believe that is the culprit.
I doubt the problem is in any way directly related to the HTML5BP.
Related
It has been brought to my attention that a website I'm helping out with sometimes has problems with span elements being injected. Those spans will break the whitespaces and make the text hard to read. Those spans look something like this:
<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>
The website is run with/by WordPress, but that does not seem to be the cause because the affected posts look fine and show no sign of this markup in the post editor or database.
Also, those spans only seem to occur at nighttime. I tried to nail that down, but as so often, I couldn't really verify it yet, as it did not occur again to me, not even at night. Right now everything is fine and none of these spans are present.
I'm guessing it has got something to do with night-mode in browsers (although behaviour was the same in Edge and Firefox) or the night-mode in Windows but then on the other hand I haven't noticed this on any other page yet.
So, this is somewhat strange and hard to nail down, but you'll find copied texts that contain the same markup, when you use a search engine and search for "data-contrast span". So, at least I'm not the only one with this problem.
Any ideas how to nail this down and find out what causes it?
Browser plug-ins are usually given permission to modify page source at run time. I would guess the culprit is a cross-browser extension like Night Eye or Dark Reader.
In general, adding a <span> shouldn't mess with your layout unless your CSS is changing span properties away from the browser defaults.
Option 1
You might be able to fix the issue by adding CSS to control how the layout looks:
span[data-contrast="auto"] {...}
That will select all spans that have that data attribute. Then add styling to counteract the layout issues you see. That said, since the extension is adding the code after the page renders, it may override whatever you do.
Option 2
A better solution would be to create your own dark mode. Most plugins/OS night modes won't mess with your code if you provide your own theme options. A "dark" theme is the 2020 version of being mobile responsive; you should provide it in your code or live with the consequences when users, browser makers, and operating systems make their own decisions.
If you need help creating an alternate theme, CSS Tricks has a good write up.
Since it's not clear what software they are copying from, I've personally experienced this when copying from a Word Doc that's been opened in Microsoft Teams or in SharePoint, and then pasting directly into a website's editor (our site uses the TinyMCE text editor, a commonly utilized free text editor).
My recommendation: copy directly from the desktop version of Word, then paste into the editor and that prevents the "data-contrast" spans.
I assume there must be some hidden spans in non-desktop versions of Word Docs that they add to ensure the document displays the same way as the desktop version. The text editor doesn't know what to do with it, so it strips out everything, but the "data-contrast" portion.
Hope this helps someone out there as the original post was as asked some time ago.
Hi all,
I have been working on this website here through the Weebly editor. I studied Web Development 10 years ago and have only been getting back into it for this job, hence the use of Weebly, hoping to make things easier for myself and for my employer to take over the site when everything is working well. I have been having a problem with links not performing correctly in Chrome and Edge, working fine in Firefox and Safari. I have been looking for the past 3 days now and tried a whole bunch of things without success.
I have built pages more like the main menus being one page and the submenus links to anchors within that page.
With the way Weebly works, I didn't see a way of adding an "id" attribute to any "Title" or "Text" element you use to struture your content. So I started with the fallowing sample code, interjected where needed:
<a name="anchor-name"></a>
I was just placing an "embed HTML" element a little above where I wanted the link to land to compensate for the menu always being at the top. This simple solution works fine with Firefox and Safari. But for some reason, with Microsoft Edge does not take me to the anchor, just stays at the top of page; using Chrome, it doesn't work properly when opening the link from an outside source, link from email or doing a right click and "open link in new tab", it jumps further than intented but works fine once you're on the site and go through the different sub-menus. Very puzzling...
In my research, I came across people with similar problems, never really the same. But I tried this more elegant way, creating a CSS class with the negative top to compensate for menu and changing display to "inline-block", some saying it corrected there problem with IE. No luck for me, Firefox still working fine though.
.nav-anchor{
display: inline-block;
position: relative;
top: -150px;
visibility: hidden;
}
I came also across someone saying to check for errors with the W3.org validator, see result here. The first error is :
Error: X-UA-Compatible HTTP header must have the value IE=edge, was
IE=edge,chrome=1.
I couldn't figure out how or where to change that, I looked through the Weebly editor > Theme editor in all the files and didn't see it anywhere. So not sure if I can add it someplace, or if the Weebly just includes that part for you. Any idea if that's is on the path of solving my problem?
I haven't taken the time to go through all the errors, can the errors make the links not perform correctly?
The answer here (thank you Jeffrey Kastner) did help some what with Chrome, Right-click > "Open in new tab" on a submenu link now sometimes takes me to the right spot, sometimes jumps too far down. I tried over and over with the same link, seemed random. I haven't got feedback from client using IE.
Thank you in advance for any help
(edit:greetings and thank you note disappeared on first post for some reason)
The short answer for your question is you'll want to add meta tags with those in your site's theme within the various types of header template files.
In the majority of themes I have seen used on sites at Weebly, the following "Header Type" files are in the theme editor, and you would need to add the following to each of those as children to the head tag:
header.html
no-header.html
splash.html
(of course, your list may be different depending upon the theme you're using on your site).
The meta-tag HTML code you need to include as a child to your head tag would be:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The chrome=1 part is usually no longer required since the Chrome-frame was discontinued in 2014, but many people still include it as part. What is happening is you're instructing Internet Explorer to operate in "standards" (the latest rendering engine). The full answer to what this tag does with this setting is available in more comprehensible detail in this stackoverflow question.
I'm not sure if this will completely resolve the issue of your links not operating as expected, since there are many things which can intercept or interrupt the event bubbling process which occurs such as: javascript, frameworks, CSS issues, and many more things. If you were to provide some more concrete information and code examples with errors about what you're seeing, I might be able to help further.
Also, you may want to search in the Weebly Help Center and Knowledgebase, consider asking this question in the Weebly Developer Community or for a more personal engagement, by creating a Weebly Support Case.
This never used to happen on my site, I haven't knowingly adjusted anything in the index which could cause the issue. But with the regular web address it automatically scrolls down the page. However if I type www.domain.uk/# it works as intended.
Any ideas? Sorry for the noobie question :D
This is likely happening because you're modifying a Bootstrap template. Some templates have scrolling features that tend to be useless once you do any kind of customizing. I would go through the templates' Javascripts and look for anything that's related to scrolling, and either fix or remove it.
I have a Windows 7 with service pack 1, and Internet Explorer 10. And I have my site, http://www.gfcf14greendream.com/ . It looks great on Chrome, Firefox and Safari, but not in Internet Explorer. For starters, I wanted to test how my site looks using IETester, and it's a mess (please compare by clicking the link above):
The thing is, I think that maybe the issue could be that IE8 doesn't load well from <object> tags, is that it? I use three object tags to load the three white parts: header, vertical menu, and "site log" (you can see them here: http://www.gfcf14greendream.com/header.html , http://www.gfcf14greendream.com/verticalmenu.html , http://www.gfcf14greendream.com/thesitelog.html)
To load those three sites, I use the following code:
This one for the header, <object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>
This one for the menu, <object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>
And this one for the log, <center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>
Please let me know if anyone has any ideas concerning this "mess". Thank you!!
This isn't a real answer (It's a quick and careless answer at best, so don't take it too seriously)
But I just thought I'd mention that the the W3C markup validator might be useful to you if you don't already know about it.. It catches bad markup practices or errors on your page and can give you more information on how to fix them. At the time of writing, your front page alone has 10 errors and 3 warnings on it. Maybe this could point you in the right direction?
upon a quick skim of your page you don't seem to be utilising CSS properly. That is to say, that I see you are using css but you have elements on your page (use of <center> HTML tags, inline styling and things like that) that go against the grain of why CSS was invented.
If you haven't already seen the CSS zen garden, take a quick read/look at it. It should set you right on why we use CSS instead of tables and alignment tags.
(People sometimes don't get this immediately, but , click the links on the right in the zen garden. The same HTML and page content are completely restyled using one html file and seperate CSS sheets)
Good luck!
Edit:
Oh, I almost forgot to mention that internet explorer 8 doesn't have much (if at all) HTML5 compatibility. If you want to develop websites and web apps in HTML5 you'll be hard pressed to serve your I.E 8 visitors and may end up spending more time fixing bugs than you are developing the content.
Some developers are already boycotting I.E 8 entirely to usher in the new era of the web with HTML5 and CSS 3. There are a few js compatibility libraries out there (like excanvas for the new <canvas> element for example) but they don't work flawlessly and you will eventually have to draw the line somewhere. (lol. canvas.. draw line.. get it?) That being said, i did find this article and this may be useful to you:
turn-on-html5-in-ie8-or-lower
Not every website requires HTML5 and it's new technologies, but if you plan on using it for things like the <canvas> tag, Id suggest (from my own personal opinion) you forget about I.E 8 and concentrate on browsers that utilise it.
Remember that you can make checks in your HTML to see what browser version your visitor is using.
You can see if they are using an incompatible browser, and if so, you can then alert them that their software is out of date and suggest to them alternatives (such as chrome or firefox)
There's a bunch of tutorials on-line about this, here's the first decent looking one I found in a quick Google search this article covers using this technique for seperate CSS sheets but there are others that talk about the problem I mentioned in more depth and I'm sure you can probably figure out how to do it anyway once you read the article.
Either way, I'd say you've got a little bit of reading ahead of you to understand why your humble website does not work in an increasingly obsolete browser.
Again, good luck to you in your future endeavours.
Edit was too harsh:
Having looked a the site I would start by suggesting in future you think about design from a users perspective - the colour scheme you're using isn't very friendly on the eye, the red text against the green is particular troublesome to people with red/green color blindness, you also should consider how your content is presented.
End Edit:
However, regarding your IE issues.
First things first, with any work is getting a firm plan of what you hope to achieve and setting a good groundwork before starting. With HTML that means leveling the playing field with regard to browser quirks, and to achieve that, you use a reset css file.
This ensures that all browsers (as close as possible) behave in more or less the same way, regarding padding, spacing, line heights etc, and can go along way to prevent these sort of problems from happening, and allow you to achieve consitancy.
There's more info at the link below.
http://meyerweb.com/eric/tools/css/reset/
Secondly your HTML version - your declaring HTML5 but then use HTML4 values and attributes - basically your site (as pointed out above) is not valid markup.
Hello every one i had created a website using dreamweaver in windows7 which worked good in my system.I opened the same html site in another system with operating system windows xp and even in windows 7, but all the alignments of images ,textfields ,buttons and header image,content etc everything has been changed.what might be the problem.Can any one help me in solving this problem.Your answer will be most precious thing to me.Thanks to every one whose going to spend time on reading this question.
Without knowing more details it's hard to properly answer your question. Going to take a shot in the dark about a common issue.
If you did it in Dreamweaver you probably used its interface to drag and drop div elements around to place them in exactly the right positions. The problem with this method is that DW will use positioning relative to your screen size and it might not show up too well on other resolutions.
The solution to this is to make sure you code your containers correctly and not have a look at DW's CSS to fix it.
Without the HTML of your page (post it in pastebin and link it here), can't give a better answer.
Make sure you VALIDATE your code. In my experience using dreaweaver, the doctype declaration and the order of the tags can affect image positioning.
That was because you used different browser. In using Dreamweaver, try to not leave default values. For better debug you should code it with HTML and CSS. Those are not programming languages because they don't need exactly programming knownledge.
A really good HTML lessons at w3c.
A really good CSS lessons at w3c.