Scrolling Images - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Scrolling Images

on top of bg image but below text

jessicap

4:04 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

I'm trying to place a scrolling background image on my page that sits at the very top of the screen and is visible behind all sections of text and transparent images. Which section of code do I place it in to accomplish this?

I've tried to remove most of my code, only leaving enough to give a general idea of it's major elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css" media="screen">
body {
margin-top: 20px;
padding: 0;
background: url(images/bg.gif) repeat-y left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

#wrapper {
}

/* Header */

#header-wrapper {
width: 1000px;
margin: 0 auto;
}

#header {
width: 1000px;
height: 463px;
margin: 0 auto;
}

/* Menu */
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#page {
width: 1000px;
margin: 0 auto;
}
/** LOGO */

#logo {
height: 247px;
background: url(images/logo.gif) no-repeat left top;
}

/* Content */

#content {
float: left;
width: 720px;
}

/* Post */

.post {
margin-bottom: 25px;
}

.post .title {
height: 55px;
margin-bottom: 3px;
padding: 0px 0px 2px 20px;
background: url(images/sm_title_header.png) no-repeat right top;
color: #FFFFFF;
}

/* Sidebar */

#sidebar {
float: right;
width: 250px;
}

}
/* Footer */

#footer {
width: 900px;
height: 60px;
margin: 0 auto;
padding: 0;
}

jessicap

4:15 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

An afterthought question since we are discussing where to place images, I need to place an image in the bottom right of the page that does not scroll. It's only seen once a viewer has reached the bottom of the page. It's a partner to the scrolling image. Would I place this bottom graphic in the footer?

CSS_Kidd

4:28 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

First off to get that image to stay on top while scrolling you simply add "fixed" to the background like so:

body {
margin-top: 20px;
padding: 0;
background: url(images/bg.gif) repeat-y left top fixed;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

Now as you scroll the top image stays in view while all other content scrolls over it. However I am not sure if this is the image you wanted this effect on... You do have it set to "repete-y". At any rate "fixed" is what you want to apply to a background image when you want to keep it in its place as it scrolls.

And the easiest way to add that bottom image the way you described is to add a div below the footer or add a background image to the footer and set the horizontal position to right.

jessicap

4:40 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

You are correct, that is not the image I want the effect on. I have a bg image (the one you see in the code) and I'm trying to place this second image on top of it.

Thank you for the help with the bottom pic...I'll try that now :0)

CSS_Kidd

4:51 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

Ok maybe I am a little confused. What CSS class, id or tag are you putting this image in? Or are you asking how to create it?

jessicap

6:15 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

I tried the bottom picture in the footer, and I'm having the same problem that I'm having with the upper picture. They are meant to be sort of like a 2nd background. If I place the picture in the footer and it's large enough to reach the sidebar area, the background of the sidebar covers it up. I would like for these pictures to be able to cross into all sections just like the background does. I don't know where to place them. Does that make any more sense? I'm sorry if there's a terminology to this that I don't know!

CSS_Kidd

6:29 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

I think I understand what you mean now. What I think you want to do is to create a wrapper div with a fixed background image. Put that wrapper inside the body and put the rest of your page content (including the footer) inside that wrapper.

CSS
/*This is the css for just the wrapper*/
#wrapper{
background: url(images/top.gif)left top fixed;
}
/*Add any other style you want*/

HTML
<html>
<body>
<div id="wrapper">

</div>
</body>
</html>

Is that what you mean?

CSS_Kidd

6:30 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

Can you post both your css and html... I am sure one of us here will be able to help.

jessicap

11:22 pm on Dec 9, 2009 (gmt 0)

10+ Year Member

I tried placing the image in the wrapper, as you suggested, but I'm not seeing anything. I left it in below though; the image is listed as "img/top_curly.png". I tried condensing the code by removing parts I didn't think were necessary for this problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css" media="screen">
body {
margin-top: 20px;
padding: 0;
background: url(images/bg.gif) repeat-y left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

h1, h2, h3 {
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #649632;
}

h1 { font-size: 44px; }

h2 { font-size: 20px; }

h3 { font-size: 20px;
color: #CC0000; }
p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
}

a { color: #000000; }

a:hover { text-decoration: none; }

a img {
border: none;
}
img.left {
float: left;
margin: 7px 30px 0 0;
}

img.right {
float: right;
margin: 7px 0 0 30px;
}

hr { display: none; }

#wrapper {background: url(img/top_curly.png)left top fixed;
}

/* Header */

#header-wrapper {
width: 1100px;
margin: 0px 120px;
}

#header {
width: 1100px;
height: 70px;
margin: 0 auto;
}

/* Menu */
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 16em;
text-decoration: none;
font: 23px Georgia, "Times New Roman", Times, serif;
color: #C0C0C0;
}

#nav li { /* all list items */
float: left;
width: 16em; /* width needed for Opera */
}

#nav li ul { /* second-level lists */
position: absolute;
background: grey;
width: 16em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#page {
width: 1000px;
margin: 0 auto;
}
/** LOGO */

#logo {
height: 247px;
background: url(images/logo.gif) no-repeat left top;
}

/* Content */

#content {
float: left;
width: 720px;
}

/* Post */

.post {
margin-bottom: 25px;
}

.post .title {
height: 55px;
margin-bottom: 3px;
padding: 0px 0px 2px 20px;
background: url(images/sm_title_header.png) no-repeat right top;
color: #FFFFFF;
}

/* Sidebar */

#sidebar {
float: right;
width: 250px;
}

/* Footer */

#footer {
width: 900px;
height: 60px;
margin: 0 auto;
padding: 0;
}
</style>
<script type="text/javascript"><![CDATA[//><!]]></script>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="logo">
</div>
<hr />

<div id="header">
<ul id="nav">

<li><a href="%LINK%">Front Page</a></li>
<li><a href="%LINK%">Who We Are</a></li>
<li><a href="%LINK%">Where Are We</a>
<ul>
<li><a href="%LINK%">Europe</a></li>
<li><a href="%LINK%">North America</a></li>
<li><a href="%LINK%">Rest of the World</a></li>
</ul>
</li>
<li><a href="%LINK%">Links</a></li>
<li><a href="%LINK%">Exit</a></li>
</ul>
</div>
</div>

</div>


<div id="page">
<div id="content">
<div class="entry">
<p><img src="images/artist.jpg" class="left" /></p>
<div class="post">
<h2 class="title">Artist 1</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</p>
</div>
<p><img src="images/artist.jpg" class="right" /></p>
<div class="post">
<h2 class="titleb">Artist 2</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</p>
</div>
</div>
</div>

<div id="sidebar">
<ul>
<li>
<h3>Upcoming Releases</h3>
</li>
</ul>
</div>

<div id="search">
<ul>
<h3>Search This Site</h3>
</ul>
</div>

<div id="sidebar">
<ul>
<li>
<h3>Press Materials</h3>
<p>Enter the password to access our press materials.</p>
</li>
</ul>
</div>

<div style="clear: both;"> </div>
</div>


<div id="footer">
<p>Copyright (c) 2010 SITE. All rights reserved.</p>
</div>

</div>
</body>
</html>

CSS_Kidd

1:50 pm on Dec 10, 2009 (gmt 0)

10+ Year Member

You have an extra closing div here:

<div id="header">
<ul id="nav">
<li><a href="%LINK%">Front Page</a></li>
<li><a href="%LINK%">Who We Are</a></li>
<li><a href="%LINK%">Where Are We</a>
<ul>
<li><a href="%LINK%">Europe</a></li>
<li><a href="%LINK%">North America</a></li>
<li><a href="%LINK%">Rest of the World</a></li>
</ul>
</li>
<li><a href="%LINK%">Links</a></li>
<li><a href="%LINK%">Exit</a></li>
</ul>
</div>
</div>

</div> <--- Remove this and it works

When I removed that div it worked for me

plus I am not sure if you have a directory called "img" or if you did the following by mistake.

#wrapper {background: url(img/top_curly.png)left top fixed;
}

did you mean "url(images/top_curly.png)"

This is probably why you don't see your image.

also add a no-repeat if you only want that wrapper image to show once.

Here is the Full Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css" media="screen">
body {
margin-top: 20px;
padding: 0;
background: url(images/bg.gif) repeat-y left top
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
h1, h2, h3 {
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #649632;
}
h1 { font-size: 44px; }
h2 { font-size: 20px; }
h3 { font-size: 20px;
color: #CC0000; }
p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
}
a { color: #000000; }
a:hover { text-decoration: none; }
a img {
border: none;
}
img.left {
float: left;
margin: 7px 30px 0 0;
}
img.right {
float: right;
margin: 7px 0 0 30px;
}
hr { display: none; }
#wrapper {background: url(images/top_curly.png) no-repeat left top fixed;
}
/* Header */
#header-wrapper {
width: 1100px;
margin: 0px 120px;
}
#header {
width: 1100px;
height: 70px;
margin: 0 auto;
}
/* Menu */
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 16em;
text-decoration: none;
font: 23px Georgia, "Times New Roman", Times, serif;
color: #C0C0C0;
}
#nav li { /* all list items */
float: left;
width: 16em; /* width needed for Opera */
}
#nav li ul { /* second-level lists */
position: absolute;
background: grey;
width: 16em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#page {
width: 1000px;
margin: 0 auto;
}
/** LOGO */
#logo {
height: 247px;
background: url(images/logo.gif) no-repeat left top;
}
/* Content */
#content {
float: left;
width: 720px;
}
/* Post */
.post {
margin-bottom: 25px;
}
.post .title {
height: 55px;
margin-bottom: 3px;
padding: 0px 0px 2px 20px;
background: url(images/sm_title_header.png) no-repeat right top;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width: 250px;
}
/* Footer */
#footer {
width: 900px;
height: 60px;
margin: 0 auto;
padding: 0;
}
</style>
<script type="text/javascript"><![CDATA[//><!]]></script>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="logo">
</div>
<hr />

<div id="header">
<ul id="nav">
<li><a href="%LINK%">Front Page</a></li>
<li><a href="%LINK%">Who We Are</a></li>
<li><a href="%LINK%">Where Are We</a>
<ul>
<li><a href="%LINK%">Europe</a></li>
<li><a href="%LINK%">North America</a></li>
<li><a href="%LINK%">Rest of the World</a></li>
</ul>
</li>
<li><a href="%LINK%">Links</a></li>
<li><a href="%LINK%">Exit</a></li>
</ul>
</div>
</div>

</div>

<div id="page">
<div id="content">
<div class="entry">
<p><img src="images/artist.jpg" class="left" /></p>
<div class="post">
<h2 class="title">Artist 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</p>
</div>
<p><img src="images/artist.jpg" class="right" /></p>
<div class="post">
<h2 class="titleb">Artist 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</p>
</div>
</div>
</div>

<div id="sidebar">
<ul>
<li>
<h3>Upcoming Releases</h3>
</li>
</ul>
</div>
<div id="search">
<ul>
<h3>Search This Site</h3>
</ul>
</div>
<div id="sidebar">
<ul>
<li>
<h3>Press Materials</h3>
<p>Enter the password to access our press materials.</p>
</li>
</ul>
</div>

<div style="clear: both;"> </div>
</div>

<div id="footer">
<p>Copyright (c) 2010 SITE. All rights reserved.</p>
</div>

</div>
</body>
</html>

This fixes your Wrapper (top fixed image) issue.

Keep in mind that there still needs to be a few adjustments. Case in point: That 20px top margin on the body will cut off 20px of the top of your #wrapper background image. This is just one of the few things I noticed. Mess around with it and see what else there is.

Good Luck :)

jessicap

3:19 pm on Dec 10, 2009 (gmt 0)

10+ Year Member

I discovered the extra div last night while checking validation. I can't believe I wrote the wrong folder name...I'm such a dork! Once I dropped the 20px margin, everything looks perfect; thank you so very much!

For the bottom image, I don't know if this is proper or not, but I created:

#wrapperb {background: url(images/bottom_curly.png)right bottom no-repeat;
}

However, there's a tiny padding between the image and the bottom of the page. I can't spot it anywhere....hmmmm.

CSS_Kidd

3:58 pm on Dec 10, 2009 (gmt 0)

10+ Year Member

That tiny padding is in the default "body" tag padding and margins.
All you need to do is set the body tag up like so:

body {
margin: 0;
padding: 0;
background: url(images/bg.gif) repeat-y left top
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

I usually cancel out the body's default padding and margins and compensate where I need to with other divs and such.

jessicap

9:23 pm on Dec 10, 2009 (gmt 0)

10+ Year Member

Everything looks perfect in all browsers except IE8. The images in the wrappers don't show at all....any ideas?

CSS_Kidd

9:43 pm on Dec 10, 2009 (gmt 0)

10+ Year Member

Hmm... Not sure why. I have it working IE8...

Try adding "haslayout=true" in some conditional css after the normal <style></style> section:

Cheap fix but it works and I never have issues with it.

jessicap

5:12 am on Dec 11, 2009 (gmt 0)

10+ Year Member

Interesting that it's working for you in IE8....I have it working in 5 other browsers, but IE doesn't see it. I added your suggested fix to the bottom (maybe incorrectly) and didn't get any results.....I'm so sorry that this isn't running smoothly. I'll say it again, I'm CSS clueless! I'm going to re-post my head, now that I've been making edits,(some parts removed to control lengthy code) to see if that flags anything to you.

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background: url(images/bg.gif) repeat-y left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}

p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
}

hr { display: none; }

#wrapper {background: url(images/top_curly.png)center top fixed no-repeat;
}

#wrapperb {background: url(images/bottom_curly.png)right bottom no-repeat;
}

/* Header */

#header-wrapper {
width: 1000px;
margin: 0px 120px;
}

#header {
width: 1000px;
height: 70px;
margin: 0px 0px 0px 35px;
}

/* Menu */
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0px 0px 0px 10px;
list-style: none;
line-height: 1;
}

#page {
width: 1000px;
margin: 0 auto;
}
/** LOGO */

#logo {
height: 247px;
background: url(images/logo.gif) no-repeat left top;
}

/* Content */

#content {
float: left;
width: 720px;
}

/* Post */

.post {
margin-bottom: 25px;
}

.post .title {
height: 55px;
margin-bottom: 3px;
padding: 0px 0px 2px 20px;
background: url(images/sm_title_header.png) no-repeat right top;
color: #FFFFFF;
}

/* Sidebar */

#sidebar {
float: right;
width: 250px;
}

/* Footer */

#footer {
width: 900px;
height: 60px;
margin: 0 auto;
padding: 0;
}

</style>
<!--[if lte IE 7]>
<style type="text/css" media="screen">
#searchform #search {
position:relative;
margin-top:-1px;
}
</style>

<![endif]-->

</head>

swa66

1:45 pm on Dec 11, 2009 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Doctype: are you still using a full one ?
If not: do so. All versions of IE will behave much better if you do.

validation: make sure your CSS and html fully validate

zoom:1: in IE8 mode this doesn't trigger their notorious "hasLayout" anymore.
IE8 still has the property and you can still set it (using e.g. height:1%), but zoom:1 doesn't trigger it anymore.
Note that in IE8 mode hasLayout is mostly a moot point, you need javascript to even see if it's set or not. The effect of it is far less dramatic.

IE8 does still have some bugs (or features: there's no hope of getting fixes for them bugs). To figure it out, please try to follow the guidance in the pinned posts at the top of the forum and reduce the sample to the absolute minimum still triggering the bug. [More code means less people bother to read it at all]

CSS_Kidd

1:56 pm on Dec 11, 2009 (gmt 0)

10+ Year Member

This looks fine to me when I apply to the previous code you posted earlier..

Check your HTML once more to see if you have an extra closing divs "</div>" again. I put one in and it messed up IE but not everything else. Also check to make sure you closed all of of your tags as well too.

However I did catch one thing. In order to get that bottom image to completely show up, apply the the images height to the #wrapperb and then for sure messure ad a non-breaking space in the actual <div> it's self like so:
The bold text is what I added to the previous Code you provided.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
background: #ccc url(images/body-top-shadow.jpg) repeat-x left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
h1, h2, h3 {
margin: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #649632;
}
h1 { font-size: 44px; }
h2 { font-size: 20px; }
h3 { font-size: 20px;
color: #CC0000; }
p, ul, ol {
margin-top: 0;
line-height: 240%;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
}
a { color: #000000; }
a:hover { text-decoration: none; }
a img {
border: none;
}
img.left {
float: left;
margin: 7px 30px 0 0;
}
img.right {
float: right;
margin: 7px 0 0 30px;
}
hr { display: none; }
#wrapper {
background: url(images/top_curly.png) no-repeat left top fixed;
}
#wrapperb {
background: url(images/bottom_curly.png)right bottom no-repeat;
height: 150px; /*or what ever the height of the image may be*/
}
/* Header */
#header-wrapper {
width: 1100px;
margin: 0px 120px;
}
#header {
width: 1100px;
height: 70px;
margin: 0 auto;
}
/* Menu */
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 16em;
text-decoration: none;
font: 23px Georgia, "Times New Roman", Times, serif;
color: #C0C0C0;
}
#nav li { /* all list items */
float: left;
width: 16em; /* width needed for Opera */
}
#nav li ul { /* second-level lists */
position: absolute;
background: grey;
width: 16em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#page {
width: 1000px;
margin: 0 auto;
}
/** LOGO */
#logo {
height: 247px;
background: url(images/logo.gif) no-repeat left top;
}
/* Content */
#content {
float: left;
width: 720px;
}
/* Post */
.post {
margin-bottom: 25px;
}
.post .title {
height: 55px;
margin-bottom: 3px;
padding: 0px 0px 2px 20px;
background: url(images/sm_title_header.png) no-repeat right top;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width: 250px;
}
/* Footer */
#footer {
width: 900px;
height: 60px;
margin: 0 auto;
padding: 0;
}
</style>

<script type="text/javascript"><![CDATA[//><!]]></script>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="logo">
</div>
<hr />

<div id="header">
<ul id="nav">
<li><a href="%LINK%">Front Page</a></li>
<li><a href="%LINK%">Who We Are</a></li>
<li><a href="%LINK%">Where Are We</a>
<ul>
<li><a href="%LINK%">Europe</a></li>
<li><a href="%LINK%">North America</a></li>
<li><a href="%LINK%">Rest of the World</a></li>
</ul>
</li>
<li><a href="%LINK%">Links</a></li>
<li><a href="%LINK%">Exit</a></li>
</ul>
</div>
</div>
<div id="page">
<div id="content">
<div class="entry">
<p><img src="images/artist.jpg" class="left" /></p>
<div class="post">
<h2 class="title">Artist 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</p>
</div>
<p><img src="images/artist.jpg" class="right" /></p>
<div class="post">
<h2 class="titleb">Artist 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.</p>
</div>
</div>
</div>

<div id="sidebar">
<ul>
<li>
<h3>Upcoming Releases</h3>
</li>
</ul>
</div>
<div id="search">
<ul>
<h3>Search This Site</h3>
</ul>
</div>
<div id="sidebar">
<ul>
<li>
<h3>Press Materials</h3>
<p>Enter the password to access our press materials.</p>
</li>
</ul>
</div>

<div style="clear: both;"> </div>
</div>

<div id="footer">
<p>Copyright (c) 2010 SITE. All rights reserved.</p>
</div>



<div id="wrapperb">
&nsps;
<div>



</div>
</body>
</html>

If that doesn't work please post you css and your html together. That will give me a better idea of how everything is being laid out and applied.

jessicap

5:00 pm on Dec 11, 2009 (gmt 0)

10+ Year Member

I'm still using the same Doctype. I checked validation, and there is no extra closing divs or anything of that nature.....still no success in IE.

I am not having any problems with seeing the full bottom image so to avoid extra code, I didn't make the changes you suggested, but appreciate it nonetheless!

So what do I need to do now, post my entire code for you?

[edited by: swa66 at 8:30 pm (utc) on Dec. 11, 2009]

jessicap

3:35 pm on Dec 14, 2009 (gmt 0)

10+ Year Member

I found someone who identified the problem:

The background images aren't showing up in IE because IE doesn't like
it when there isn't a space after a "url()". So add a space after the
right parenthesis in the background declarations.