EllisLab text mark
Advanced Search
     
a css oddity
Posted: 28 October 2011 01:38 AM   [ Ignore ]
Joined: 2011-09-12
6 posts

I am not sure if this is a bug as such but it is certainly odd. I am using the following css to produce a gradient on the body element. When I run it outside of CI it works fine but in CI it all goes terribly wrong. It produces smalls rows of gradient down the screen instead of one smooth gradient. I haven’t loaded any other css, the only javascript I have loaded is jquery and jquery ui. Any suggestions on where to look? Oh and I am using the hmvc mod.

<style>
body {
color
white;    
background#b4ddb4; /* Old browsers */
background: -moz-linear-gradient(top#b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%); /* FF3.6+ */
background: -webkit-gradient(linearleft topleft bottomcolor-stop(0%,#b4ddb4), color-stop(17%,#83c783), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top#b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top#b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top#b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* IE10+ */
backgroundlinear-gradient(top#b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* W3C */
filterprogid:DXImageTransform.Microsoft.gradientstartColorstr='#b4ddb4'endColorstr='#002400',GradientType=); /* IE6-9 */
}</style
 
Posted: 28 October 2011 09:22 AM   [ Ignore ]   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2011-08-05
67 posts

If it is OK outside CI, means for me that is a path problem, which happened to me a lot before. I solved any issue like that using a complete path when refering to css file (and also js, and other files)
Where do you have your css files stored?
In my configuration, I created several folder (css, images, js, fonts..) beneath my site, meanign at the same level as application folder.
In every place I need to include any of those files, like css file, I start with $config[‘base_url’] plus /nameofcssfolder/nameofcssfile.
I do the same for any javascript file I need to use. That way you won’t have that issue anymore and your code will work in any site you may copy it.
An important note if you are using rewrite mode, you must be sure to include all of those folder I mentioned in your .htaccess file!

 
Posted: 28 October 2011 09:44 AM   [ Ignore ]   [ # 2 ]   [ Rating: 0 ]
Joined: 2011-09-12
6 posts

i keep the css and js in seperate folders at the same level as the application dir.
I also tried put the script into the html header script and it does the same. It’s really wierd.

 
Posted: 28 October 2011 05:26 PM   [ Ignore ]   [ # 3 ]   [ Rating: 0 ]
Avatar
Joined: 2009-02-19
3796 posts

Show your code where you are loading the css file.

 Signature 
 
Posted: 28 October 2011 08:54 PM   [ Ignore ]   [ # 4 ]   [ Rating: 0 ]
Joined: 2011-09-12
6 posts

okay so my initial controller has this in to set the screen up

if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class 
User extends MX_Controller{
    
public function __construct()
    
{
        parent
::__construct();
        
$this->load->model('user_model');
    
}
    
public function index()
    
{
        
if(($this->session->userdata('user_name')!=""))
        
{
            $this
->welcome(); // Initial screen for logged in users
        
}
        else{
            $data[
'title']'Home';         // basic screen with login and signup facility
            
$this->load->view('header_only',$data);
            
$this->load->view("registration_view"$data);
        
}
    }
    
public function welcome() // init screen
    
{
        $data[
'title']'Welcome';
        
$this->load->view('win8-header',$data);                     
        
$this->load->view('win8',$data); 

The header is just this at the moment

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/>
<title><?php echo (isset($title)) ? $title : “My CI Site” ?> </title>
<meta name=“keywords” content=”” />
<meta name=“description” content=”” />       
 
  <link rel=“stylesheet” type=“text/css” href=”<?php echo base_url();?>[my css file]” />
  <link rel=“stylesheet” type=“text/css” href=”<?php echo base_url();?>[jquery ui css file]”/>
  [removed][removed]
  [removed][removed] 
</head>
<body>
  <div id=“wrapper”>
<div id=“header”>
  <div align=“center”>Logged in as <?php echo $this->session->userdata(‘user_name’); ?> <?php echo anchor(‘user/logout’, ‘Logout’); ?></div> 
</div><!—#header—>

The css file that it loads apart from the jquery ui one contains this.

.frontPageUL {
     
list-stylenone;
     
padding0 0 0 0;
     
margin0 0 0 0;
     
}

.frontPageColumn {
    padding
0 0 0 0;
    
margin0 0 0 0;
    
width250px;
    
height120px;
}

.pageCenter {
    position
fixed;
    
top50%;
    
left50%;
    
margin-top: -183px;
    
margin-left: -375px;
}

.fullBox {
    width
:  242px;
    
height114px;
    
margin0 8px 6px 0;    
}    

.halfBox {
    width
:  117px;
    
height114px;    
    
margin0 8px 6px 0;    
}



.shadow {
-moz-box-shadow3px 3px 4px #000;
-webkit-box-shadow3px 3px 4px #000;
box-shadow3px 3px 4px #000;
/* For IE 8 */
-ms-filter"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filterprogid:DXImageTransform.Microsoft.Shadow(Strength=4Direction=135Color='#000000');

And my first view file contains this. (body background styling is currently commented out)

<style>

.
date {
    float
:left;                     
    
display:block;
    
font-size:18px;
    
text-align:center;
    
line-height:75px;
    
colorblack;
    
width:80px;
    
height:80px
}
.date.month-01 { backgroundurl(<?echo(base_url());?>[calendar day image]no-repeat 0 0 }
....entries for other months


body {
color
white;    

background#b4ddb4; /* Old browsers */
/*background: -moz-linear-gradient(top, #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(17%,#83c783), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* IE10+ */
/*background: linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
}</style

At the moment I am just using a flat colour, I have tried using a very basic top to bottom gradient also and got the same effect.

Any suggestions are most welcome.
(Sorry I had to butcher some links so that expression engine would accept it and I only had a few minutes to do it)