It seems that aptana HTML formatter doesn't understant when I have css directly in html source, with !important keyword.
exemple :
<html>
<head></head>
<styl type="text/css">
#thisisatest {
background: red !important;
}
</styl>
</html>
I use aptana 3 as a plugin for eclipse.
thanks,
trey
This is a known issue to Studio 3.0.3: http://jira.appcelerator.org/browse/APSTUD-2920. It has been fixed in the latest nightly build that you could update to (http://www.aptana.com/r/apupdate), or wait for the upcoming 3.0.4 release.
Related
I ran into an issue while using Worklight 5.0.5 for an Android mobile project today. This project does make use of Apache Cordova, Dojo Mobile, and Worklight libraries, if that helps.
The problem is that Worklight automatically generates unwanted inline CSS in some cases during build time. I cannot find which component of Worklight is responsible for this, nor can I find out how to alter or prevent this behavior when required. This may seem like a small problem, but the fact that it's inline CSS, and during build, means that I'm prevented from affecting it!
A search through the JavaScript and CSS, both those that I have built and those that are imported for Dojo, do not seem to show anything that would add the CSS.
Example:
I have the following tag in my HTML:
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="center segmentContainer">
After build, this shows in a WebKit-based browser (Google Chrome) as:
<ul bartype="segmentedControl" class="mblTabBarSegmentedControl mblTabBar center segmentContainer mblTabBarNoIcons"
data-dojo-type="dojox.mobile.TabBar" id="dojox_mobile_TabBar_0"
widgetid="dojox_mobile_TabBar_0" style="padding-left: 78px;">
The final inline CSS, the "padding-left", is what I'm trying to seek and destroy. Does anyone know what is responsible for this behavior, and how I can change or prevent it?
I don't know much about the technologies, but in case you cannot get rid of the CSS being inserted you can use !important in your own CSS. For example:
.segmentContainer {
padding-left: 0px !important;
}
This prioritizes the padding-left statement moving out of the normal prioritization order. Normally I bvelieve it goes inline, ids and then classes but with !important your class prioritizes.
Are you sure this Worklight's build process adding this style and not Dojo's parsing of the ? I would check Dojo mobile api to ensure it's not adding that by default. OOTB Dojo, for TabBar generates the following markup with inlined CSS.
<ul id="demoTabBar" dojotype="dojox.mobile.TabBar" single="true" iconbase="images/tabbar_all.png" fixed="bottom" role="tablist" class="mblTabBarTabBar mblTabBar mblFixedBottomBar mblTabBarNoText mblTabBarFill" widgetid="demoTabBar" style="bottom: 0px; padding: 0px;">
This is the default Dojo style. You override it writing this code in your AppName.html:
...
<style>
.segmentContainer {
//your personalization
}
</style>
</head>
<body>
......
<ul data-dojo-type="dojox.mobile.TabBar" barType="segmentedControl"
class="segmentContainer">
I really don't like ExtJS but I'm forced to use it. I want to use Twitter Bootstrap 2.2.1 for the main layout and ExtJS for grids and JS (policy).
I have an awesome looking Bootstrap design going but the minute I load ExtJS, the navbar, fonts, etc get all hosed up.
Is there a way I can get the two to work together without going into the ExtJS and tweaking tons of CSS?
The CSS file I am using is in the following path (for ExtJS):
js/extjs/4.1.1/resources/css/ext-all-gray.css
Thanks
Here is my solution:
1.use ext-all-scoped.css instead of ext-all.css
2.add the following code before you load ext-all.js
<script type='text/javascript'>
Ext = {
buildSettings:{
"scopeResetCSS": true
}
};
</script>
<script type='text/javascript' src='http://xxx.com/extjs/ext-all.js'></script>
3.remove the following declaration in ext-all-scoped.css to prevent extjs to re-render the body with those conflict css declarations after bootstrap has been loaded
.x-body {
...
}
The problem is that the rule
.x-border-box .x-reset,.x-border-box .x-reset * {box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;}
is somehow being applied for all page elements, also for Twitter Bootstrap input's (tested on FF, Chrome).
So you should simply provide
box-sizing:content-box !important;
-moz-box-sizing:content-box !important; /* Firefox */
-webkit-box-sizing:content-box !important; /* Safari */
for all Twitter input's.
Additional info on box-sizing.
I hope that this helps.
Well I used css3pie in asp.net which is not working. I tried every possible solution. Searched a lot of forums but failed to properly use PIE in asp.net. Let me show you my project structure.
I have master and inner master pages in my project hierarchy.
The css3pie is working on those pages which don't use master pages.
My css and .htc files are as follows
Root
css
script
When I use css3PIE without Master page the it works:
<script type="text/javascript" src="../Scripts/html5.js"></script>
<link href="css/IE.css" rel="stylesheet" type="text/css" />
The above code is working. But when i used any page with master. It is not working. My css looks some thing like this:
behavior: url('../Scripts/PIE.htc');
The css is placed in IE.css file. You can see the in above code.
Remember i tried every possible combination to refer .htc in css
behavior: url('../Scripts/PIE.htc');
behavior: url('/Scripts/PIE.htc');
behavior: url('/PIE.htc');
behavior: url('PIE.htc');
with and without quotes
One thing more. A lot of people are saying it is due to relative path. Well i tested those things. when i look at the rendered html in Development tools in IE. It applys the behavior but not working.
Please help me. It will be highly appreciated. Thanks in advance
Ok I fixed the issue. So i am writing here to help other peoples. When you are using master pages in asp.net and you are using .htc file as relative path in css then use position as relative. for target element which used css3 style. For example the css class is round-box
<style>
.round-box
{
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(PIE.htc);
}
</style>
The html element on which we will apply .round-box style is
<div class="round-box">This is a round Div<div>
So those who have issue with round corners not working on IE just put IE specific position:relative for IE browsers like.
<!--[if lt IE 9]>
<style>
.round-box
{
position: relative;
}
</style>
<![endif]-->
This will fix the round issue or those that have no border visible. Keep in mind position:relative will effect child elements. Use it wisely
It's not a path issue... it has to do with the web server understanding how to serve the .htc file. There is a wrapper script included that does this for PHP, you can start with that and tweak it for IIS.
Syntax highlighter 3.0 is not working on my blog. I use the newest version right from the website. The issues are:
If I write #include in my code, I get at the end of it. There's no text wrapping. The blog's link is http://snacksforyourmind.blogspot.com. I also checked out options but they give nothing but bloggerMode which I already enabled. All the issues are visible in the second code from top of the page. Does anybody have some idea how to fix it?
Depending on your template, the SyntaxHighlighter JavaScript code may run before the content has loaded. In that case, changing the code to run after a short timeout should fix the problem. Try this in the <head> of your template HTML:
<script type="text/javascript">
window.setTimeout(function() {
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
}, 10);
</script>
You can add further customisation of defaults before the call to ScriptHighlighter.all().
If you want to customise the look and feel of the SyntaxHighlighter code display, add some CSS like this:
.syntaxhighlighter code {
font-family: Consolas !important;
font-size: 10px !important;
}
The !important is necessary to override the SyntaxHighlighter theme definitions.
Firebug is an excellent tool to to show a screen media CSS for some HTML element, but is there a way to look at the print media CSS too? Or is there any other tool to see the print media CSS?
What about Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
when installed go to CSS -> Display CSS by media type -> Print
Newer Firefox
Open devtools with F12.
Go to Inspector tab.
Open Rules subtab.
There will be print media button.
Old firefox
Firefox does not need firebug now.
Run developer toolbar by pressing Shift+F2
Type media emulate print
Type media reset in order to return to standard view.
I would have never expected this to work, but it does. Install -both- the 1.5 beta of Firebug and Web Developer. When you choose the print css from Web Developer, the tools in Firebug suddenly work on the new print version of the page. So far I haven't found any problems with running both at the same time.
Use the Web Developer plug in. Then you can choose from the CSS menu which media you want the page to display as.
You might want to take a look at the webdeveloper toolbar - it allows you to select what CSS you want to see. In conjunction with firebug, it should be possible to see the print media CSS.
In Firefox (and some other browsers), you can see a static display of the print stylesheet by using Print Preview. It's nowhere near as useful as the web developer toolbar, but it can also help you understand what is going to be printed.
Actually, be aware that you might see #media print CSS when you don't expect it.
Like SO uses:
[..]#media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]
...and hence one might expect the CSS panel in Firebug to somehow show:
#media print {
#sidebar, #nav, [..], div.vote {
display: none;
}
}
But instead it shows the CSS as if the #media print is actually active, like:
#sidebar, #nav, [..], div.vote {
display: none;
}
(See also the related issue report: CSS Panel does not have #media UI.)
Edit 2 After reading Arjan's answer, I realize that this solution does not address correctly sites using (or abusing) the #media print CSS. (See example below.) But I think this solution still holds valid as a "non-perfect-quick-and-dirty-trick", above all for code that you have written and that you know beforehand that it doesn't have this.
With Firebug, you also can edit the <link rel="stylesheet" type="text/css" ...> and <style> tags to your convenience.
For example, you can switch an original
<link rel="stylesheet" type="text/css" media="print">
to
<link rel="stylesheet" type="text/css" media="screen">
and the browser will apply it. You'll also have to deactivate the screen-only ones.
Of course, this is only useful if you only want to quick-check a few pages with very few stylesheet links, but at least, you do not need to install any additional plugins.
Edit 1 This trick suggests me using javascript to automate this...
(Disclaimer: I'll use JQuery for simplicity. I'm not a Javascript expert.)
// Save all stylesheet links
allStylesheets = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');
// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
printStylesheets.attr("media", "screen");
}
Note that the default media is "screen" (w3.org - media attribute). This could be used in a button to show a page preview. The only drawback is that you have to reload the page to restore the original view.
As pointed out above, this solution does not work with html code like this, because the styling inside the #media print won't be applied by the browser:
<html>
<head>
<title>Hello world</title>
<style type="text/css" media="all">
#media print { h1 { color: red; }}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.
What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.
Firefox 68 added a button to "Toggle print media simulation for the page" to the Rules View of the Page Inspector (Bug 1534984):
There's a video of how to use the button in "View #media rules for Print" section of the "Examine and edit CSS" page.