Hi there,
While doing the TIO - Styling the Planet Wrox Homepage, the browser(IE8) page does not display correctly as per default.aspx below:-
Styles.css paste below for reference.
I have installed modernizr library to the site, what is wrong?
<%@ Page Language="
VB" %>
<!DOCTYPE html>
<script runat="server">
Protected Sub Page_Load(sender As Object, e As EventArgs)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
color: #990033;
}
</style>
<link href="MasterPages/Styles/Styles.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<header>Header Goes Here</header>
<nav>Menu Goes Here</nav>
<section id="MainContent">
<h1>Hi there visitor and welcome to Planet Wrox</h1>
</section>
<aside ="Sidebar">Sidebar Goes Here</aside>
<footer>Footer Goes Here</footer><p>
We're glad you're<span class="auto-style1"> paying a visit</span> to <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>, the coolest music community site on the internet. and concert</p>
<p>
</p>
<p>
Feel free to have a look around; there are lots of interesting <strong>reviews and concert pictures</strong> to be found here.</p>
</div>
</form>
</body>
</html>
Reference from styles.css
header
{
background-color: #C0C0C0;
width: 844px;
height: 86px;
}
*
{
font-family: Arial;
}
h1
{
font-size: 20px;
}
#Pagewrapper
{
width: 844px;
margin: auto;
}
nav
{
width: 844px;
}
section#MainContent {
width: 664px;
float: left;
}
aside
{
background-color: Gray;
width: 180px;
float: left;
}
footer
{
background-color: #C0C0C0;
width: 844px;
clear: both;
}
Chapter 3 - Try it out - Styling PW Homepage
button below this post to show your appreciation!
