I have created a website, debugged it in Visual Studio by using the "view in browser" feature, and decided it was ready to be deployed onto our test server. When I debug the program from Visual Studio the contact page has elements that look like this:
When I go to the address of the website on the server, it displays like this:
The star is a glyph-icon from Bootstrap tools that were already on website's solution when I opened it (someone else made the solution). The code for this section of the site is below:
I tried to find information about why this isn't displaying correctly, but was unable to. Without knowing anything about the server, what would you recommend me checking or changing to resolve this issue?
Edit: I think it is worth mentioning I have tried both Chrome and IE and get the same results on each of them. Trying to run the page in compatibility mode hides the glyph-icon star all together.
I believe the issue ended up being browser-related. I was using a newer version of IE than what we had on our server so my elements were displaying differently because something I had previously done was unsupported by the older version.
I corrected this issue by nesting the span glyph-icon elements inside of the proper header tags and using margin-left: style property to space them out properly.
Related
I've been looking for an answer for a while now and I can't seem to find any reasons why this is an issue. I have various places in my style sheets where I use cursor: pointer for UI elements like buttons and links. The majority of the time it works as I expect, but occasionally they just don't want to work. I'd love to say I have a specific example in the style sheets that would ensure replication but that's been the issue. When it happens, it's not just for one element, it's for all of them. I've experienced this across the board with modern browsers and it seems to just be completely random which makes it hard to troubleshoot.
The only thing I've been able to confirm 100% is that if it does happen, I can open developer tools, then select an element to inspect that is supposed to have the cursor: pointer and the effect begins working everywhere again. I'm not sure what's going on here and it's driving me up the wall.
Is there any documentation surrounding this issue or something similar?
I experience it in localhost.
I haven't noticed it in production.
I haven't noticed it on JS Fiddle or Codepen when creating wireframes.
Is it a localhost issue? I've even thought it may be related to something I had done prior, but it happens even as I just navigate the site while debugging, sometimes it works on one page, but come back to the same page later in the session and it may not work anymore.
I know this one's tough and there's not a lot to go on. I don't usually make posts without code, but I'm just wondering if anyone else has experienced the same or a similar issue and resolved it.
I too have experienced this. It's actually not a code issue at all. I've found that the cursor: pointer bug you're experiencing is directly related to the Visual Studio 2017 (and newer) remote debugging browser window.
Solution
In Visual Studio, disable "Enable JavaScript Debugging for ASP.NET (Chrome & IE)".
At the top of your Visual Studio window, go to Debug -> Options. The highlighted item in the screenshow below must be unchecked:
This was a feature added in 2017, and while it helps with debugging JavaScript and TypeScript, it does so by launching a plain browser window ("remote debugger"); that is, no extensions, no bookmarks, no history, etc. The remote debugging browser window seems to have its fair share of bugs.
I saw this same behavior but not while debugging through visual studio. If I hit F12 to go to the Chrome dev tools, then click on an html element. The cursor goes to the style listed according to the style sheet.
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.
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
My company has purchased a third-party package with a built-in customer facing web portal, and I'm being tasked with integrating it into our site. Unfortunately, the web portal does not look great, and we have absolutely no control over how it looks (other than asking the vendor for changes - $$). In order to make it look somewhat like the rest of our site, I've stuck it in an iFrame (I'm not thrilled about this either) to put our logo and top navigation on it.
Please note, I am not attempting to manipulate the iframed page in any way.
Firefox handles this just fine, but in IE7 and IE8, not all of the CSS is being applied properly when the application's pages are displayed in the iFrame. Specifically, it should be applying a font-family of Arial to all TDs, but some text inside TDs are not being displayed as Arial.
Any ideas as to what is going on? This only happens when the pages are viewed inside the iFrame. Outside the iFrame, the CSS is applied as it should be. I'm guessing we're going to have to get our vendor to make some changes, but I'd love to know why the iFrame is impacting the page like this.
Thanks!
Have you opened the site you want to integrate as standalone in IE? Maybe it has nothing to do with the iframe, but with the ie itself. That would mean, that the system your company bought, doesn't provide browser-compability because of lack of CSS-IE-Fixes.
These are some debugging steps you can try:
Install the Firebug extension for Firefox. Right-click on an item that looks different and select "Inspect Element". The "Style" tab on the right will show you where styles are coming from.
Save the main document into disk (File->Save as->Web page (complete). Start stripping stuff from it until you get a small test-case you can post here. (Alternativelly, you can spider the site into disk with WinHTTrack.)
Is there a simple way to save an HTML page that has an external stylesheet (1 or more) referenced but force all of the rules to be inserted into the page itself, inline? So basically I want to move all external rules onto the elements that they affect themselves.
For what it's worth, I'm using nearly every major browser (incase the solution is browser-specific), and I'm on Windows (incase it's OS-specific).
I'm assuming you've seen the online tools that are available like this one? This online tool (which I have not tested but looks like it works) gives you the option of providing a url or source code and shows warnings for cross-browser compatibilities with your styles.
I use a tool that does something like that, but it was written for Ruby and TextMate for Mac. It is released by Campaign Monitor as a way of preparing HTML emails. It brings all the rules from the stylesheet and makes them inline styles.
It might give you a good start. I'll keep looking.
TextMate Email Bundle
The piece that does the heavy lifting is the TamTam RubyGem which brings the CSS inline. However, it seems to only support one style element (not link elements). If you could work with those restrictions, you could get it to work on Windows using Ruby and a ruby script file. Not quite drag and drop I'm afraid.
i use chrome extension Save Page WE