how can I hack CSS for IE6 and IE7 in same expression?? (if posible, of corse)
-edit-
i mean,
* html #div{ //hacks ie6}
*+html #div { //hacks ie7}
does a similar expresion hack both?
-edit2-
For example this inline code HTML
<!--[if IE lte 7]>
<style type="text/css">
.contButton p a{ height:25px; width:auto; }
.contButton p a span{ height:25px;width:auto; }
</style>
<![endif]-->
will only affect IE7 or lower, how can i select that in CSS ???
example: -*?? #div { //the CSS properties here will affect to IE6 and IE7 }
Use conditional style sheet includes like
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="ie_fixes.css" />
<![endif]-->
or use the dirty solution using an asterisk (which makes your style sheets invalid in the eyes of validators)
.example_class {
*background-color: #ffffff;
}
Use conditional comments instead so your "hack" CSS is separate from your "modern browser" CSS:
<!--[if IE 7]>
<style type="text/css" src="ie7styles.css" />
<![endif]-->
Related
I have two css files
import "bootstrap/dist/css/bootstrap.min.css";
import "semantic-ui-css/semantic.min.css";
And I prefer the design of the bootstrap in the design where they refer to the same thing, how can you write in a code line to the site to prefer the bootstrap?
Usually what I do in such cases of CSS conflicts is roundup the classes that are being used by the element that is causing the conflict and then extract only those classes and have them as internal styles(inside the tags) because the CSS preferences you know is in-line > internal > external and id > class > element and also !important takes precedance. for more info refer here - What is the order of precedence for CSS?
As an example -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.text-primary{
color: black !important;
}
</style>
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
</div>
</body>
</html>
You see I didnt want the text-primary class so i redefined it internally with !important since its bootstrap css you need !important to override it.
Similarly you can extract the classes that are needed by your sidebar(menu) and then define them internally to override your external css.
Presumably related to UTF8 conversion, but I have no idea where or why the conversion is taking place or how to disable it: if I have a JSX file that includes " " in a text XML node, then when that node is rendered in some browsers the result is "Â" rather than the non-breaking space desired.
Research suggests that the direct cause of this is a unicode non-breaking space character, U+00A0 (rather than the entity I'm trying to use), is being translated to UTF-8 and giving the resulting byte sequence 0xC2 0x00, and then being interpreted as ISO-8859-1. What I'd like to do is prevent this translation happening.
This doesn't seem to happen in desktop browsers at all, but the app I'm developing is an Apache Cordova app, and when the app is installed on a mobile the problem occurs, so either its the mobile browser itself, some aspect of using a WebView rather than a standalone browser, or part of the Cordova compilation process that's causing it.
My build process also uses webpack and babel, but I don't seem to have any settings relating to character set handling that might be relevant to this.
Example code that shows the fault:
function startApp () {
ReactDOM.render (<span> </span>, document.getElementById('app'));
}
if (typeof document !== "undefined") document.addEventListener ("deviceready", startApp, false);
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' http://www.randomtext.me;
script-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' connect.facebook.net;
style-src 'self' 'unsafe-inline';
media-src *;
img-src *;
frame-src 'self' gap: *.facebook.com;
connect-src * data:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<style type="text/css">
#font-face {
font-family: "OpenSans-Regular";
src: url("fonts/OpenSans-Regular.ttf") format("truetype");
}
#font-face {
font-family: "OpenSans-Italic";
src: url("fonts/OpenSans-Italic.ttf") format("truetype");
}
#font-face {
font-family: "OpenSansCondensed-Light";
src: url("fonts/OpenSansCondensed-Light.ttf") format("truetype");
}
#font-face {
font-family: "OstrichSans-Medium";
src: url("fonts/OstrichSans-Medium.otf") format("truetype");
}
</style>
</head>
<body><div class="Fill" id="app"></div></body>
<script type="text/javascript" src="js/styles.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
Update
I spotted this blog post where somebody else has experienced this. The suggested solution is using:
<meta charset="utf-8">
in index.html. This would work to solve the problem as I describe it, but I am also interested in a solution that won't prevent rendering of existing documents that use ISO-8859-1 as their encoding.
I had problem with this entries too.
Check this question:  jsx not working.
You can use dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html: 'Select Scenario: '}} />
Or
<h1>Code {' '}</h1>
I have started to use JSON editor library and angular wrapper from angular-tools/ng-jsoneditor.
The bug appears to be very annoying when switched to code view. Anyone had something similar?
Situation image
Situation image 2
Happens only when quotes appear on that line. Thats pretty every line for a JSON.
Using standart lib, nothing changed. I'm running out of ideas.
controller
$scope.obj = { data: null, options: { mode: 'code' } };
$scope.onLoad = function (instance) {
instance.expandAll();
};
view
<!DOCTYPE html>
<html ng-app="jsonapp" ng-controller="jsonController">
<head>
<meta charset="utf-8" />
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta content="charset=utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="height:800px"></div>
</body>
</html>
I had a similar problem, after a few hours of investigation finally I find that what causing it was the font-family style(I had global font for all app).
So I override it with ng-deep:: to font-family: monospace.
This was a solution in my case!
I have deploy AngualrJs and Visualforce application in SFDC, Its working fine in IE10 , IE11 , Chrome , Mozilla but its not loaded in IE9. I have tried this
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" controller="CartController">
<!--[if IE 8]>
<html class="no-js lt-ie9" xmlns:ng="http://angularjs.org" lang="en-US" data-ng-app="diageoApp" id="ng-app" data-ng-controller="masterCtrl">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-US" xmlns:ng="http://angularjs.org" ng-app="diageoApp" id="ng-app" ng-controller="masterCtrl" >
<!--<![endif]-->
Have you looked at: https://docs.angularjs.org/guide/ie
It has info about IE8 issues that might be useful to you.
I'm guessing that those Angular properties in your html tag aren't making it into the Visualforce page. One easy workaround is to setup Angular on something in the body, like:
<div ng-app="ngApp">
For a working example check out: https://developer.salesforce.com/blogs/developer-relations/2014/07/building-salesforce1-apps-visualforce-angularjs-bootstrap.html
I am trying to implement a simple angular-flexslider app within my project:
https://github.com/woothemes/FlexSlider
I have been successful in sliding the images, but i cannot get the next/previous buttons to show, also, there seems to be a left margin which shows the previous image.
HTML:
<head>
<title>Angular FlexSlider Example - Basic Slider</title>
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/woothemes/FlexSlider/master/flexslider.css">
<style type="text/css">
.flexslider-container {
width: 100%;
margin: 1px auto;
}
</style>
</head>
<body ng-controller="BasicSliderCtrl">
<flex-slider slide="s in slides" animation="slide" >
<li>
<img ng-src="{{s}}">
</li>
</flex-slider>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://raw.githubusercontent.com/woothemes/FlexSlider/master/jquery.flexslider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/thenikso/angular-flexslider/master/angular-flexslider.js"></script>
<script type="text/javascript">
angular.module('BasicSlider', ['angular-flexslider'])
.controller('BasicSliderCtrl', function($scope) {
$scope.slides = [
'http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg',
'http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg'
];
});
</script>
</body>
</html>
Plunker: http://plnkr.co/edit/2529sAA4i6qcCzbZgCA2
Here's what i am trying to achieve: http://flexslider.woothemes.com/index.html
Thanks
I don't know if you still have this issue but I ran into both of these problems myself. The fixes that worked for me are below.
Issue 1 - next/previous buttons not showing
The next and previous buttons are shown using css. Ensure that flexslider.css is included in your page.
Also, if you open up flexslider.css you will see under an "Icon fonts" comment (its near the top) some source urls. Ensure that these source urls match the location of the flexslider font files in your project.
Issue 2 - Left Margin showing previous image
Add the following code to a css file included on your page
.carousel li {margin-right:0;}