Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks
Related
I am using Monaco Editor 0.22.3 in combination with StencilJS and TailwindCSS. Everything works great, except for an annoying visual glitch in the intellisense dropdown as depicted here:
As you can see, the last suggested item is partially obscured.
I suspect it might have something to do with some style coming from TailwindCSS, but I'm pretty much at my wits end here. I tried to use the F12 element inspector to see if I can find some hints, but that is proving to be close to impossible since the intellisense dropdown disappears as soon as it loses focus.
Any hints would be much appreciated!
UPDATE 1
Here's a screenshot with a bigger editor to demonstrate that the dropdown itself does not appear to be clipped:
UPDATE 2
Here's an animated gif showing the issue when trying to debug the HTML elements using the browser developer tools:
As you can see, the dropdown disappears as soon as I click anywhere else.
The issue comes from a fairly common css class being used: .tree. Libraries such as tailwindcss add padding-bottom to it for example. To undo some of its additions for the monaco editor we added the following to our css file:
.monaco-editor .suggest-widget div.tree {
white-space: unset;
padding-bottom: 0;
}
And to get get to that solution for other libraries and styling artefacts:
It should have been quite easy but the suggestion dialog has a tendency to hide when we try to observe it. so a UI guy and I spent a while going through the playbook to try to debug it. The only successful way to inspect it was to abuse the JS debugger by running (which was a hint from a stack overflow post that I'm struggling to find to give credit), and just cause the JS engine to pause:
Run:
setTimeout(5000);
This gives us 5 seconds to get the suggestion window to show (or set to a relative amount of time to the problem). After which, you could mostly inspect it as normal with a quick shortcut:
ctrl+shift+c that brings up the debuggers element selector.
Here we are, the suggestion was from the following post:
How can I inspect disappearing element in a browser?
break on subtree probably would have worked, but we became a bit impatient stepping through the changes. ctrl+ / didn't seem to help in this case, which left the odd setTimout to save the day.
The drop down is clipped at the editor's boundaries. I actually wonder how you can see the last empty part outside of the editor.
For inspection: use your browser's dev tools to see how the containers overlap. This will avoid that the editor hides the drop down.
Update
After your update I think now that somehow the styles are messed up. You will have to figure out a way to show the popup and still navigate the DOM tree in the developer tools. Try to locate the parent and see if that popup is only hidden (it still shows up then in the tree) or if it is dynamically created or is a portal, which lives in a completely different part of the tree.
If that cannot be done then try to disable all CSS you have and see if that solves the issue. If so enable the CSS piece by piece to find the culprit.
So i recently got this CSS style for Facebook which is acting really wierd.
It's using a fixed background image and whenever i scroll it's doing this:
Click
Wierd thing is: This occurs on every style with a fixed background, if i completely remove said background the site works like a charm.
Still, I have no idea if it's just faulty code that causes the problem or if it's the browser itself.
I'm not that good at CSS but if I knew where to search or what could cause the issue, I could probs fix it myself.
Sooo... If anyone wants to take a look at the code, here it is: Click
Thanks in advance to anyone who decides to put up with my shit, heh
edit: changed link to Dropbox temporarily
i've a little bit trouble to fix one thing, may you could help me out with it?
I try to make Chrome/Firefox works with a Logo sliding problem. You can see here the first pci is how does it looks like in win with chrome or firefox. IE looks normal like the second pic.
What did i wrong in the code? many thanks in advance.
http://abload.de/img/bildschirmfoto2013-067oqb8.png
http://abload.de/img/bildschirmfoto2013-06u6rho.png
I can't tell you unless I see the CSS. Post the css on something like pastbin.com or if it isn't real long then add it to your question and then you are likely to get some answers, but I can't tell you what is wrong with your CSS from a picture of the results. Too many possibilities.
Now I'm wishing I had asked for a demonstration instead. Am I correct in thinking that the text is part of a horizontal menu and the logo is completely separate and not contained by the text container at all? If this is the case and the image looks and behaves like you want then perhaps it is the menu that needs tweaking to get it to match up correctly. At first I was thinking this was something like a div containing text and an image or having an image as a background.
If you could go ahead and post a link to a page or a pastebin or something that has the html and the css for the menu and the logo together then I'll try it out myself and see if I can find the solution. Someone else may already see it, but I'm still not seeing the clear picture of your situation or a resolution to your problem yet.
I'm working on a site and I have a big css problem; my menus are 'Swinging' in a very weird manner when hovered. The css / html code on its own works well, but once I implement the slider within the real site it behaves differently. Its probably a css issue, but also to note is my site is built on a Responsive theme. Anyone with an idea of how I can fix this please lete kme know. Thanks. Here is the link to the site.
When you say "swinging" do you mean the effect where they start at the top-left then grow diagonally to the bottom-right? That's jQuery's ".show" event firing. Try replacing that with ".slideToggle".
Unfortunately the Wordpress template you're using is quite messy so it's hard to troubleshoot.
I have built a context menu but have found annoyingly that when I right click on my site in firefox all text and images just seem to randomly get selected. It is not a JS issue as I have removed all JS from the site. Thinking it must be a css issue. I have never encountered anything like this before...
I don't have an example page to show I'm afraid. Has anyone experienced this before in Firefox. I am using the latest FF4.
Cheers Guys!
*UPDATE:*
Here is a pasting of the pure html from the page that is having issues,
http://jsbin.com/aneja4/3/edit
did you try to disable all your addons you have installed? maybe one of them is causing the problem.
I have FF 4 but neven encountered this problem before.
And I could be wrong but I don't know of any css code that would be able to select text. it's pure for the design and structure of the site. it will be mostlikely a js problem or something else
I have seen this too... I think it has something to do with the way the site is structured... If you have nexted divs, or a div that does not quite cover the entire page, a right click on the parent div seems to select everything in the nested div. It's quite annoying... especially when trying to build a custom context menu, or use the default menu to refresh the page...
Any fixes/changes that we should know about for FF that is causing this? I'm using FF4 and XP (yeah, yeah... corp. system)
JF
It's likely a problem with your HTML layout that firefox is struggling to work with. But without seeing any code, it's not possible to speculate any further down that path. #JDF's suggestions may help you, though.
If you can't work it out, and can't live with it, you could just disable the ability to select text.
In Firefox (and other standards-compliant browsers), you'd use the CSS user-select: none;.
See this question for more info on how to achieve this: How to disable text selection highlighting using CSS?
This is most likely caused by having a contentEditable element on your page. Any element (other than body it seems) that contains editable content will be highlighted/selected when you right click on it in Firefox (4.0 and 5.0 is all I can confirm). If everything on your page is wrapped in a div it'll appear that the whole page is selected. If you (can) right-click somewhere on the body the regular context menu should work.
Although I can't see any instances of contentEditable in your code on jsbin, it could be added by a script that I can't see (possibly even modernizr?).
I think this is related (although it doesn't match exactly)
http://support.mozilla.com/en-US/questions/766166
http://aloha-editor.org/ exhibits the same behaviour when right-clicking anywhere inside the #wrapper div.