CODEWITHSUNDEEP
jqueryhtmlcss
user2309612
user2309612

Reputation: 23

CSS not loading in Firefox or IE

After making it so my website changed css depending on resolution, css stopped loading in Firefox and IE. However, it seems to still work on chrome even after clearing cache and reloading. I had cleared the cache in all browsers and attempted reloading multiple times.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media='screen and(min-width:721px)' href='css/master.css'/>
    <link rel='stylesheet' type="text/css" media='screen and(max-width:720px)' href='css/mobile.css'/>
    <script type="text/javascript" src="javascript/script.js"></script>
<title>The Resistance</title>
</head>

Additionally - some jquery on another page stopped working in all browsers after implementing the multiple style sheets. Any advice on how to fix this? If I can give you any additonal information, please go ahead and ask. Website link is here -------------

-thanks

--Edited to add that w3c validator thought everything was fine on XHTML 1.0 STRICT

Upvotes: 0

Views: 182

Answers (3)

Matt Whitehead
Matt Whitehead

Reputation: 1801

The best way, IMHO, to layout your CSS file is like so:

/* Theme style rules */
#wrapper {
    background-color:#444;
    color:white;
    font-family:Verdana, Arial, Times;
}

/* Static structure rules */
#wrapper {
    overflow:hidden;
    width:50em;
}

/* Responsive structure rules */
@media screen and (max-width:1220px) and (min-width:1151px) {
    #wrapper {
        font-size:15px;
    }
}
@media screen and (max-width:1150px) and (min-width:1081px) {
    #wrapper {
        font-size:14px;
    }
}

Basically what you want to do is seperate out your code into sections. The theme section deals only with things that don't affect the flow of elements in the DOM. The static structure section sets rules that don't change, no matter the screen size. The responsive section is where you put the media queries. The best way to find break points for your media queries is the "squish it till it breaks method." Meaning close your browser in until the page looks like crap, then add a media query and rearrange the page.

BTW, old IE doesn't support media queries so you'll want to use IE's conditional comments to add a polyfill called css3-mediaqueries.js. It's just a JS file that makes media queries work on all browsers.

Edit: Also, follow this link and use the bookmarklet to be able to see what your current screen size is. It's incredibly useful for responsive designing.

Upvotes: 1

Keensleeeeeeee
Keensleeeeeeee

Reputation: 1246

Try replacing your

<link rel="stylesheet" type="text/css" media='screen and(min-width:721px)' href='css/master.css'/>

to

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 721px)" href="master.css" />

I didn't tried your problem in mobile, but try putting only too if there's a problem in mobile.. and add

<!DOCTYPE html>

In the beginning of the code. Hope this helps..

Upvotes: 0

Nick Bernhard
Nick Bernhard

Reputation: 106

According to http://webdesignerwall.com/tutorials/css3-media-queries, inline media queries are a CSS3 feature. So browsers not supporting CSS3 will skip it.

Your options are:

1) Move all CSS to one file like this:

@screen and(min-width:721px) {
  #Your desktop CSS here
}

@screen and(max-width:720px) {
  #Your mobile CSS here
}

2) Drop the width criteria and simply rely on 'screen' and 'handheld' instead of using the whole query in the HTML:

<link href="css/master.css" media="screen" type="text/css" rel="stylesheet" />
<link href="css/mobile.css" media="handheld" type="text/css" rel="stylesheet" />

Hope this helps.

Upvotes: 0

Related Questions