IE does not load the css on the remote server

sgurrola · August 25th, 2015, 05:43 PM

I move my application to the production server, everything works fine with other browsers except with Internet explorer, the App_theme are not loaded.

If I run my application on my local computer everything works fine with IE

If I run the application using the IE on the production server, everything works fine

but

I run the application from the client computers, the IE loads OK the pages that are on the root directory but does not load right the pages that are on subdirectories on the root, load the pages but does not load the .css theme.
Other browser works fine

page on the root directory
<link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><style type="text/css">

page on a subdirectory
<link href="../../../App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><style type="text/css">

Imar · August 27th, 2015, 05:46 AM

Hi there,

Could it be a cache issue? Have you tried clearing your cache?

Is there a live URL I can look at?

Also, try fixing this:

<style type="text/css">

I don't think that should be there. It's probably in your master page.

Cheers,

Imar

sgurrola · August 27th, 2015, 02:23 PM

I have some pages under the root directory, these pages works fine:
Default.aspx
Login.aspx
MyProfile.aspx

I have the rest of my pages on a dif. subdirectories under the root:
/Application/Engineering/page1.aspx
/Application/Engineering/page2.aspx
/Application/General/page3.aspx
etc...
These pages does not work on IE:
switching from one theme to other theme works fine and all the pages on IE

Only:
If I load the page from my computer connecting to the production server:
The pages that are on the root directory, the IE can resolve the header css

header
{

background-color: red;
background-image: url('./Images/iconnectpeople.png');
width: 944px;
height: 86px;
}

but I have other pages on other directories and the IE cannot solve the Header css on a remote way.

IT works fine on my local Computer and also if I run the IE on the Remote server, all the pages can resolve the css.

I tried:

header
{
background-color: red;
width: 944px;
height: 86px;
}

to remove the possibility that the IE cannot resolve the url
background-image: url('./Images/iconnectpeople.png');

same results, the pages on the root directory works fine and the pages on a sub directories under the root does not work.

same thing happen with the nav section

nav
{

background-image: url('./Images/MenuBackground.jpg');
width: 827px;
height: 36px;
padding-top: 7px;
padding-left: 17px;
}

everything works fine, like #PageWrapper,
I can change values and I can see the response and all the pages

#PageWrapper
{

width: 944px;
background-color: #5487c0;
margin: auto;
}

sgurrola · August 27th, 2015, 05:12 PM

Imar

these 3 pages does not works on IE browsing on my computer to a remote server:
(note that the 3 pages are not on the root same as all the other pages that are not on the root and does not work)

<siteMapNode url="~/About/Default" title="About" description="About this Site">
<siteMapNode url="~/About/Contact" title="Contact Us" description="Contact Us" />
<siteMapNode url="~/About/AboutUs" title="About Us" description="About Us" />

this page works on IE browsing on my computer to a remote server:
(note that the page is on the root same as other pages on the root and works)

<siteMapNode url="~/MyProfile" title="My Profile" description="My Profile" />
</siteMapNode>

All the 4 pages uses the same
a)base page(BasePage.cs), master page(FrontEnd.master) and the same App_theme (Monochrome.css)

public partial class _MyProfile : BasePage
public partial class About_AboutUs : BasePage ans the same App_theme

<%@ Page Title="My Profile." Language="C#" MasterPageFile="~/MasterPages/FrontEnd.master" AutoEventWireup="true" CodeFile="MyProfile.aspx.cs" Inherits="_MyProfile" %>

<%@ Page Title="About Us" Language="C#" MasterPageFile="~/MasterPages/FrontEnd.master" AutoEventWireup="true" CodeFile="AboutUs.aspx.cs" Inherits="About_AboutUs" %>

remember:

everything works on IE if
a) I run local
b) if I run on the production Server IE

Not works on IE if
a) I run from a client computer to the production server

sgurrola · August 27th, 2015, 07:54 PM

The following code is on the Monochome.css file

this code works

*
{
/*
Defines the main font used throughout the entire site.
*/
font-family: Arial, Sans-Serif;
}

body
{
/*
Clears white space around the body and gives it a grey background color.
*/
margin: 0;
background-color: #cccccc;
}

a
{
/*
Clears the underline on normal links, and gives them a different text color.
*/
text-decoration: none;
color: blue;
}
a:hover
{
/*
Underlines links when the user hovers the mouse over them.
*/
text-decoration: underline;
}

h1
{
/*
Makes h1 elements smaller than their browser default.
*/
font-size: 20px;
}

h2
{
/*
Gives h2 elements a different color and size,
and adds a bit of margin at the top to create room between the heading and the preceding element.
*/
font-size: 14px;
color: #7773A1;
margin-top: 10px;
}

#PageWrapper
{
/*
Sets the total width for the entire page. Also sets the background color
which is used to fill the background of the Sidebar in case the MainContent section is taller than the Sidebar.
Uses margin: auto to center the entire page in the middle of the browser's window.
*/
width: 944px;
background-color: #5487c0;
margin: auto;
}
.MainMenu
{
/*
The Menu gets a white border on all four sides.
*/
border: 1px solid #999999;
width: 814px;
height: 19px;
background-color: #555555;
}

.MainMenu ul li
{
/*
Gives the five menu items in the main menu a width of 100px each.
*/
width: 100px;
}

This code does not work

header
{
/*
Gives the header the same width as the PageWrapper. The height creates some room for the logo
that is set with the background-image.
*/
background-color: red;
background-image: url('./Images/iconnectpeople.png');
width: 944px;
height: 86px;
}

header a
{
/*
The header a is a link nested in header. It provides a link back to the homepage.
The size of the link is the same as the header, so the entire header is clickable.
*/
width: 100%;

height: 86px;
display: block;
}

nav
{
/*
The menu spans the page width, right below the header.
At the top and left a few pixels padding is applied to create some room.
*/

background-image: url('./Images/MenuBackground.jpg');
width: 827px;
height: 36px;
padding-top: 7px;
padding-left: 17px;
}

nav a
{
/*
Links in the Menu are white. This gets overriden by styles in chapter 7.
*/
color: #fff;
}

aside#Sidebar
{
/*
The Sidebar is positioned to the right of the MainContent section. It gets the same font-size as the
#MainContent section and gets a background image called Sidebar.jpg.
To ensure the image is visible in (most) browsers on a small page, the element gets a minimum
height of 500px. This is ignored by IE 6.
*/
font-size: 0.8em;
color: White;
background-image: url(./Images/Sidebar.jpg);
background-repeat: no-repeat;
background-color: #7773A1;
width: 142px;
min-height: 500px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
float: left;
}
section#MainContent
{
/*
Defines the main content area. The #MainContent element has a minimum height of 500 pixels, but can grow if necessary.
The font-size is 80% of its parent element, which in this case comes down to 80% of the font
the user has specified as the default font in the browser.
*/
font-size: 0.8em;
width: 759px;
border-left: 1px solid white;
border-right: 2px solid white;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}

footer
{
/*
The footer is positioned below all other content (yet still within PageWrapper).
clear: both is used to clear the impact of the float properties used for #MainContent and #Sidebar.
*/
width: 944px;
clear: both;
height: 37px;
background-color: #A8D5FE;
color: White;
text-align: center;
font-size: 0.7em;
font-weight: bold;
line-height: 37px;
}

Imar · August 30th, 2015, 08:12 PM

Not sure what to recommend as I am not sure what's going on. Are your files loading correctly but the CSS doesn't get applied?

Try using tools like Fiddler or the developer tools in your browser to see the network traffic (check for 404's) and CSS errors.

Otherwise, post the live URL and I'll take a look.

Imar

sgurrola · September 1st, 2015, 06:48 PM

Imar

I downloaded the Fiddler and this tools help me to solve the problem.

there was an 404 error , File not found
"/Application/General/TSEGlobals/Scripts/modernizr-2.8.3.js"

Then I changed the master page to use a relative URL to

<script src="../../../Scripts/modernizr-2.8.3.js"></script>

and this solved the problem with IE

Thanks for your help....