CodeIgniter Forums
I am having a weird issue with CSS. - 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: I am having a weird issue with CSS. (/showthread.php?tid=52111)

Pages: 1 2


I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]codelogic[/eluser]
Hi all,
I am having a very weird issue with CSS, and I am wondering if it has to do with Codeigniter.

I have created a navigation bar in my header, and my code is only updating on certain browsers.

This is header.php. It calls stylesheet style.css.
Code:
<head>
<title><?php echo $title ?> - Test</title>
    <link rel="stylesheet" href="/main/test/CI/css/style.css">
</head>

<body>
<header>
    <nav>
      <ul>
        <li><a href="../../index.html" class="icon home"><span>Home</span></a></li>
        <li class="dropdown">
          <a href="../../index.html">Books</a>
          <ul>
            <li><a href="../../index.html">Books</a></li>
            <li><a href="../../index.html">eBooks</a></li>
            <li><a href="../../index.html">Books For Study</a></li>
            <li><a href="../../index.html">Audiobooks</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="../../index.html">Music, Games, Film &amp; TV</a>
          <ul class="large">
            <li><a href="../../index.html">Music</a></li>
            <li><a href="../../index.html">MP3 Downloads</a></li>
            <li><a href="../../index.html">Film &amp; TV</a></li>
            <li><a href="../../index.html">Blu-ray</a></li>
            <li><a href="../../index.html">PC &amp; Video Games</a></li>
          </ul>
        </li>
        <li class="active"><a href="../../index.html">Electronics</a></li>
        <li><a href="../../index.html">Computers &amp; Office</a></li>
      </ul>
    </nav>
  &lt;/header&gt;
&lt;/body&gt;


Essentially, this is where I am having weird problems in my style.css:
Code:
header {
  padding-top: 35px;
  background: #404040 url("../images/bg.png") 0 0 repeat;
  border-bottom: 1px solid #dadada;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.04);
}
In the lines padding-top: 35px;
background: #404040 url("../images/bg.png") 0 0 repeat;

These are displaying fine on Chrome. However, when I use another browser, say Firefox, it changes the padding-top to 65px, and the link to ("../img/bg.png"). Anyone have any idea why it is changing these links? It also changes another image link later in the code as well.


Ultimately, here is what my navigation should look like:
http://demo.webinterfacelab.com/3-tabbed-navigation/
It removes the background image, changes the padding, and changes removes the icon on other browsers (it simply is not updating to the correct code on other browsers. I know this because when I inspect the elements through Chrome I can look at the CSS).

Any ideas?
Thanks!


I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]Aken[/eluser]
Browsers will not change your code by themselves.

1) Check for conflicting CSS (and possible Javascript).
2) Clear your cache(s).
3) Make sure your HTML is correct, with an appropriate doctype and such.


I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]InsiteFX[/eluser]
Add this to your html head section:
Code:
&lt;head&gt;
    &lt;base href="&lt;?php echo base_url();?&gt;" /&gt;
&lt;/head&gt;



I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]codelogic[/eluser]
[quote author="Aken" date="1338354195"]Browsers will not change your code by themselves.

1) Check for conflicting CSS (and possible Javascript).
2) Clear your cache(s).
3) Make sure your HTML is correct, with an appropriate doctype and such.[/quote]
Hi,
Thanks for the reply.

I checked the CSS, it does not seem to be conflicting. My NAV bar is displaying 100% correctly on my chrome browser, but not on my Firefox browser. Firefox still does not have the most recent code, even with a cleared cache.


I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]Aken[/eluser]
You can change your CSS link to this to help prevent caching. Useful for during development, not recommended for production:

Code:
&lt;link rel="stylesheet" href="/main/test/CI/css/style.css?&lt;?php echo time(); ?&gt;"&gt;

It won't change anything in your file, just force the browser to reload it every time rather than going off a cache.

If that doesn't help, then you're doing something else. Perhaps you've forgotten to upload the file, and your Chrome version is checking local instead of live. Or something of that nature.


I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]codelogic[/eluser]
[quote author="Aken" date="1338355414"]You can change your CSS link to this to help prevent caching. Useful for during development, not recommended for production:

Code:
&lt;link rel="stylesheet" href="/main/test/CI/css/style.css?&lt;?php echo time(); ?&gt;"&gt;

It won't change anything in your file, just force the browser to reload it every time rather than going off a cache.

If that doesn't help, then you're doing something else. Perhaps you've forgotten to upload the file, and your Chrome version is checking local instead of live. Or something of that nature.[/quote]

Thanks InsiteFX and Aken. Insite, for some reason that line prevented my page from loading.

Aken, that worked! What is that line echo time() doing?


I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]Aken[/eluser]
Look at your source code and look up the time() function on PHP.net to find out.


I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]InsiteFX[/eluser]
That line should not have prevented your page from showing unless you have your base_url set wrong!
That is standard html code outside of telling to get the url link from CodeIgniter.

Show us your base_url in ./application/config/config.php



I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]InsiteFX[/eluser]
Welcome to the world of all the problems with different browsers!

Install FireBug for FireFox and you can look at the css also.



I am having a weird issue with CSS. - El Forum - 05-29-2012

[eluser]codelogic[/eluser]
[quote author="InsiteFX" date="1338357122"]That line should not have prevented your page from showing unless you have your base_url set wrong!
That is standard html code outside of telling to get the url link from CodeIgniter.

Show us your base_url in ./application/config/config.php
[/quote]

$config['base_url'] = 'http://mysite.com/main/test/CI/';

/CI is where I have CodeIgniter installed.