CODEWITHSUNDEEP
htmlcss-sprites
AndroidNewb
AndroidNewb

Reputation: 441

Why is my sprite image broken [x] but also displaying showing the image?

I am not sure why, but the image actually shows but it has a [x] on top of it as if it is a broken link? The page can be viewed at: www.klassaktkreations.com

index.php

<!DOCTYPE HTML>
<html>
<link rel="stylesheet" type="text/css"
 media="screen" href="style.css">

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: My Website'; 
    $to = '[email protected]'; 
    $subject = 'Website Inquiry';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";

if ($_POST['submit']) {
    if ($name != '' && $email != '' && $message != '') {
            if (mail ($to, $subject, $body, $from)) {
            echo '<p>Your message has been sent!</p>';
        } else { 
            echo '<p>Something went wrong, go back and try again!</p>'; 
        }
    } else {
        echo '<p>You need to fill in all required fields!!</p>';
    }
}
?>

<head bgcolor="Black">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Website Title</title>
</head>

<body bgcolor="Black">

    <header class="body">                          
 <center><img class="home" src="sprite2.png" width="1" height="1"/></center>
    </header>

    <section class="body">
<form method="post" action="">

    <label><strong>Name</strong></label>
    <input type="text" name="name" placeholder="Type Here">

    <label><strong>Email</strong></label>
    <input name="email" type="email" placeholder="Type Here">

    <label><strong>Message</strong></label>
    <textarea name="message" placeholder="Type Here"></textarea>  
    <input id="submit" name="submit" type="submit" value="Submit">

</form>
    </section>

    <footer class="body">
    </footer>

</body>

</html>

style.css - you will notice i am using a sprite with only 3 images for a submit button and a title image.

body {color:white;}

label {
    display:block;
    margin-top:20px;
    letter-spacing:2px;
}

img.home
{
width:230px;
height:119px;
background:url(http://www.klassaktkreations.com/images/sprite2.png) 0px 0px;

}

/* Centre the page */
.body {
    display:block;
    margin:0 auto;
    width:576px;
    background-color:black;
}

/* Centre the form within the page */
form {
    margin:0 auto;
    width:459px;
}

/* Style the text boxes */
input, textarea {
    border:1px solid #97d6eb;
    width:439px;
    height:27px;
    background:#444243;
    border:1px solid #dedede;
    padding:10px;
    margin-top:3px;
    font-size:0.9em;
    /*color:#3a3a3a;*/
    color:#ffffff;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

textarea {
    height:213px;
}

#submit {
    width:146px;
    height:50px;
    background-image: url(http://www.klassaktkreations.com/images/sprite2.png);
    background-position: 0px -129px;
    text-indent:-9999px;
    border:none;
    margin-top:20px;
    cursor:pointer;
}
    #submit:hover {
     background-image: url(http://www.klassaktkreations.com/images/sprite2.png);
    background-position: 0px -189px;
    }

Upvotes: 0

Views: 603

Answers (2)

gen_Eric
gen_Eric

Reputation: 227310

You're giving your img tag a background image.

The src of the image tag isn't loading (hence, the [x]), and the background is loading (hence the image).

Upvotes: 2

kamalo
kamalo

Reputation: 186

You have a broken link here:

<center><img class="home" src="sprite2.png" width="1" height="1"/></center>

Upvotes: 0

Related Questions