Login

05-29-2012, 09:57 PM

[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:
&lt;head&gt;

 &lt;title&gt;&lt;?php echo $title ?&gt; - Test&lt;/title&gt;

    &lt;link rel="stylesheet" href="/main/test/CI/css/style.css"&gt;

&lt;/head&gt;

&lt;body&gt;

 &lt;header&gt;

    <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!