I recently got started with building websites in wordpress, I got tired of building CMS back-ends myself. To start it off nicely i decided to build my portfolio (still in progress, I might add), but for some reason Chrome adds a weird margin to the top of my website. Every other browser handles the website just fine (even safari, also webkit). I used a CSS reset form to get rid of all the margins, but this one is really breaking my balls. Any help on how to remove this?
Update:
For anyone landing on this poorly formulated question: the reason for this whitespace was because I didn't put the wp_header() and wp_footer() in the header and footer respectively. This caused Wordpress to add margin for an admin bar, but no hooks to render it. The link I've added previously doesn't relate to the question anymore and I removed it.
It looks fine in Chrome here. There are however some errors in the markup that you would want to fix to be on the safe side. You can never be sure how browsers react to incorrect code.
It's mostly that you have anchor tags around your list elements instead of the other way around.
Validation result
Related
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'm having a Chrome only issue when adding anchor tags for internal links inside an HTML widget. This may sound quite unimportant but it's quite annoying for myself and many users.
When a page is loaded, if the links are middle-clicked or Ctrl-clicked the 1st time, they only open in a new tab/window like they should, but the 2nd time they act as though they were left clicked and use the same tab/window. For some reason this problem doesn't happen when I use Hyperlink or Anchor widgets. It also isn't an issue in Firefox or IE8.
I've verified that the final HTML of the Hyperlinks and my manually scripted tags are exactly the same. I applied the same styles to the HTML widget to do this. I even tried creating a Hyperlink and calling toString() to generate the HTML, but the bug still occurs.
Does anybody know why this could be happening or have any ideas of how to remedy it? This is a situation where I can't use Widgets so I need to create the tag HTML manually. I'm not a GWT expert, but I don't understand how the compiled code be handling the Hyperlink and Anchor widgets differently than the ones inside the HTML widgets. Any incite into this could be helpful.
I'd be interested in knowing if anybody else could reproduce this as well. I'm running Chrome 23.0.1271.97 and GWT-2.5.0. I know this happens in older versions of Chrome and GWT because it's been a problem for a while, at least since GWT-2.4.
Uninteresting nuances:
If there are two different links inside the same HTML, they bug will happen independently. Meaning that you can middle-click each one, and they will both work correctly, just not the 2nd time. Refreshing the page also resets them so the bug won't happen on the next middle-click. I also found that if the same link is twice contained in the HTML widget, they actually wont work independently. Meaning middle-clicking one will cause the other to incorrectly handle it's 1st middle click.
Just finished debugging this. It is not a GWT issue but a Chrome issue.
I created a bug report: http://code.google.com/p/chromium/issues/detail?id=177502
You can reproduce using this simple HTML page:<!DOCTYPE html>
LOCAL
I'm getting weird background artifacts in Chrome when I hover or highlight over objects. This doesn't happen for me in Safari or Firefox.
http://charleslawportfolio.com/new/
No idea what's happening, but it only occurs if I include my buttons in the footer. If I remove those buttons, this issue doesn't exist anymore.
I'm using Bootstrap, but I've looked over the code countless times and can't figure it out.
Here's an image of the issue
http://i.stack.imgur.com/W3MOk.png
Any leads would be really appreciated, thanks!
Your page is missing a DOCTYPE, which is required for proper display;
Requires HTML5 doctype
Bootstrap makes use of certain HTML elements and CSS properties that
require the use of the HTML5 doctype. Include it at the beginning of
all your projects.
From the docs.
Also, make sure to validate, your page is riddled with repeated ids.
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.