Odd CSS Loading

Question

I am redesigning a client's website so they will be able to edit the website themselves. What I intend on doing is have the main "Front End" pages with a mix of html and php in them. The html renders the page while the php includes a external menu and grabs the content for the individual page allowing the content to be safely edited without harming the main page.

Now the problem is a have a CSS document linked that loads the menu I have two of these however whats happening is that i added some javascript to detect screen size and load a different css document if the screen is smaller then a certain size, however the website is seemingly loading half the css, it formats the menu but leaves it all in a block.

The version of the site I am working on is available at http://www.letsmine.info/Yoga

The main page without the .php extensions (To prevent the loading of the php) is http://www.letsmine.info/Yoga/index.txt

The menu is http://www.letsmine.info/Yoga/templates/menu.php

I believe the problem is javascript but I am not 100% sure.

Answer 1

Change the order of your included files.

Currently you have this:

<script type="text/JavaScript"> 
var screenwidth = screen.width;
if (screenwidth < 1180){
document.write('<link rel="stylesheet" href="css/ldrop.css" type="text/css" media="screen" />');
}
else
{
document.write('<link rel="stylesheet" href="css/drop.css" type="text/css" media="screen" />');
}
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<title>Alignment Courses</title> 
<link href="css/styles.css" rel="stylesheet" type="text/css" /> 

Change it to this:

<link href="css/styles.css" rel="stylesheet" type="text/css" /> 
<script type="text/JavaScript"> 
var screenwidth = screen.width;
if (screenwidth < 1180){
document.write('<link rel="stylesheet" href="css/ldrop.css" type="text/css" media="screen" />');
}
else
{
document.write('<link rel="stylesheet" href="css/drop.css" type="text/css" media="screen" />');
}
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<title>Alignment Courses</title> 

Reason? The last CSS document to be loaded takes precedence. So load the default styles first and the overriding styles last.

Answer 2

increase the width of #nav in style.css..