Hi
I've been trying to figure out why my repeat-y images don't work in Internet Explorer however works fine in any other browsers.
I am still trying to learn css and xhtml please help me resolve this matter...
My CSS:
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #CCCCCC;
}
a:link { color: #ffffff;
text-decoration: none;
}
a:visited {text-decoration: none;}
a:hover {color: #b23937;}
a:active {text-decoration: none;}
#wrapper {
width: 1151px;
margin-right: auto;
margin-left: auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
}
#wrapper #logo {
height: 120px;
width: 1151px;
}
#wrapper #navigation {
background-image: url(../images/nav.home.gif);
height: 32px;
}
#wrapper #navigation #navlabel {
color: #FFFFFF;
padding-top: 5px;
padding-left: 125px;
}
#wrapper #navigation #navlabel #nav li {
display:block;
width:100px;
float:left;
list-style:none;
}
#wrapper #header {
height: 391px;
background-image: url(../images/welcome.jpg);
}
#wrapper #mainContent {
height: 384px;
background-image: url(../images/maincontent.jpg);
width: 1151px;
}
#wrapper #bodyArea {
background: url(../images/bg_bodyarea.jpg) repeat-y;
}
#wrapper #bodyArea #mainContent #content {
display:block;
width:400px;
float:left;
}
#wrapper #bodyArea #mainContent #contentwrapper {
padding-left: 140px;
padding-top: 70px;
}
#wrapper #bodyArea #footer {
background-image: url(../images/footer.jpg);
height: 73px;
clear: both;
}
Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Perfect Vision</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo"><img src="images/header.jpg" alt="logo" /></div>
<div id="navigation">
<div id="navlabel">
<ul id="nav">
<li><a href="homepage.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="header"></div>
<div id="bodyArea">
<div id="mainContent">
<div id="contentwrapper">
<div id="content">
<p>August 10 2010</p>
<p> </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor, venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus. Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis quam pellentesque. </p>
<p> Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula. Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum, sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat. Fusce venenatis porttitor massa eget suscipit. Sed purus turpis, iaculis id sollicitudin id, vulputate sit amet velit. Suspendisse sed velit non tellus eleifend venenatis vehicula ut elit. Integer sit amet ullamcorper nulla. </p>
<p> Vestibulum dictum ante eu nisl ornare tincidunt. Etiam id risus mauris. Duis nec turpis in neque porttitor euismod sed id odio. Sed molestie urna a magna fermentum egestas. Nulla facilisi. Quisque risus neque, sodales pulvinar rhoncus a, lacinia eget neque. Vivamus vel malesuada nisl. Proin mollis tempor felis id dapibus. Morbi velit mi, aliquet sed malesuada et, blandit vitae eros. Nulla nec lorem quam, eu aliquam sapien. Quisque venenatis, enim non ultricies lobortis, lectus dolor consectetur nulla, eu tincidunt metus enim vitae libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet neque eu libero commodo condimentum. Fusce hendrerit diam sed libero lacinia nec adipiscing massa posuere. Pellentesque eget libero risus, eget venenatis metus. Morbi quis dolor enim. Cras orci orci, ultrices nec consectetur sed, auctor non leo. Aliquam nec sem erat. Nam ut nunc sed leo tempor pretium. Maecenas sit amet tortor a neque congue iaculis eu in ipsum. </p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
I've been trying to figure out why my repeat-y images don't work in Internet Explorer however works fine in any other browsers.
I am still trying to learn css and xhtml please help me resolve this matter...
My CSS:
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #CCCCCC;
}
a:link { color: #ffffff;
text-decoration: none;
}
a:visited {text-decoration: none;}
a:hover {color: #b23937;}
a:active {text-decoration: none;}
#wrapper {
width: 1151px;
margin-right: auto;
margin-left: auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
}
#wrapper #logo {
height: 120px;
width: 1151px;
}
#wrapper #navigation {
background-image: url(../images/nav.home.gif);
height: 32px;
}
#wrapper #navigation #navlabel {
color: #FFFFFF;
padding-top: 5px;
padding-left: 125px;
}
#wrapper #navigation #navlabel #nav li {
display:block;
width:100px;
float:left;
list-style:none;
}
#wrapper #header {
height: 391px;
background-image: url(../images/welcome.jpg);
}
#wrapper #mainContent {
height: 384px;
background-image: url(../images/maincontent.jpg);
width: 1151px;
}
#wrapper #bodyArea {
background: url(../images/bg_bodyarea.jpg) repeat-y;
}
#wrapper #bodyArea #mainContent #content {
display:block;
width:400px;
float:left;
}
#wrapper #bodyArea #mainContent #contentwrapper {
padding-left: 140px;
padding-top: 70px;
}
#wrapper #bodyArea #footer {
background-image: url(../images/footer.jpg);
height: 73px;
clear: both;
}
Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Perfect Vision</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="logo"><img src="images/header.jpg" alt="logo" /></div>
<div id="navigation">
<div id="navlabel">
<ul id="nav">
<li><a href="homepage.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="header"></div>
<div id="bodyArea">
<div id="mainContent">
<div id="contentwrapper">
<div id="content">
<p>August 10 2010</p>
<p> </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor, venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus. Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis quam pellentesque. </p>
<p> Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula. Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum, sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat. Fusce venenatis porttitor massa eget suscipit. Sed purus turpis, iaculis id sollicitudin id, vulputate sit amet velit. Suspendisse sed velit non tellus eleifend venenatis vehicula ut elit. Integer sit amet ullamcorper nulla. </p>
<p> Vestibulum dictum ante eu nisl ornare tincidunt. Etiam id risus mauris. Duis nec turpis in neque porttitor euismod sed id odio. Sed molestie urna a magna fermentum egestas. Nulla facilisi. Quisque risus neque, sodales pulvinar rhoncus a, lacinia eget neque. Vivamus vel malesuada nisl. Proin mollis tempor felis id dapibus. Morbi velit mi, aliquet sed malesuada et, blandit vitae eros. Nulla nec lorem quam, eu aliquam sapien. Quisque venenatis, enim non ultricies lobortis, lectus dolor consectetur nulla, eu tincidunt metus enim vitae libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet neque eu libero commodo condimentum. Fusce hendrerit diam sed libero lacinia nec adipiscing massa posuere. Pellentesque eget libero risus, eget venenatis metus. Morbi quis dolor enim. Cras orci orci, ultrices nec consectetur sed, auctor non leo. Aliquam nec sem erat. Nam ut nunc sed leo tempor pretium. Maecenas sit amet tortor a neque congue iaculis eu in ipsum. </p>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>