CodeIgniter Forums
CSS not loading properly - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: CSS not loading properly (/showthread.php?tid=60490)

CSS not loading properly - El Forum - 04-08-2014

[eluser]rand0m[/eluser]
This is how my application is set up

Code:
/
|- application
| |- cache
| |- config
| |- controllers
| | |- index.php
| |- ...
| |- views
| | |- layout.php
| | |- index_page.php
| | |- include
| | | |- header.php
| | | |- footer.php
| |- .htaccess
| |- index.html
|
|- assets
| |- css
| | |- custom
| | | |- style.css
| | | |- ...
| | |
| | |- contrib
| | | |- bootstrap.css
| | | |- bootstrap.min.css
| | | |- ...
| |
| |- js
| | |- custom
| | | |- main.js
| | |
| | |- contrib
| | | |- jquery.js
| | | |- bootstrap.js
| | | |- ...
| |- ...
|
|- system
| |- core
| |- ...
| |- libraries
| |- index.html

My index controller loads up layout.php passing a parameter of page title which layout should include in it.

Code:
/*
/application/controllers/index.php
*/
public function Index()
{
$data['content'] = 'index_page';
$this->load->view('layout', $data);
}

and the layout includes the header, footer and tries to load up the page passed as an argument in Index function

Code:
/*
/application/views/layout.php
*/
$this->load->view ( 'include/header' );
$this->load->view ( $content );
$this->load->view ( 'include/footer' );

simple as A, B and C.

The problem I see is that when I try loading the CSS in header

Code:
/*
/application/views/include/header.php
*/

<link rel="stylesheet" href="http://localhost/assets/css/contrib/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="http://localhost/assets/css/custom/style.css" type="text/css" />

<?php
# enabled html helper
#echo link_tag ( base_url () . "assets/css/contrib/bootstrap.min.css" );
#echo link_tag ( base_url () . "assets/css/custom/style.css" );
?>


Code:
/*
/assets/css/custom/style.css
*/
html {
margin: 0;
height: 100%;
padding: 0;
font-size: 100%;
font-family: "myfont";
}

body{
background: #f7f7f7 url("../../img/header-bg.jpg") repeat-x left top;
color: #333;
height: 100%;
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
line-height: 1.4;
}

.header{
position: relative;
z-index: 20;
}

.brand {
float: right;
display: inline;
margin: 25px 0;
}
The CSS doesn't load properly. not sure why its happening.

I've addded charset="utf-8" and media="all" attributes to link tag,

This is how the CSS loads up: http://i.imgur.com/oPjAJmQ.png
http://i.imgur.com/QhbDMeG.png

There are no PHP/Apache errors. Does anyone else suffer from same issue?


CSS not loading properly - El Forum - 04-08-2014

[eluser]InsiteFX[/eluser]
Code:
<link rel="stylesheet" href="<?php echo base_url('assets/css/contrib/bootstrap.min.css');?>" type="text/css" />


CSS not loading properly - El Forum - 04-08-2014

[eluser]rand0m[/eluser]
I've tried that already

base_url()."path" and
base_url("path")

and it doesn't solve anything. :/

I rebooted my machine and virtual machine to be sure.
but it still is an issue.

CSS not loading properly - El Forum - 04-08-2014

[eluser]rand0m[/eluser]
Alright, I figured out what the issue was,

My Apache settings was the culprit and was serving stale (cached) content.

I've changed my apache settings and this works now with no issues Smile

thanks!