Unable to display images through media queries form stylesheet

Question

I'm trying to create a responsive homepage with max-width of 1024 first. However the images are not displaying when I called from the css file.

I did include the stylesheet inside the home page and the current viewport is 1024. I can't find my mistake, please help. Thanks.

homepage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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"/>
<title>Responsive design</title>
<link rel="stylesheet" href="res-style.css" type="text/css" media="screen and (max-width:1024px)"/>
</head>

<body>
    <table class="ct">
    <tr>

        <td class="1">

       <?php include 'menu.php'; ?>
        </td>

    </tr>
    <tr>
        <td class="2">
        </td>
    </tr>
    <tr>
        <td class='3'>
            <img src="NewLogo1.png"></td>
    </tr>
    <tr>
        <td class='4'>
        </td>
    </tr>
    <tr>
        <td class='5'>
            wefhuiweabhfuia</td>
    </tr>
</table>



</body>
</html>

stylesheet

@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1024px)
{

    .ct{min-width:1000px;height:898px;border:0;}
    .1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
    .2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
    .3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
    .4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
    .5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}

Class can not be started by number. http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors — Tushar, Jun 12 '14 at 03:29
@Tushar, Thanks a lot...such a silly mistake I made..it works now. — kNair, Jun 12 '14 at 03:31
@Tushar: You should post that as an answer and kNair should mark it as accepted (so this question is flagged answered). — Mizipzor, Jun 12 '14 at 12:54

score 0 · Accepted Answer · answered Jun 12 '14 at 03:30

Don't use numbers as css classes. Starting with a number is breaking it for you. A CSS class name should start with an underscore, letter, or -. Class names starting with a dash are reserved for browser extensions. Typically start a class with a letter, though.

The following fiddle works. You can see in the console it tries to load the images, but gets a 404 in this case.

http://jsfiddle.net/nks7S/

HTML

<table class="ct">
    <tr>

        <td class="a1"> </td>

    </tr>
    <tr>
        <td class="a2"></td>
    </tr>
    <tr>
        <td class='a3'><img src="NewLogo1.png"></td>
    </tr>
    <tr>
        <td class='a4'>
        </td>
    </tr>
    <tr>
        <td class='a5'>
            wefhuiweabhfuia</td>
    </tr>
</table>

CSS

@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1024px)
{

    .ct{min-width:1000px;height:898px;border:0;}
    .a1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
    .a2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
    .a3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
    .a4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
    .a5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}

Suggestion: Instead of 1, or a1 in my example, try to be a bit more descriptive in your class names. It makes it a lot easier for anyone other than you to follow.

Unable to display images through media queries form stylesheet

1 Answers1