I've recently been developing a micro-site that uses some of the newer 3D effects transforms in CSS3. However, I've been trying to get a little too tricky with layering so that certain optical illusions take effect and it's been the cause of numerous headaches...
In general, there's this issue in Chrome (but not Firefox, haven't yet tried Safari or IE) where everything seems to "render" appropriately onscreen, but when I go to click a link or highlight some text in one of the more "tricky-layered" areas, my cursor goes limp and I'm unable to get any functionality. I can see everything just fine, it's just there's an invisible wall preventing my cursor from interacting, if that helps the explanation.
Without pasting a mile-long piece of experimental code, does anyone know off the top of their head what might be causing this issue? My best guess is that the z-index inheritance has gone awry at some point but it's difficult to diagnose... leading to my next question of whether or not anyone knows of any good strategies for layering diagnostics (tools would be great here as well)!
I'm of course well-versed in the standard Developer Tools/Firebug...
Thanks guys!
Okay, so I solved my problem and came up with the following strategy for future reference in diagnosing layering issues...
Check discreet Z-Index values of all elements that may be interfering with one another. Re-order them if necessary and see if that solves the problem. If not, move on.
Check discreet positioning on all elements from step 1. Make sure they are declared to either have "position: absolute" or "position: relative" in CSS markup. DO NOT RELY ON INHERITANCE/DEFAULTS. ABSOLUTE DECLARATION IS KEY.
Check your "backface-visibility" values. If your setup is complex, it's easy to lose track of what's what.
Following that pattern is what finally did it for me. My problems turned out to be a combination of all 3 but they didn't necessarily reveal themselves to me until I followed the steps above.
Related
I've been having small issues with Chrome for quite some time now, and although I have discovered several Stackoverflow threads with similar issues I simply cannot find a fix.
The issues are as follows:
Certain elements borders appear as 1px (when in reality they should be 2px) and only fix themselves if I zoom in and out of the page, or Ctrl+A highlighting everything.
Other elements move slightly (either the element as a whole, or the text within them) when I hover over it.
Text also fails to appear sometimes and only reappears if I hover over a nearby element.
The issues are specific to Chrome, and I understand opacity (something used widely throughout my project) can be an issue with the browser. I found several threads that cited transforming, positioning relatively etc as solutions but I have had absolutely no luck. Sometimes when I load the page these issues don't exist and the elements appear normal (minus the text disappearing, that's pretty much a constant).
I've attached a video so you can see the issues first hand, but I am unsure what code I should attach. If there's a specific elements code you would find helpful to see I will happily upload it here. I can also send page files if that helps, but I'm not sure if it fits within the rules here.
Anyway, here's the video: http://sendvid.com/uvq3gpzo
Apologies for being so vague, as I know that's not particularly appreciated around here. I just have no idea where the issue lies and thought someone may have had something previous beforehand.
Thanks for taking the time to look into my problem and any help would be much appreciated.
As a quick intro, I'm not sure what the best way to phrase/tag/etc this question is, especially as it's so not really reproducible so I would appreciate any input from the stackoverflow community.
On a couple of different WordPress websites I help manage, I occasionally see HTML link elements overflow their normal inline position - the link text overlaps any text after it, almost like the link is absolutely positioned. However, the links are statically positioned and inline as normal.
The big problem with this is that it's not consistent and I've not been able to reproduce the problem. This makes debugging and tracking very difficult. I work mostly in Chrome on Windows 7/10 but I have had reports from clients seeing it in IE and occasionally in Firefox (all on Windows I believe).
In addition, when I have been able to use the Chrome developer tools to debug this, the problem resolves itself if the browser window is resized or if almost any link css properties are changed. It's as if the browser draws the page wrong the first time and when it's forced to redraw the elements, it does it right the second time.
Is anyone else seeing this problem? Does anyone have any ideas what would be causing this and why it would be so inconsistent?
I've not been able to get a screengrab of the issue happening as it's not possible to replicate but I may update this question if I manage to capture it happening any time soon.
I am writing a custom application in C using GTK+2.0 and Cairo. Just for learning purposes (and if successful, then for deployment), I wish to recreate something similar to a overlay toolbar/widget (I am sorry if the terminology is not correct) that appears when a mouse moves over a given area on the window, and disappears when the mouse moves away. The toolbar, as I imagine, should appear on top of the existing widgets without displacing them or altering the widget packing in any way. Is it possible to accomplish? If yes, can you please point me to relevant tutorials/examples and/or outline a way to do the same?
Thanks in advance.
Not sure this is easily doable in GTK2. However, I learned recently that there's the GtkLayout widget which allows pixel exact rendering of widgets, so you can even display some widgets over others. Or you may implement your own container widget.
Please note that since GTK3, there's GtkOverlay which seem to do what you want.
You may also give a look to Clutter, which might allow this. Furthermore, there are projects of merging GTK and Clutter for GTK 4.
The little known GtkHandleBox is capable of doing what you want. I must warn you it is deprecated in GTK+3 because is going against the usual UI direction. Also, the correct positioning will be subject to the windows manager quirks, so I'd expect some issue in this regard.
I'm having some CSS issues that seem to only occur in chrome. The site in question is liveinthelead.com, and it's still being worked on so if you notice any other strange problems feel free to let me know, I won't be offended. My main problem is this though:
In all of the browsers I've tested except for chrome the site looks fine. However, in chrome, on the main page, the middle post in the three-post divs are shifted down about 20px. But when I open up the developer interface, they shift back to where they're supposed to be! Maybe it's just a local problem, but here are some pictures of what I'm talking about. If you don't experience the same issue then maybe it's just something weird going on with my computer. Cheers.
When I initially load the page
After I open the developer console
One thing that I noticed is that in your div#three-post you set float:left to div.member1 but not to the remaining div.member2 or div.member3.
That's where I would start investigating the problem. Maybe you should set the remaining two divs to also float left. You may need to clear them afterwards too.
For the sake of convention — and so that you don't encounter this confusions again — use IDs for selecting specific elements, e.g., member1, member2, member3, and use classes for selecting multiple elements that should share the same attributes.
I'm unable to replicate on Chrome 15.
=\ could be a good thing! Try another computer!
I'm writing a web app. It's only ever going to be used with IE8, so I'm not concerned with the behavior of any other browsers here.
So: I know how to custom-style a button using CSS properties e.g. background-color, border, and so on. However, when you apply styles that way, the resulting button looks like a blocky table cell, nothing like the nice, glassy-looking button that IE8 renders by default.
Is there some way to add a tint to the nice glass-looking button? I.e., it looks just like it normally does, but with a red outline instead of blue, and a red highlight on mouse-over?
Or is this something I'm going to have to do by hand with images? Again, IE8-specific methods are perfectly acceptable.
Thanks!
-dan
There isn't really a filter that will get you as close to the default in IE, though you can get pretty close using the button tag and standard css. It will not look the same in all versions of IE though.
Here's the filter reference though if you want to try other things.
Regardless of browser, one of the quickest, easiest, most widely tested methods for styling buttons via markup is Jquery UI's button It's a matter of adding a few tags to the class element, and you've got a button based on an link, button, or input field. For styling, you can handle styling via CSS, or via the very well done ThemeRoller option, where you can control everything from text size to background type via a simple gui interface--and you can change on the back end or even the user end on the blink of an eye, even via drop down.
One caveat, since IE is non-standards compliant, rounded buttons fail gracefully to square--with proper styling.
I realize that you have determined that you can use a proprietary solution for IE, and in your case it might be just fine over the long term. But in my experience, that's a really dangerous path to follow. What if the actual long term is longer than your anticipated "long term?" You're specifying that it's acceptable to be proprietary to a browser that's well behind the accepted standards, is already a version behind, and uses unsupported (by universal standards) solutions to solve problems. Conceivably, that version is going to get tougher and tougher to find, and if Microsoft holds true to their patterns, once you install IE9 it will effectively render your computer difficult of downgrading. And, I can't emphasize enough that IE's market share is dropping like a rock, which is scary considering basically 95% of the machines out there have it pre-installed. All it's going to take is one overzealous IT director with "security in mind" to render your programming efforts moot. Sorry for the rant, but IE proprietary code has bit me hard more than a few times...
I'd have to double-check, but you should be able to use a combination of a background color and use a transparent PNG or GIF as the "background image" to add the highlights.
All things being equal, I've rather embraced the flat, square button - finding ways to make it work well with the design - but then again I've always been a straight line, square edge kind of guy. :)
As others have mentioned, you do want to be mindful (within reason) of what you may have to handle. It's quite possible that before the next re-write you're going to have to deal with IE9 - writing code that works well in IE8 and IE9 would be the most prudent approach.
Have a look at http://www.webdesignerwall.com/demo/css-buttons.html and also http://css3pie.com/.
Combining those you can get nice looking buttons in IE as well..