Skip navigation
Currently Being Moderated

css link href is not working in IE

Apr 12, 2012 4:46 AM

I have 2 links to external stylesheets and they work fine in chrome but running in IE it doesnt ref them

 

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<link href="../css/font.css" rel="stylesheet" type="text/css" />

 

the reason they have the../ is because this if copied from the template

 

thanks

jon

 
Replies
  • Currently Being Moderated
    Apr 12, 2012 5:03 AM   in reply to Jonathan Fortis

    Jonathan Fortis wrote:

     

    I have 2 links to external stylesheets and they work fine in chrome but running in IE it doesnt ref them

     

    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

    <link href="../css/font.css" rel="stylesheet" type="text/css" />

     

    the reason they have the../ is because this if copied from the template

     

    thanks

    jon

     

    This doesn't sound possible, if one browser is referencing the stylesheets correctly and they all should. If the link to the stylesheet was incorrect then no browser would show the styles.

     

    the ../ infront of the link indicates that the page which is referencing the css files is in another folder inside your site folder, is that correct?

     

    Maybe youre trying to view the template file itself and not a page made from the template?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 5:16 AM   in reply to Jonathan Fortis

    Jonathan Fortis wrote:

     

    >the ../ infront of the link indicates that the page which is referencing the css files is in another folder inside your site folder, is that correct?

     

    the stylesheets are in their own folder yes

     

    Where is the page though in relationship to your site folder?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 5:32 AM   in reply to Jonathan Fortis

    Can you upload this page anywhere so we can take a look and see where the problem is?

     

    if ../SpryAssets/SpryMenuBarHorizontal.css is working then the link is correct so it means if ../css/font.css is NOT working then the link is not correct to that file or there is something in that file which is stopping the css from working.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 5:50 AM   in reply to Jonathan Fortis

    Before I do anymore investigation can you close the gap between the 'u' and the 'tf' below which is at the top of your font.css style sheet and post back as let me know what happens.

     

    @charset "u tf-8";

    /* CSS Document */

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 6:05 AM   in reply to Jonathan Fortis

    Add overflow: hidden; to the css selector below:

     

    #index-container #indexheader {

        background-image: url(images/header-nav-notext.jpg);

        height: 35px;

        padding-top: 245px;

        overflow: hidden;

    }

     

     

    Youre not planing to use drop down menus are you? If so you cant use overflow: hidden;

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 6:36 AM   in reply to Jonathan Fortis

    Move the css selector to the position as shown below and see what happens then.

     

    #index-container #indexcontent #indexcontentleft #latestCandidates {

        background-image: url(images/latestcandidates.jpg);

        height: 26px;

        width: 635px;

        padding-top: 10px;

        padding-right: 20px;

        padding-bottom: 15px;

        padding-left: 20px;

        margin-top: 5px;

    }

    #index-container #indexheader {

        background-image: url(images/header-nav-notext.jpg);

        height: 35px;

        padding-top: 245px;

        overflow: hidden;

    }

     

    </style>

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 8:58 AM   in reply to Jonathan Fortis

    Jonathan Fortis wrote:

     

    sorry, what page did that css come from?

     

    http://www.thinkfuturerecruitment.co.uk/beta/index.php

     

    What I'm saying is move the below to the very end of ALL the css and see if that resolves the issue.

     

    #index-container #indexheader {

    background-image: url(images/header-nav-notext.jpg);

    height: 35px;

    padding-top: 245px;

    overflow: hidden;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 9:20 AM   in reply to Jonathan Fortis

    On the index page you have the below at the moment right?

     

    #index-container #indexcontent #indexcontentleft #latestCandidates {

    background-image: url(images/latestcandidates.jpg);

    height: 26px;

    width: 635px;

    padding-top: 10px;

    padding-right: 20px;

    padding-bottom: 15px;

    padding-left: 20px;

    margin-top: 5px;

    }

    </style>

    <!-- InstanceEndEditable -->

    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

    <link href="css/font.css" rel="stylesheet" type="text/css" />

     

     

    Position the css as below (before the last closing </style> tag and before the links to your external css files.

     

    #index-container #indexcontent #indexcontentleft #latestCandidates {

    background-image: url(images/latestcandidates.jpg);

    height: 26px;

    width: 635px;

    padding-top: 10px;

    padding-right: 20px;

    padding-bottom: 15px;

    padding-left: 20px;

    margin-top: 5px;

    }

    #index-container #indexheader {

    background-image: url(images/header-nav-notext.jpg);

    height: 35px;

    padding-top: 245px;

    overflow: hidden;

    }

    </style>

    <!-- InstanceEndEditable -->

    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

    <link href="css/font.css" rel="stylesheet" type="text/css" />

     

     

    I'm not sure IF this will solve the issue but when I tested it from this end it did.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 12:05 AM   in reply to Jonathan Fortis

    Jonathan Fortis wrote:

     

    I tried putting that css in the index page uploaded it but it didnt give the css for the spry?

     

    Just moving the css selector to the end of the block of css would have no affect on the link to the spry. Can you insert itwhere I suggested then re-upload the page please. Then I'll take another look.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 3:20 AM   in reply to Jonathan Fortis

    Jonathan Fortis wrote:

     

    i think i am getting confused....the

     

    #index-container #indexheader {

    background-image: url(images/header-nav-notext.jpg);

    height: 35px;

    padding-top: 245px;

    overflow: hidden;

    }

     

    is only present on the index page, do i need to copy this onto all the pages??

    I'm only concerned about testing the index page first. If we can get it right on that page then it should be alright on the other pages.

     

    Obviously at the moment where the #index-container #indexheader css selctor is it doesn't work in IE so I'm asking you to move it to the end of your last css block on the index page.

     

    When I tested it there it did work in IE so I need to see if the same happens when you move it or whether we need to look for another solution.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 13, 2012 5:17 AM   in reply to Jonathan Fortis

    I think I've finally tracked this down. It seems you may have a corrupt .js file. Comment out <!--   --> as shown below:

     

    <!-- <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>-->

     

    If that does prove to be the case then this happens frequently with Spry js. In my opinion its the biggest bag of dog **** that was ever produced especaily where IE is concerned.

     

    If this solves the issue then unless you intend to use drop menus you don't need the js file.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points