Emmanize
06-15-2007, 04:01 PM
I am having a lot of trouble getting a drop shadow at either side of my div container. The main problem is because its not displaying as the background.
In FF
http://img.photobucket.com/albums/v123/Fashy/problem1.jpg
In IE
http://img.photobucket.com/albums/v123/Fashy/problem2.jpg
I have had to plonk the image URL in the HTML and that is the reason FF is displaying it that way. However IE is reading the CSS code.
What is the reason for it not showing as the background? And why is it not displaying in the middle?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>GESS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/gesscss.css" /> </head>
<body>
<div id= "outter">
<img src="images/shadow.jpg" alt="" width: "930px" />
<div id="container">
<div id="header"><img src="images/skylinex3.jpg" alt="" /></div> <!--HEADER DIV-->
<div id="navbar">
<ul>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
</ul>
</div> <!--NAVLIST DIV-->
<div id="main_content">
<div id="image"><img src="images/main_image1.jpg" alt="" /></div><!--IMAGE DIV-->
<div id="features">FEATURES</div> <!--FEATURES-->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ante. In eu elit. Morbi rhoncus, sapien et volutpat lacinia, nibh pede commodo lacus, at auctor ligula libero sit amet nisi. Maecenas bibendum, odio id facilisis lobortis, orci tellus rhoncus velit, non gravida enim leo vitae lectus. Sed ipsum. Mauris quis metus. Morbi mattis quam vitae eros. Integer commodo pretium purus. Ut sit amet purus vel quam lobortis ornare. Maecenas justo sapien, cursus ac, condimentum in, pretium id, leo.</p>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor. Quisque et arcu ut elit sagittis vulputate. Phasellus elit est, accumsan ac, venenatis at, ornare pellentesque, nisl. Cras pede quam, rhoncus sit amet, suscipit eu, laoreet sit amet, tortor. Proin at est non nulla volutpat pulvinar.</p>
<p>Ut pharetra, mauris id fermentum tempor, ante nunc porta nunc, et porta nibh neque non tellus. Phasellus leo nisl, posuere id, ornare ac, facilisis eu, enim. Curabitur sapien libero, consequat ut, mattis in, ullamcorper egestas, massa. Curabitur hendrerit sapien at dui. Donec placerat pulvinar orci. Integer condimentum ligula. Praesent leo justo, pellentesque pretium, fringilla quis, auctor et, nunc. Suspendisse sed justo. Suspendisse molestie lectus. Suspendisse eu neque id libero pharetra fermentum. Morbi metus eros, consectetuer at, pulvinar ac, consequat ac, arcu. Aenean auctor tristique ante. Morbi purus sem, tincidunt sed, vestibulum at, sodales sed, nibh. Cras laoreet, tellus id mollis pharetra, felis lacus consequat dolor, vel varius purus nulla in velit. Aenean leo. Cras ac arcu. Aenean euismod mi ut odio.</p>
</div> <!--CONTENT DIV-->
</div> <!--MAIN CONTENT DIV-->
<div id="footer">
<ul>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
</ul>
</div>
<div id="icons">
<img src="images/sponcer2.jpg" alt="" />
<img src="images/sponcer3.jpg" alt="" />
<img src="images/F&Enewlogo.jpg" alt="" />
</div>
<div id="bottom"><img src="images/bottom.jpg" alt="" /></div>
</div> <!--WRAPPER DIV-->
</div>
</body>
</html>
CSS
body {
font: normal 11px verdana,arial,helvetica,sans-serif;
background-color: #FFFFFF;
color:#000;
}
#container {
background-color:#FFFFFF;
border: 0px solid black;
margin-left:auto;
margin-right:auto;
margin-bottom: auto;
width: 800px;
min-height: 500px;
}
#header {
padding: 0px;
margin: 0px;
height: 263px;
width: 800px;
}
#navbar {
background-color:#FFFFFF;
border: 0px solid black;
margin-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
padding: 5px;
height: 30px;
}
#main_content {
background-color:#FFF;
border: 0px solid black;
width: 790px;
min-height: 580px;
margin: 5px;
}
#quicklinks {
background-color:#FFF;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
width: 188px;
height: 300px;
margin-top: 3px;
margin-left: 3px;
}
#image {
background-color:#FFF;
float: left;
width: 575px;
height: 300px;
margin-top: 1px;
}
#features{
background-color:#FFF;
float: right;
width: 200px;
height: 570px;
margin-top: 3px;
margin-right: 0px;
border-left: 2px solid #000;
padding: 5px;
}
#content {
background-color:#FFF;
width: 570px;
min-height: 200px;
border: 0px solid black;
float: left;
}
#quicklinks #image #features {
float: left;
width: 100px;
}
#footer{
background-color:#FFF;
margin:5px;
height: 100px;
overflow: auto;
clear:all;
padding-top: 15px;
padding-left: 10px;
background-image: url(../images/abb.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
#outter {
width: 830px;
margin-left:auto;
margin-right:auto;
background-color: #15ADFF;
background-image: url(../images/shadow.jpg);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: center top;
}
p {
padding: 5px;
text-align:justify;
}
#bottom {
width: 800px;
border: 0px solid black;
}
ul li {
display: inline;
margin-left:auto;
margin-right:auto;
margin-top:
}
li {
}
#icons {
background-color: #FFF;
padding: 3px;
padding-left: 10px;
}
The coding in question is in outter.
In FF
http://img.photobucket.com/albums/v123/Fashy/problem1.jpg
In IE
http://img.photobucket.com/albums/v123/Fashy/problem2.jpg
I have had to plonk the image URL in the HTML and that is the reason FF is displaying it that way. However IE is reading the CSS code.
What is the reason for it not showing as the background? And why is it not displaying in the middle?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>GESS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/gesscss.css" /> </head>
<body>
<div id= "outter">
<img src="images/shadow.jpg" alt="" width: "930px" />
<div id="container">
<div id="header"><img src="images/skylinex3.jpg" alt="" /></div> <!--HEADER DIV-->
<div id="navbar">
<ul>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
</ul>
</div> <!--NAVLIST DIV-->
<div id="main_content">
<div id="image"><img src="images/main_image1.jpg" alt="" /></div><!--IMAGE DIV-->
<div id="features">FEATURES</div> <!--FEATURES-->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ante. In eu elit. Morbi rhoncus, sapien et volutpat lacinia, nibh pede commodo lacus, at auctor ligula libero sit amet nisi. Maecenas bibendum, odio id facilisis lobortis, orci tellus rhoncus velit, non gravida enim leo vitae lectus. Sed ipsum. Mauris quis metus. Morbi mattis quam vitae eros. Integer commodo pretium purus. Ut sit amet purus vel quam lobortis ornare. Maecenas justo sapien, cursus ac, condimentum in, pretium id, leo.</p>
<p>Morbi tincidunt porta neque. Nulla facilisi. Mauris nec eros. Sed pretium magna et ipsum. Donec aliquet. Fusce varius dictum magna. Curabitur tempor. Quisque et arcu ut elit sagittis vulputate. Phasellus elit est, accumsan ac, venenatis at, ornare pellentesque, nisl. Cras pede quam, rhoncus sit amet, suscipit eu, laoreet sit amet, tortor. Proin at est non nulla volutpat pulvinar.</p>
<p>Ut pharetra, mauris id fermentum tempor, ante nunc porta nunc, et porta nibh neque non tellus. Phasellus leo nisl, posuere id, ornare ac, facilisis eu, enim. Curabitur sapien libero, consequat ut, mattis in, ullamcorper egestas, massa. Curabitur hendrerit sapien at dui. Donec placerat pulvinar orci. Integer condimentum ligula. Praesent leo justo, pellentesque pretium, fringilla quis, auctor et, nunc. Suspendisse sed justo. Suspendisse molestie lectus. Suspendisse eu neque id libero pharetra fermentum. Morbi metus eros, consectetuer at, pulvinar ac, consequat ac, arcu. Aenean auctor tristique ante. Morbi purus sem, tincidunt sed, vestibulum at, sodales sed, nibh. Cras laoreet, tellus id mollis pharetra, felis lacus consequat dolor, vel varius purus nulla in velit. Aenean leo. Cras ac arcu. Aenean euismod mi ut odio.</p>
</div> <!--CONTENT DIV-->
</div> <!--MAIN CONTENT DIV-->
<div id="footer">
<ul>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
<li>|</li>
<li>Link</li>
</ul>
</div>
<div id="icons">
<img src="images/sponcer2.jpg" alt="" />
<img src="images/sponcer3.jpg" alt="" />
<img src="images/F&Enewlogo.jpg" alt="" />
</div>
<div id="bottom"><img src="images/bottom.jpg" alt="" /></div>
</div> <!--WRAPPER DIV-->
</div>
</body>
</html>
CSS
body {
font: normal 11px verdana,arial,helvetica,sans-serif;
background-color: #FFFFFF;
color:#000;
}
#container {
background-color:#FFFFFF;
border: 0px solid black;
margin-left:auto;
margin-right:auto;
margin-bottom: auto;
width: 800px;
min-height: 500px;
}
#header {
padding: 0px;
margin: 0px;
height: 263px;
width: 800px;
}
#navbar {
background-color:#FFFFFF;
border: 0px solid black;
margin-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
padding: 5px;
height: 30px;
}
#main_content {
background-color:#FFF;
border: 0px solid black;
width: 790px;
min-height: 580px;
margin: 5px;
}
#quicklinks {
background-color:#FFF;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
width: 188px;
height: 300px;
margin-top: 3px;
margin-left: 3px;
}
#image {
background-color:#FFF;
float: left;
width: 575px;
height: 300px;
margin-top: 1px;
}
#features{
background-color:#FFF;
float: right;
width: 200px;
height: 570px;
margin-top: 3px;
margin-right: 0px;
border-left: 2px solid #000;
padding: 5px;
}
#content {
background-color:#FFF;
width: 570px;
min-height: 200px;
border: 0px solid black;
float: left;
}
#quicklinks #image #features {
float: left;
width: 100px;
}
#footer{
background-color:#FFF;
margin:5px;
height: 100px;
overflow: auto;
clear:all;
padding-top: 15px;
padding-left: 10px;
background-image: url(../images/abb.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
#outter {
width: 830px;
margin-left:auto;
margin-right:auto;
background-color: #15ADFF;
background-image: url(../images/shadow.jpg);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: center top;
}
p {
padding: 5px;
text-align:justify;
}
#bottom {
width: 800px;
border: 0px solid black;
}
ul li {
display: inline;
margin-left:auto;
margin-right:auto;
margin-top:
}
li {
}
#icons {
background-color: #FFF;
padding: 3px;
padding-left: 10px;
}
The coding in question is in outter.