Aptana 3 - Code completion not showing all browsers - css

My Aptana 3's code completion is not showing all browsers for keyword browser compatibility.
In various tutorials, I saw Aptana can show icons for Chrome, Firefox, IE, Opera and then CSS Core in the pop-up code completion drop down. I only see Firefox and IE.
I have all browsers installed and available in Aptana and they do show up under the 'Green Play Button' drop down.
How do I get to see all browser compatibility for keywords?

In "Aptana Menu Window/preferences/aptana/editors" you can see a browsers to use in code assist.

Related

Section doesn't show up on mobile, but does in dev tools

Having a really weird issue with this section on the contact and home page...
http://tecnoempaque.com.do/contacto/
Only on phones the phone number text doesn't show up. It does in dev tools when i select different devices. I have an iphone (safari)
I just asked my friend to go to the site on her phone that has chrome. Seems to work. Maybe it's CSS comparability with safari? But the classes should be identical.. It's a popular theme so would've guessed this wouldn't be an issue.
Safari can be a little wonky if you add
.fusion-content-boxes .content-container{-webkit-appearance: none;}
It should resolve any issue with Safari i did notice you had some data-animation attributes in the parent tags. I've had issues with Animations loading correctly in Safari when its a pre-built theme.

New "Responsive Design mode" in Safari: Internet Explorer, Chrome, Firefox Emulator

In the new version of Safari there is a new "Responsive Design Mode". You can switch between Safari, Internet Explorer (7,8,9,10) and Firefox. Is it actually running Windows Internet Explorer 7 if I click it?
On a page with icons it changed the positioning of the icon when I changed to IE 7.
It would be pretty helpful if they would actually emulate IE...
Edit:
The same website, on the left with safari selected and on the right site with IE 7.
Image: http://imgur.com/ZLTlzDQ
Image 2: http://imgur.com/XJIHaL1
In this WWDC 2015 video, it is stated that setting the user agent in the responsive design mode sets the UA string only; nothing more. No emulation or whatsoever. Besides, making IE work on OS X would require both tremendous effort and collaboration of Microsoft and Apple. I don't think it will ever happen, especially not for an extension for a non-profit software.
I know this answer doesn't explain your screenshots but I can not comment more on that without seeing the code, yet my 2 cents would be on the css prefixes. Safari might be ignoring / applying them according to the user-agent and that would explain the difference. IE conditional tags would be another possibility that comes to mind.

Icons not displaying properly on Firefox

I'm using the glyphicons pro library for my website and I noticed that on my MBP Retina, they show up as hi-res on Chrome, but not FF (even though FF says it's up-to-date). Here are a couple of screenshots (first one is FF):
Any idea what's going on?
You might be using a Web accelerator addon in Firefox that could cause this pixelation. Try disabling that plugin and see if it works.
If thats not the case then your Firefox may be running in 256 color mode, for details see Website colors are wrong.
Another possibility - check the properties of the shortcut you use to load Firefox (right-click, then Properties). Under the Compatibility tab, make sure nothing is selected.
or Maybe your screen res changes in FireFox, see this

CSS Debuggin for IE

I'm seeing some really strange css float behavior in IE and I'm trying to diagnose the issue. Is there an equivelent to Firebug or Chrome's "Inspect Element" in IE?
How do you typically debug CSS positioning issues in IE?
There are a couple of options available, IE8 has a decent developer toolbar built in, you can access it by pressing F12 or if not going into the options menu and using developer tools, it doesn't work as well as firebug, but once you are able to select an element, you can easily change the styles. Firebug lite is another option though I havent used it in IE.
Have you tried firebug lite?
IE9 has got great debugger, check it out. You can also set compatibility mode to IE8 or IE7 if you want.

HTML Tool to determine where style is coming from

I have an ASP.NET page where I need to figure out where the style for a textbox is coming from. There are several style sheets defined for the page and I want to be able to use some sort of tool / editor that will tell me what styles were used and from what file(s) to render the textbox.
Thank you.
Use Firefox with Firebug and inspect the Text-box. Firebug is the most useful tool to do exactly that.
In IE you can use the IE Developer Toolbar. But I'm a fan of FireBug for FireFox.
From comments: Bernard Chhun recommended FireBug Lite as an alternative to IE Dev Toolbar. It also works for Opera and Safari too.
Most browsers have developer tools (build-in or as extension) that can show you the cascading order of the applied rules.
For Firefox there is the Firebug extension, Safari (WebKit) has Web Inspector, Opera has Dragonfly and for the Internet Explorer there is the Internet Explorer Developer Toolbar.
The web developer toolbar for Firefox has CSS and element inspectors which I find very useful.
You can also modify the CSS in the browser so you can tweak layout without going back to your IDE

Resources