Box-Shadow not showing up

Question

Box-Shadow not showing up

581 Views Asked by Nathaniel Graham At 10 April 2025 at 20:05

I'm a total newbie when it comes to coding. I'm taking a class for HTML in school right now and I'm having an issue with a page I'm trying to create. I'm learning about CSS right now and in a practice page I made my box-shadow included in #container is not showing up in my div. When I open up the "answer" page to test my browser it shows up, but on my page with practically identical code it doesn't. Any help would be appreciated because this is driving me crazy. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Bistro</title>
<meta charset="utf-8">
<style>
body {background-image: url(background.jpg);
font-family: Arial, Verdana, sans-serif;
}
h1 { background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
height: 100px; width: 650px;
font-size: 3em; 
padding-left: 150px; padding-top: 30px;
border: 1px solid #000033;
border-radius: 15px; 
text-shadow: 3px 3px 3px #666;
}
h2 { color: #000033; 
font-family: arial, sans-serif;
text-shadow: 1px 1px 0 #ccc;
}
#container { background-color: #ffffff;
padding: 20px;
width: 80%; min-width: 800px; max-width: 960px;
margin-right: auto;
margin-left: auto;
box-shadow: 5px 5px 5px #lelele; 
}
footer { font-size: .80em;
font-style: italic;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Lighthouse Bistro</h1>
</header>
<nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;
<a href="directions.html">Directions</a> &nbsp;<a 
href="contact.html">Contact</a></nav>
<main>
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are
available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-
fruit muffins, scones, croissants, and cinammon rolls.</p>
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with
locally-grown salad, fruit, and vegetables. </p>
</main>
<footer>Copyright &copy; 2014 Your Name Here</footer>
</div>
</body>
</html>

Original Q&A

There are 2 best solutions below

**Mitul Patel** · Answer 1

your #lelele is not color code So please change color and do this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Lighthouse Bistro</title>
    <meta charset="utf-8">
    <style>
    body {background-image: url(background.jpg);
    font-family: Arial, Verdana, sans-serif;
    }
    h1 { background-image: url(lighthouselogo.jpg);
    background-repeat: no-repeat;
    height: 100px; width: 650px;
    font-size: 3em; 
    padding-left: 150px; padding-top: 30px;
    border: 1px solid #000033;
    border-radius: 15px; 
    text-shadow: 3px 3px 3px #666;
    }
    h2 { color: #000033; 
    font-family: arial, sans-serif;
    text-shadow: 1px 1px 0 #ccc;
    }
    #container { background-color: #ffffff;
    padding: 20px;
    width: 80%; min-width: 800px; max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 2px 2px 10px #ff0000; 
    }
    footer { font-size: .80em;
    font-style: italic;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <header>
    <h1>Lighthouse Bistro</h1>
    </header>
    <nav><a href="index.html">Home</a> &nbsp;<a href="menu.html">Menu</a> &nbsp;
    <a href="directions.html">Directions</a> &nbsp;<a 
    href="contact.html">Contact</a></nav>
    <main>
    <h2>Locally Roasted Free-Trade Coffee</h2>
    <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are
    available hot or cold.</p>
    <h2>Specialty Pastries</h2>
    <p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-
    fruit muffins, scones, croissants, and cinammon rolls.</p>
    <h2>Lunchtime is Anytime</h2>
    <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with
    locally-grown salad, fruit, and vegetables. </p>
    </main>
    <footer>Copyright &copy; 2014 Your Name Here</footer>
    </div>*emphasized text*
    </body>
    </html>

**Kevin Wang** · Answer 2

Kevin Wang On 16 February 2016 at 05:36

The box-shadow that you are currently using doesn't actually use a color. Rather, you have #lelele rather than #1e1e1e. The different is that the first one isn't a color because you are using lowercase L's.

Box-Shadow not showing up

There are 2 best solutions below

Related Questions in HTML

Related Questions in SHADOWS

Trending Questions

Popular # Hahtags

Popular Questions