0

I am designing a responsive site (the home page, which I'm developing first, is all html except for the session start, but some pages will have lot's of php so obviously I'm saving the home page as php). When I tested in on my MAMP server, everything worked fine - it loaded all CSS correctly at any screen size. However, when I loaded it onto my fatcow server to test it there, it doesn't load the CSS at all if you shrink the browser below the width set for desktop mode (everything goes to default - black text, no color changes, no borders, everything is left-aligned, etc.). But, if you have the browser window to the minimal desktop size, the CSS magically appears. I have the responsive meta tag (see code below). Why is the CSS always linking on my MAMP server, but conditionally loading on the internet? Thanks!

Index page header code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<!-- 
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build 
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<link rel="stylesheet" href="ajxmenu.css" type="text/css">
<script src="ajxmenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="ajximagerotator.css" type="text/css">
<script src="ajximagerotator.js" type="text/javascript"></script>
</head>

As you can probably tell, I'm designing this site in Dreamweaver. I've issues like this before when coding in Notepad ++, but normally Dreamweaver is pretty good at this sort of thing without me having to do much tweaking.

Thanks in advance for any help!

EDIT: By the way, just tested in my Linux VirtualBox with LAMP - works fine there too. I'm thinking this may be a setting with Fatcow but I don't know where to go.

Eric Sparks ii
  • 35
  • 5

1 Answers1

0

Ok, not really the ideal solution, but after some tinkering, I did, finally, find a workaround.

Adobe Dreamweaver's fluid grid layout is designed to let the larger screens inherit from the smaller screen css properties unless otherwise specified. It does this by not defining the screen size at first, and then progressively adding "@ at min-width"'s to start the changes for each larger screen. Anything not changed in each "@" section becomes automatically inherited.

My solution breaks the inheriting feature, but does make the css load and change appropriately at each screen size - I just have to repeat features I want to keep the same. If you add an "@" line to the top part of the screen and set a MAX width, instead of a minimum, the CSS loads each screen size separately, but they do all load. The reason the inherit feature is broken is by adding the @ max-width line of code, no features advance beyond that point.

If anyone has a better solution, I'm all ears - this is not the ideal way to solve the problem, but at least it's a decent Band-Aid.

Eric Sparks ii
  • 35
  • 5