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?

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?

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.

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;

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>

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;

}

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.

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.

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.

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.