• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS corruption dependent on URI

#1
If 'home/index' is set in routes.php as the 'default_controller', and the usual rewrite rule has been put in .htaccess, then there are 6 URLs that will invoke the default controller method:
1. www.mysite.com
2. www.mysite.com/index.php
3. www.mysite.com/index.php/home
4. www.mysite.com/index.php/home/index
5. www.mysite.com/home
6. www.mysite.com/home/index

In each of these six cases, the exact same controller method is invoked, so the output should be identical in each case. Correct?
It seems not so.
I've been using CodeIgniter 2 for many years, but recently started a new project using CodeIgniter 3.1.2 and Bootstrap 3.3.7. The home/index method simply loads 4 views: header, navbar, content, and footer. The navbar has CSS class navbar-fixed-top (anchored to the top of the window), and the content is a trivial paragraph of text inside a fluid container with a margin-top of 50px to accommodate the navbar.
The problem: In 3 of the above 6 cases (#1,#2,#5), there is extra white space between the navbar and the content.
I have no clue how this can happen, except for some varying CSS injected by codeigniter that causes problems.
You can see this in action by going to http://www.arsupport.org where I've set up the navbar to demonstrate this, with 6 menu choices corresponding to the above 6 cases.
If you understand how/why this happens, and, better yet, can tell me how to prevent this, I'd love to hear from you!
(Btw, if I remove the margin-top:50px from the content style, then the 3 problem cases are corrected, but in the other three cases that were correct the content is at the top of the window and partially covered by the navbar!)

- - -   /-/ a n s
Reply

#2
In #3,4 and 6 you get a 404 error, a CSS file is not loaded because the path does not exists. You are trying to load them relative to the current path. You should use absolute path or the url helper.


Attached Files Thumbnail(s)
   
Reply

#3
Indeed, as Diederik said, you might want to either add slash / to CSS url ( <link rel="stylesheet" href="/css/arsupport.css"> ) or you can use base_url helper function instead ( <link rel="stylesheet" href="<?= base_url('css/arsupport.css') ?>"> ).

The later is more flexible solution IMHO, if you want to have temp URLs uploaded to a subfolder to test new site version before overwriting live website.
Reply

#4
Thanks, Diederik and Pertti. The problem you pointed out (404) isn't solved by the solution you pointed out. I had already tried to prefix my URI's with base_url(), but ran into problems because in my production environment, base_url() returns a string containing an IP address for the host which is an internal provider IP address and accessing it externally causes the page request to hang indefinitely.

But your observation prompted me to try again, so I wrote a MY_url_helper that provides a my_base_url() that returns what base_url() returns MINUS the protocol and the host. So in my production environment it just returns "/", and in my dev environment it returns "/newproject/". So that should now work, right?
Wrong. The 3 cases that used to generate 404's now work properly, and the 3 cases that used to work, now generate a 404 with a peculiar URL for the css files: "http://www.arsupport.org/index.php/css/arsupport.css" which means my_base_url() must have returned "/index.php/" which would suggest that in those three cases, base_url() behaved like site_url() ...

I'm still stumped why my code works in 3 cases and not in the other three, depending on the URI.

Thanks for your help!
Reply

#5
Did you set the base_url in your ./application/config/config.php file?
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply

#6
(12-21-2016, 03:42 AM)InsiteFX Wrote: Did you set the base_url in your ./application/config/config.php file?

After applying it correctly, the solution I came up with (strip the protocol and host from base_url) worked as expected in all six cases, so I appreciate pertti's suggestion and diederik's observation!
But also thank you InsiteFX for pointing out what is actually the correct solution: define the base_url explicitly with if-then-else that checks development or production mode!
Phew!

- - -   /-/ a n s
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.