The css is not being applied to the html views in my codeigniter project. Everything else seems to be working fine.
One answer on StackOverflow suggested removing the ?= base_url() ? part , which I Have tried but that doesn't work either,
This is the head.php file in templates, which contains the css.
Where else could the problem lie?
<head>
<?php require_once("meta.php"); ?>
<title><?= $title ?></title>
<link rel="shortcut icon" href="<?= base_url() ?>resource/images/favicon.ico" type="image/x-icon" />
<link href="<?= base_url() ?>resource/css/bootstrap.min.css" rel="stylesheet" />
<link href="<?= base_url() ?>resource/css/modern-business.css" rel="stylesheet" />
<link href="<?= base_url() ?>resource/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="<?= base_url() ?>resource/css/animate.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
I have tried removing the base part, but that doesn't work either.
<head>
<?php require_once("meta.php"); ?>
<title><?= $title ?></title>
<link rel="shortcut icon" href="<?= base_url() ?>resource/images/favicon.ico" type="image/x-icon" />
<link href="resource/css/bootstrap.min.css" rel="stylesheet" />
<link href="resource/css/modern-business.css" rel="stylesheet" />
<link href="resource/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="resource/css/animate.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
You have to recheck your configs and make sure you set your base_url correctly in your config.php so it would be something like that:
$config['base_url'] = 'http://localhost/YOUR_PROJECT_DIRECTORY/';
enable mod_rewrite and make sure your .htaccess is in your FCPATH and is as simple as this:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
finally remove your index.php in your config.php if you are not using it like this:
$config['index_page'] = '';
and your ready to go, load the url_helper in your controller:
$this->load->helper(['url']);
now you can use base_url correctly wherever you want:
<link href="<?= base_url('resource/css/bootstrap.min.css') ?>" rel="stylesheet" />
Just make sure that this path is correct and inspect>console in your browser to see if it is loaded.
Related
I'm currently working on my own website. So i coded some HTML with a style.css . Testing it offline - everything works as expected but when I upload it to my webhoster and get a preview of my website, there is only the raw html visible without anything from the style.css
I already checked the path and overwrote it with the for me correct path (from the root of the webserver) - it changed a little bit but still is far away from the right appearance.
The head of my index.html (The only page I have)
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> test </title>
<link rel="icon" href="img/fav.png" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="ionicons/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- main css -->
<link href="httpdocs/css/style.css" rel="stylesheet">
<!-- modernizr -->
<script src="js/modernizr.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
as well as my path:
https://i.imgur.com/0YNkUrJ.png
The result is a described aboth only some html text but not how it would looks like with style.css
You should use relative paths from the httpdocs.
So change httpdocs/css/style.css to ./css/style.css.
I have a big problem on my website.
When i am making changes to the CSS files nothing changes on the website.
It looks like my site is using a other CSS file u can see it here:
My website is using that CSS file while this CSS file is the correct one:
http://quasarwheels.com/wp-content/themes/gilbertson/style.css
I did include this in my header for getting the CSS file
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo(‘name’); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="shortcut icon" href="<?php bloginfo( 'url' ); ?>/favicon.png">
<link rel="apple-touch-icon" href="<?php bloginfo( 'url' ); ?>/favicon.png">
<link rel="stylesheet" href="<?php echo THEME_URL;?>/bootstrap/css/bootstrap.min.css">
<?php if(is_singular('frame')) {?>
<link type="text/css" rel="stylesheet" href="<?php echo THEME_URL?>/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="<?php echo THEME_URL?>/css/bike-builder.css" />
<?php }?>
<link type="text/css" rel="stylesheet" href="http://quasarwheels.com/wp-content/themes/gilbertson/style.css" />
<!--[if IE]>
<style type="text/css"> #mtb, #rac, #rat, #track, #rct, #rcc{ margin-top: -55%!important;}</style>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
Thanks for your time!
If you inspect your page in the browser (not the header.php file) you'll see your links are being modified:
<link rel="stylesheet" href="http://quasarwheels.com/wp-content/themes/gilbertson/A.bootstrap,,_css,,_bootstrap.min.css+style.css,Mcc.KscEqGi0LS.css.pagespeed.cf.vgQu4bgNvt.css">
You can also see that several of the other stylesheets are coming from a plugin called BWP Minify. It looks like this plugin is minifying your stylesheets automatically, so you need to check the plugin settings and see if it needs refreshing or deactivating.
WordPress doesn't perform CSS minification out-of-the-box, so it's either coming from a plugin or your theme: in this instance it looks like the BWP plugin.
If you are sure you have uploaded the correct CSS file, flush your wordpress theme's cache / site cache to force the new file to be parsed and minified.
Move the
<link type="text/css" rel="stylesheet" href="http://quasarwheels.com/wp-content/themes/gilbertson/style.css" />
link to the top of the css links so it is rendered first.
Iam experiencing some weird issue with HTML 5, currently i'm retrieving information from a Database on MySQL, the database is encoded using UTF-8, and when i retrieve information without using any HTML markup everything is working fine, but in pages with HTML markup things are not properly working.
Here is a page that uses HTML markup
Here is a page without any HTML Markup ( Things working well )
The query's are the exact same.
Here is the HEAD information:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quizu - Testes de personalidade</title>
<!-- Bootstrap -->
<link href="css/normalize.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<script src="js/jquery-1.11.2.js"></script>
<script src="js/meu.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="css/quizu.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Thanks in advance, any help will be appreciated.
The problem was in my MySQL query, although my Database was encoded in UTF-8, the query was not being made using UTF-8. All i had to do "SET NAMES UTF-8" to my query.
$dbHandle = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8", $dbUser, $dbPass,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
This responsive example from H5BP works well in Internet Explorer 7, Internet Explorer 8 and Internet Explorer 9, but when I use H5BP in my own project, it doesn't work in Internet Explorer 7 only. I've also tried omitting H5BP and using purely html5shiv + Respond.js (also with selectivzr.js), but I encounter the same issue (it does not work in Internet Explorer 7). And I cannot see any JavaScript/console error.
Trying css3-mediaqueries.js I found that works well on Internet Explorer 7, Internet Explorer 8 and Internet Explorer 9, but I noticed that the transition (reading media queries) is delayed by almost a second, so I don't want to use it. Respond.js is much faster.
I've read the "cross-domain/CDN issue" on the respond.js page and my test project is in a subdomain root (for example, subdomain[dot]mydomain[dot]tld/), so if this is the problem why does it work well on Internet Explorer 8 and Internet Explorer 9 but not in Internet Explorer 7?
Not working in Internet Explorer 7 means that the columns aren't collapsing in Internet Explorer 7 only, media queries are not read.
I've downloaded the initializr responsive demo with html5shiv.js and respond.js and it works well on my subdomain, so "cross-domain/CDN issue" is not the problem :/
In Internet Explorer, I've disabled "Enable protected mode", and now it works. But why do the online examples (H5BP and initializr), despite this security setting being enabled, work?
This is the HEAD of the last test I made:
<!DOCTYPE html>
<html dir="ltr" lang="it">
<head>
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400italic,700italic,300italic,300&subset=latin,latin-ext,greek-ext,greek" rel="stylesheet" type="text/css" />
<meta charset="<?php echo $charset; ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><?php echo $cur_title; ?></title>
<meta name="<?php echo $cur_desc; ?>" />
<link rel="canonical" href="<?php echo $cur_canonical; ?>" />
<meta name="author" content="<?php echo $author; ?>" />
<base href="<?php echo $cur_base; ?>" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="shortcut icon" href="apple-touch-icon-57x57.png" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<!--[if lt IE 9]>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="js/jquery.quicksearch.js"></script>
<script type="text/javascript">var base = '<?php echo $base; ?>';</script>
<script type="text/javascript">var isMobile = <?php echo $isMobile; ?>;</script>
<script type="text/javascript" src="js/common.js<?php echo '?'.time(); ?>"></script>
</head>
SOLVED
The problem in IE7 is the tag "base", as you can see in this example, I added to the H5BP template responsive the tag "base" and now no longer works on IE7.
So that's why it does not work on IE7.
Respond.js GitHub issues #1
Respond.js GitHub issues #2 (https://github[dot]com/scottjehl/Respond/issues/137)
A GitHub user's test page with explanation and fixes (http://webdesign[dot]web3.lu/mediaqueries_polyfill.html)
Just a small thing for all wondering why HPBP just works when it "should not" .. for the lack of a better term.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
It makes the browser use the best render engine available, i.e. IE10. If you are using IE say 10, and simply change the render mode in dev tools just comment that out for testing.
I have been adapting a site to make this more responsive, and i have been following the code from a demo which was sent to me.
However for some reason it doesnt appear to be resizing as stated in a mobile browser.
Im thinking its down to the fact that Wordpress calls style sheets slightly differently, do i need some form of plugin to do this?
Please see below header of my document referencing the other stylesheet but its not appearing to call it when browser is different (however it is effectively resizing in different resolutions)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="keywords" content="Holiday, free CSS template, clean, neat, aqua, white, templatemo" />
<meta name="description" content="Holiday is a clean and neat free CSS template using aqua and white colors." />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!-- Include jQuery -->
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<!-- Include the Nivo Slider CSS file -->
<link rel="stylesheet" href="<?php bloginfo("template_url"); >/scripts/nivoslider/nivo-slider.css" type="text/css" media="screen" />
<!-- Include the Nivo Slider JS file -->
<script src="<?php bloginfo("template_url"); ?>/scripts/nivoslider/jquery.nivo.slider.js" type="text/javascript"></script>
<!-- Set up the Nivo Slider -->
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
<!-- media queries css -->
<link href="media-queries.css" rel="stylesheet" type="text/css">
<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
Are you certain the path to your media-queries.css is right? First ensure that the CSS is being loaded and then we can begin to discuss the actual media queries themselves.
If your file is in the themes folder then it would be something like:
/wp-content/themes/media-queries.css
Or:
<link href="<?php bloginfo('template_url'); ?>/media-queries.css"
rel="stylesheet" type="text/css" media="screen" />
This will probably be more involved than you want but let's start with CSS3 Media Query spec.
A couple things that shouldn't be problematic but I will address:
1. You only need the html5shim from google if you want older versions of IE to recognize new HTML5 elements--which technically shouldn't be in XHTML
2. Your linked "media-queries.css" stylesheet is missing a self-closing bracket '/>'
From what I have read, those little inconsistencies don't cause browsers many problems but if your code starts doing funny stuff you should always double check for inaccuracies.
I don't see anything below the head but I assume you just meant towards the bottom of what is pasted. That said, what you pasted should be functional (X)HTML but there are no actual CSS media queries included.
This is a responsive CSS3 #Media Query stylesheet to a repo on Github (a Twitter Bootstrap based WordPress Theme) https://github.com/retlehs/roots/blob/master/assets/css/bootstrap-responsive.css
Between those docs and the actual Twitter Bootstrap (also on Github, the CSS is identical) docs you should be able to see how others are doing it and why.
Hope it helps but without a look at the actual CSS there is no way for me to guess why it isn't working.