Search code examples
htmlcssmedia-queriesstylesheet

Cant use media-queries (with the css) directly in my asp classic code page


I've got a problem with my media queries. On my website I am using a frameset to show a form. This form is created in a asp (classic) file and also has its code in it.

In my first attempt to launch it I had a link to my css stylesheet, though I found out this didn't work since it was cross-server.

So I putted all my css styling directly in my asp code page and my styling is working again. The downside however is that I worked with @media queries in my previous stylesheet, but for some reason when i put my css directly in my asp page (opened with and closed with ) the page gives an error when the @media queries are included. When I leave them out it works fine.

The code + css + html file in a .asp extension.

<!--#include file="tools.asp"-->
<!--#include file="connectionMemo.asp"-->

<HTML>
    <HEAD>
        <style type=text/css>
            <% 
                ' Cannot link css file cross domain
            %>

                @media only screen and (min-width : 1224px)  {

                   .Some style here{ }
                 }


                 @media only screen and (min-width : 1801px)  {

                   .Some other style here{ }
                 }

            </style> 
<TITLE>Ticket aanmaken</TITLE>
    </HEAD>
    <BODY bgcolor="#C0D1E5">
    <h2 align="left"><font face="Verdana, Arial" color="#000080">Ticket aanmaken</font></h2>

~ASP, javascript and html code here for the functionality (to much to all copy paste).

</body>
    </html>

~Some more asp code here

In my first try I included the css stylesheet just like the tools and connection files, this didn't work for obvious reasons (no asp file, not in the header, etc.) Then I just linked the css stylesheet with a href link but because the files were cross domain this didn't work either.

The code above was my last try in which I just pasted the stylesheet directly in the code / functionality page - asp file (so I didn't had the cross domain problem).

This isn't working either though and it seems that the media queries are causing the problem. When I remove the media queries the css is loaded, when I remove only the top media queries the css is also loaded (probably because it loads the first css it encounters and which it can load).

Anyone has an idea how to fix this?


Solution

  • Try to use double @@ symbols. That will escape @ symbol and render @media correctly on client side

    Source: https://stackoverflow.com/questions/7027469/media-media-query-and-asp-net-mvc-razor-syntax-clash