I'm having some trouble with IE8 recognising some CSS that is generated from a PHP file and then included in my sites header. This CSS works perfectly in all other browsers I've tested but it simply won't apply in IE8.
If I move the dynamic CSS into my main css files - it works fine.
By dynamic, I mean the the CSS is generated from PHP. I'm already using respond.js to enable media queries in IE8 which is working because if I put this CSS in my main file - the CSS works.
However, if I put non-media query styles in the same file - it does apply. So this must be an issue with respond.js not seeing that responsive CSS.
When I 'View Source' the file has definitely included as it's printed in there but for some reason IE8 won't apply the styles. It doesn't show in Developer Tools.
Basically, the CSS should display a black menu bar at the top of the page when the browser window is narrower than 782 pixels.
You can see the full thing at: http://sandbox.benpalmer.me/flow/test/
The head of my document looks like this (this is a Wordpress theme/template):
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if IE 9]> <html class="no-js lt-ie10 <?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="<?php if($theme_settings['modernizr-version'] != 'none'): echo 'no-js'; endif; ?>"> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title( '|', true, 'right' ) . bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <?php
wp_head();
include(locate_template('assets/css/dynamic.css.php')); ?>
<!--[if lt IE 9]> <?php
if($theme_settings['modernizr-version'] == 'none'): ?><script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/modernizr.min.js"></script><?php endif; ?>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/selectivzr.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/vendor/respond.js"></script>
<![endif]-->
</head>
<body <?php body_class(); ?>>
The include(locate_template('assets/css/dynamic.css.php')); file that is being included is set up like this:
<?php
/*
| --------------------------------------------------------------------
| Primary Navigation
| --------------------------------------------------------------------
*/
/* Breakpoint
| -------------------------------------------------------------------- */ ?>
<style type="text/css">
#media all and (max-width: <?php echo get_theme_mod('nav-primary-breakpoint', '782px'); ?>) {
#wrapper {
margin-top: 42px;
}
.admin-bar #wrapper {
margin-top: 88px;
}
#mobile-header {
display: block;
}
#menu-primary {
display: none;
}
.drawer {
margin-top: 42px;
padding-top: 42px;
top: -42px;
}
}
</style>
This one has me stumped - I've been Googling for an hour which brought up suggestions of changing my DOCTYPE, making sure my comments are ended properly etc but nothing has worked so far.
I suppose that by "dynamic CSS" you mean CSS media queries. If so, the answer is very simple:
IE8 does not support media queries.
There are some JS polyfills that solve the issue, the most famous one is perhaps respond.js.
EDIT
From the discussion in comments: It seems that the issue is caused by the fact, that Respond.js can read CSS from linked stylesheets only, not from inlined CSS.
Related
I am using the html5blank to create a site on WordPress. Locally, the media queries are working perfectly fine but when and I add them to the wordpress style.css file, they don't seem to work. I have got rid of all media queries and kept only a simple one just to test it and it's still not working. I have my media queries at the end.
This is part of my header.php file:
<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/style.css" />
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: '<?php echo get_template_directory_uri(); ?>',
tests: {}
});
</script>
</head>
<body <?php body_class(); ?>>
<header>
These are the simple media queries I added for testing in Wordpress to the bottom of the css file, but are not working:
#media screen and (min-width: 600px) {
div.balancepersonal {
font-size: 100px;
}
}
#media screen and (max-width: 600px) {
div.balancepersonal {
font-size: 10px;
}
}
This is the p tag in the index.php file I'm trying to make responsive:
<div class="balance-personal">
<div class="balance-container">
<div class="top-div-balance">
<img src="img/IMG_6739.jpg" class="trees-photo">
<div class="trees-shadow">
<div class="container amenidades-txt">
<p class="balancepersonal">BALANCE PERSONAL</p>
You want the stylesheet_url param for bloginfo as seen here: https://developer.wordpress.org/reference/functions/get_bloginfo/
Reason: your current param gives location on the server file directory as opposed to a web location a browser can access.
Edit stylesheet_url should give you the complete location to your style.css.
Alternatively you could use the template_directory_uri (as you are elsewhere) and add the style.css part
My website loads perfectly on Firefox, but the CSS disappears completely on Chrome (although the html loads).
According to the console, this seems to be because Chrome is loading the contents of index.php into main.css and bannerTest.css like so:
On Firefox, however, it loads the CSS as expected:
Things I have tried that did not work:
clearing my history/cache/cookies
adding text/css to the tags. All this did was make the text render a
little weirdly on Firefox.
css and html validation. I fixed all the semi-colons and such. Still doesn't work.
What's the problem? I can't even figure out what steps to take to investigate what's going on more deeply, let alone figure out the problem itself. No errors are printed to the console as far as I can tell.
Here is index.php:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Study</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bannerTest.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<style>
/**
* The banner assumes a margin of 0px, but is not included
* in banner.css to avoid collisions with other themes and
* admin bars.
*/
body {
margin:0px;
}
</style>
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<?php
//Connect to MySQL database.
$host = "127.0.0.1";
$user = "root";
$password = "password";
$database = "database";
$r = mysql_connect($host, $user, $password);
if (!$r) {
echo "Could not connect to server.\n";
trigger_error(mysql_error(), E_USER_ERROR);
}
$query = "CREATE DATABASE IF NOT EXISTS " . $database;
mysql_query($query);
#mysql_select_db($database) or die("Unable to select database.");
$query="CREATE TABLE IF NOT EXISTS `groupcodes` (`groupcode` int(10) PRIMARY KEY, `usercode` int(10))";
mysql_query($query);
$userid = "";
?>
<div id="banner">
<div id="u-header-container">
<div class="container">
<div class="row-fluid">
<div id="home-link-container">
<a id="home-link" href="http://csue.edu/">
<span id="wordmark">U</span>
<span id="university">UNIVERSITY</span>
</a>
</div>
</div>
</div>
</div>
<div id="database-container">
<header>
<a href="index.php">
<h4 id="logo">Computing Systems</h4>
<h1 id="study_logo">Study</h1>
</a>
</header>
<div id="study">
<form method="post" id="consent-form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="wide-column">
<p>
By clicking the 'Acccept' button below, you hereby acknowledge the following:
</p>
<p>
I am 18 years of age or older, live in the United States, and have a Google Drive or Dropbox account.
I have read this form and decided that I will participate in the project described above.
Its general purposes, the particulars of involvement, and possible risks and inconveniences have
been explained to my satisfaction. I understand that I can withdraw at any time.
</p>
</div>
<input type="text" name="email_input">
<br>
<input type="submit" value="Begin Study">
</form>
</div>
</div>
</div>
</body>
</html>
You misdiagnosed the problem. It is due to visiting different URLs to load the HTML document rather then using different browsers. You just switched browsers at the same time as you switched URLs.
Look at the URL that is being loaded in your first image:
http://localhost/peergroup/index.php/css/main.css
In Chrome you must be visiting http://localhost/peergroup/index.php/ while in Firefox you are visiting http://localhost/peergroup/index.php (without a / at the end).
This is causing relative URLs to be computed differently.
A workaround is to use URLs that are relative to the site root (i.e. starting with a /).
This question already has answers here:
PHP DOMDocument error handling
(5 answers)
Closed 9 years ago.
I would like to have different outputs if the file is called by Ajax or not.
For that I have this code witch works fine:
/* AJAX check */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$content = get_content();
die($content);
}
my function for filtering the contend is this:
function get_content(){
//$file = file_get_contents('index.html'); //works better but i get only errors
$dom = new DomDocument();
$dom->loadHTML($_SERVER['REQUEST_URI']); //or $file
$section= $dom->getElementsByTagName('section');
return $section->item(0)->nodeValue;
}
my output is always empty.
Whats wrong here?
!!!I'am not looking for DOMDocument error handling!!!!
What I do for now is:
/* decide what the content should be up here .... */
/* AJAX check */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
/* if ajax, show only content of the section tag */
$file = file_get_contents($_SERVER['SCRIPT_FILENAME']);
$section = preg_replace("/.*<section[^>]*>|<\/section>.*/si", "", $file);
die($section);
}
/* not ajax, show page.... */
and it seems to work. I do not know it is the best solution because somewhere in this forum I read that its better to realise that with DomDocument().
Any suggestions are welcome?
Here is the html-file:
<!doctype html>
<!-- Determine browser JS free -->
<!-- HTML5 Mobile Boilerplate -->
<!--[if IEMobile 7]><html class="no-js iem7"><![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!-- HTML5 Boilerplate -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="shortcut icon" href="img/base/favicon.html" />
<link rel="apple-touch-icon-precomposed" href="img/base/apple-touch-icon-57x57-precomposed.html" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/base/apple-touch-icon-72x72-precomposed.html" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/base/apple-touch-icon-114x114-precomposed.html" />
<script src="/js/libs/modernizr.custom.js"></script>
<!--[if (IE 7)]>
<link rel="stylesheet" href="/css/fallback/icons-ie7.css">
<![endif]-->
</head>
<body >
<section role="main">
<header class="hero-banner">
<img class="resize" src="/img/base/spacer-hero.png" rel="/img/designers/banners/cloe-banner3.jpg" alt="Cloe" />
<noscript><img src="/img/designers/banners/cloe-banner3.jpg" alt="Cloe" /></noscript>
<hgroup>
<h1>Claudia</h1>
<h2 class="text-hl">Designerin</h2>
</hgroup>
</header>
</section>
<footer role="contentinfo">
<p><small>©2013 joe</small></p>
<p><small>Our website uses delicious cookies to improve your experience. We'll assume you're ok with that.</small></p>
</footer>
<!-- jQuery from Google's CDN with local fallback -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/libs/jquery-1.8.3.min.js"><\/script>')</script>
<script src="/js/libs/wfl.js"></script>
<!-- Initialises scripts from plugins.js and helper.js -->
<script src="/js/script.js"></script>
<!-- Google Goggles -->
</body>
</html>
You can turn the errors of by setting internal errors to true:
$doc = new DOMDocument;
$before = libxml_use_internal_errors(true);
$doc->loadHTML($html);
libxml_use_internal_errors($before);
You then won't have the errors logged any longer. In your case most likely you've got display errors enabled which might be okay for development, but on your production server, please switch to error logging otherwise your website would reveal too much data to the outside.
See as well:
PHP DOMDocument error handling
I have made three pages on the back end of Wordpress (Work, Studio, CTHM+) but they don't seem to appear on the front end of the site:
http://www.cthm.co.uk/work/
The header.php file has been edited but I'm not sure if I am missing something vital.
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
<script type="text/javascript" src="http://www.cthm.co.uk/wp-content/themes/child/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.cthm.co.uk/wp-content/themes/child/scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.cthm.co.uk/wp-content/themes/child/scripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function() {
$(".slider1").codaSlider({dynamicArrows: false, dynamicTabs: false} );
$(".slider1 .coda-nav-right-wrapper").mouseover(function(){ $(".nav1").css("display", "block"); });
$(".slider1 .coda-nav-right-wrapper").mouseout(function(){ $(".nav1").css("display", "none"); });
$("#coda-nav-right-1 > a > .coda-nav-right-wrapper")
});
</script>
</head>
<body>
<div id="header">
<h1>
<a href="http://www.cthm.co.uk/work">
<img src="http://www.cthm.co.uk/wp-content/uploads/2013/02/logo2.png" alt="CTHM Logo" id="logo" width="140" height="44" />
</a>
<div id="contact-details">
26 Queen Anne Road, <br />
London, E9 7AH<br />
hello#cthm.co.uk
</div>
</h1>
</div>
<div id="content">
Your header is showing but your code is wrong. You need to add your script inside of a no conflict wrapper for it to work properly. And if you are going to add any type of javascript I would consider adding it to the functions.php section so that it enqueue's appropriately.
Reference: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Link_a_Theme_Script_Which_Depends_on_jQuery
How to enqueue script: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Also if you plan to make a ton of changes to the twenty twelve theme, I would also consider understanding how to create a child theme based on the twenty twelve theme
http://codex.wordpress.org/Child_Themes
I have this code on my header.php. Its for creating title on the fly. The problem is that it only creates a title when user is on the article.php(page for reading the article) but produce a 'undefined variable i' error on other pages. What should I change or who know a better code for the title of web page? i is id.
if(isset($i=$_GET['i']) && $i = true ) {
$i=$_GET['i'];
$tbl_name="yote";
$sql=mysql_query("SELECT * FROM $tbl_name WHERE i='$i'") or die(mysql_error());
while($rows=mysql_fetch_array($sql)){
$title = $rows['title']. "";
}
mysql_close();
} else {
$title = 'Malloooo - News, Reviews, Analysis and Market Watch From Around The World';
}
?>
<!-- Header
================================================== -->
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title><?php echo $title; ?></title>
Honestly, there's quite a bit wrong with your code.
if (isset($i=$_GET['i']) ... : Not sure what you're trying to do with that, but it's not valid.
... && $i = true) : This is setting a value, not checking it.
You're horribly vulnerable to SQL injection. Look into PDO: http://php.net/PDO