CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8less
WooCaSh
WooCaSh

Reputation: 5212

Less Css not working on IE8 and IE7

I have question why Less Css not working (page without applied stylesheets) on this both browsers? On IE9+ it looks normal like on Chrome, FF and Opera too. Look on screens:

Source Source code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mansion</title>

    <link rel="stylesheet" href="/Content/normalize.css" media="all"/>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet/less" href="/Content/siteHD.less"  media="screen and (max-width: 1920px)" />
    <link rel="stylesheet/less" href="/Content/site1024.less"  media="screen and (max-width: 1024px)" />
    <link rel="stylesheet/less" href="/Content/site768.less"  media="screen and (max-width: 768px)" />
    <link rel="stylesheet/less" href="/Content/site640.less"  media="screen and (max-width: 640px)" />
    <link rel="stylesheet/less" href="/Content/site320.less"  media="screen and (max-width: 320px)" />
</head>
<body>...</body>
</html>



IE10 (IE9 look like here) IE10

IE8 (look on last style which jump over head section) IE8

Are you see here something wrong what I cannot see?

Upvotes: 0

Views: 2829

Answers (1)

vtamm
vtamm

Reputation: 339

It seems you are trying to use LESS files on your site without including the less.js library, which is required to translate your LESS code into CSS that the browsers can understand.

Download less.js from the top of the page at lesscss.org, and then include it just before your </head> tag:

<script src="less.js" type="text/javascript"></script>

Obviously you'll need to change the path to wherever you store the JS file on your website. Please note that this file is to be included after your stylesheets.

Example with your posted code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mansion</title>

    <link rel="stylesheet" href="/Content/normalize.css" media="all"/>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet/less" href="/Content/siteHD.less"  media="screen and (max-width: 1920px)" />
    <link rel="stylesheet/less" href="/Content/site1024.less"  media="screen and (max-width: 1024px)" />
    <link rel="stylesheet/less" href="/Content/site768.less"  media="screen and (max-width: 768px)" />
    <link rel="stylesheet/less" href="/Content/site640.less"  media="screen and (max-width: 640px)" />
    <link rel="stylesheet/less" href="/Content/site320.less"  media="screen and (max-width: 320px)" />
    <script src="less.js" type="text/javascript"></script>
  </head>
  <body>...</body>
</html>

On another note, you should probably take a look at compiling your LESS code to one or more CSS files using one of the available compilers. Check out the list of available GUI compilers that use LESS.

Upvotes: 2

Related Questions