I'm having an issue where IE 7 styles look mostly correct in Quirks mode, but in Standards mode it is ignoring or not seeing many of the styles. The quirks mode version looks much closer to the way it looks in Chrome and Firefox.
UPDATE
I found that the file had a syntax error in the CSS file which was causing everything below that point in the CSS to be ignored by IE 7.
IE 7 renders web files differently than other browsers (so does the other version of IE).
To fixed that, you need to use css hack for each IE versions:
<!--[if IE 7]>
<link rel="Stylesheet" type="text/css" href="styles/ie7_styles.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="Stylesheet" type="text/css" href="styles/ie8_styles.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="Stylesheet" type="text/css" href="styles/ie9_styles.css" />
<![endif]-->
Related
I have a simple Tizen webapp that works fine in emulator, but not on my Samsung signage TV (SSSP6).
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class='embed-container'>
<iframe width="100%" height="100%" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts allow-popups" src="https://ad-presenter-staging.herokuapp.com/betsonglobal"></iframe>
</div>
</body>
</html>
If I replace the <iframe> with an actual <video> with the same content as what's in src, then it works fine in both emulator and on the TV.
How do I go about debugging this?
It's very possible URL is blocked during access. try updating the config.xml => policy => allow-navigation or Access
with external URL domain you want to access.
If I replace the with an actual with the same content as what's in src, then it works fine in both emulator and on the TV.
=> Does it show any error when is used on TV? The info displayed in region should be helpful to debug.
How do I go about debugging this?
=> If you're able to connect the TV to your PC, you can try launching the webapp in debug mode. After launch, if you check console section in Web Inspector, it should be logging the URLs blocked and the reason for block which should aid in fixing
enter image description hereI wrote an app in AngularJS two years ago. It was my first stab at AngularJS in a coding bootcamp. I haven't coded much in 2-years. I never hosted the app. It was working as intended the last time I used it. I opened it up today in Chrome and it no longer works. I'm getting a bunch of errors in the console. Is it possible to fix it and get it running again or do I need to start over with the newest version of AngularJS?
Your problem was:
1.your links to libraries were in body and not in header.
2.all your links were missing https:
3.You might running from file and not in local server.
Problem Solved:
I run it in localhost Apache server.
I changed all your links with https: included
I removed all links inside header
Below is your new index.html file.
Copy and paste this new code and run in local server.
<!DOCTYPE html>
<html ng-app="oppApp">
<head>
<title>workMe</title>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Angular-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>
<!--Material-->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="js/app.js"></script>
<script src="js/NewOpp/newOppCtrl.js"></script>
<script src="js/OppService.js"></script>
</head>
<body>
<header class="header">workMe</header>
<div ng-view class="background"></div>
</body>
</html>
Look at the result. and console with no errors
Here's the original page that I coded using "Adaptive Design", and has no support for mobile devices: http://opportunityfinance.net/Test/savedateIE8/index.html
Looks great in IE 8 as it should via the pic below:
Here's a page that I optimized for mobile devices, basically it is EXACTLY the same as the first page, except it adds in <meta> tags and such for mobile devices. Looks good in all browsers that I test, except IE 7 (which I could care less about), and IE 8 (WHICH I REALLY CARE ABOUT) A lot of people visit the site using IE 8, so it needs to support IE 8!: http://opportunityfinance.net/conference-2013/index.html
Pic of what it looks like in IE 8 below:
Why is this looking completely different in IE 8 than the first pic? I can't understand it. AFAIK, it should be loading up the index.css file and applying it exactly like the first page. What is the problem here?
Could it possibly be related to this bit of code:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
But if I remove that code than it looks all jacked up in IE 9 also!
EDIT: Please do not edit my code changing IE 8 to IE 9. I understand that this problem is being tested in IE 9, but it is using IE 8 Document Mode in Developer Tools, so it is the same as IE 8!
Ok, here's how I solved this problem. Apparently any version of IE before IE 9 does not attach the stylesheet when using media queries inside of the link tags media attribute. Also, IE 8- had some odd behavior when presented with this line: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> And as it turns out, I don't even need this line: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> which was causing problems since the Google Chrome Frame wasn't available, and edge wasn't either. So, I just removed that line, and all is fine now.
Here's the dirty hack I had to do in order to get this working for mobile devices and IE 7 and 8, for anyone interested:
<!--[if gte IE 9]>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<![endif]-->
<!--[if !IE]><!-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" href="css/narrow.css" media="only screen and (max-device-width: 600px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/index.css" media="only screen and (min-device-width: 601px)" />
<!--<![endif]-->
I wish there was an else statement in these conditionals, but whatever. This works now and loads up the index.css file and thank god, cause I was pulling out my hair on this one! The narrow.css file doesn't need any conditionals, since IE 7 and 8 ignore the stylesheet anyways cause it uses media queries.
I just started using cakephp and upto so far everything is going well, but my problem is that i want to have an IE6 specific stylesheet, i have been doing this for quite sometime with just normal HTML but if i try to do it in cakephp is doesn't put the stylesheet.
My code for outputting the IE6 stylesheet inside the default.ctp is
<!--[if IE 6]>
<?php echo $this->Html->css('ie6');?>
<![endif]-->
I have my stylesheets under webroot/css/ie6.css
Can anybody tell me what i might be doing wrong.
Thanks
Dee
When I add that code to my CakePHP project I get this output
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie6.css" />
<![endif]-->
So it appears to be working fine. You might want to check if the file is actually at the right place (try to append /css/ie6.css behind the URL of the page you're looking at and see if it returns a 404 or your CSS file).
Nothing wrong with the conditional comment too, so my guess would be a file error.
I have two CSS sheets for my website, one main CSS, and one mobile CSS. The problem is that when viewing on a mobile device (iPhone, Android) the two style sheets get mixed up. For example, when viewing the website on an iPhone, some of the styles from the main stylesheet are being applied.
What could be causing this? Below are my CSS declarations:
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<meta name = "viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The main.css file is going to be included whatever device you are looking at the page in, the media query part for the mobile.css will be called in for your given parameters along with the other stylesheet.
If you're having issues with styles being included then either exclude the main.css using a media query or redeclare these styles in the mobile.css file.