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.

Not the issue, but it will cause you issues: You don't have an opening or closing <ul> or <ol> tag for your navigation <li>s. They are just naked in the <div> — No Results Found
– No Results Found, Commented May 28, 2011 at 5:02
@Wesley I know that, each <li> doesn't need a <ul> if you look at the css document letsmine.info/Yoga/css/drop.css you will understand. I may also noted i changed my javascript in a local copy to do the same thing in a similar manner, it still didn't work. — Jason
– Jason, Commented May 28, 2011 at 5:07
@Jason: If you look at your validation results and how to use a list in HTML you will understand. — No Results Found
– No Results Found, Commented May 28, 2011 at 5:10
@Wesley Hadn't got to validating it yet, code was still correct but not the valid way of doing it. I validated the code and because of my css stylesheet it hid the menu items but even hidden they were still placed wrong @Chrome Inspect Element. I will get a proper validated version up once i have fixed the css, meanwhile it is not the problem. — Jason
– Jason, Commented May 28, 2011 at 5:28
@Jason: Yes I do realize from looking at your page that it's not the problem, but asking people to debug what you know is invalid code is generally inconsiderate in my book. It should have been the first thing you tried. — No Results Found
– No Results Found, Commented May 28, 2011 at 5:30

jeremysawesome · Accepted Answer · 2011-05-28 05:32:10Z

2

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.

answered May 28, 2011 at 5:32

jeremysawesome

7,2745 gold badges35 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Over a year ago

Doesn't completely make sense, there shouldn't be any overriding of styles as styles.css is just a default css to load and drop.css and ldrop.css are additional however I understand what you are saying. Something probably hidden in that styles.css ... I need to clean it up.

Jason Over a year ago

Thank you now it is up to me to clean out that styles.css!

amolv · Accepted Answer · 2011-05-28 05:10:10Z

0

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

answered May 28, 2011 at 5:10

amolv

1,0061 gold badge9 silver badges20 bronze badges

3 Comments

Jason Over a year ago

The width is not set, the elements should float themselves along side of each other. Good point though i will try setting the width as 100%

amolv Over a year ago

same id,s used their in drop.css and style.css, now you increased width and overrides style.css by drop its done.

Jason Over a year ago

Already answered, by ordering it right i override the id in the styles.css . I actually hadn't realised there was a id that was causing the problem previously. This was actually already answered but thank you anyway.

Collectives™ on Stack Overflow

Odd CSS Loading

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related