homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
background image not showing behind list html element
background container image isn't showing behind an unordered list html
michaelr

5+ Year Member



 
Msg#: 3828640 posted 10:28 pm on Jan 17, 2009 (gmt 0)

Hi all, I am getting more into the world of CSS and have been doing some work which uses 3 background images. A header, main content container image and a footer image. The main content container image scrolls as more content is added etc as you would expect.
The doctype is xhtml 1.0 transitional.

<head>
/* Main Page Container Images */
#plcontainerwide {
background:#fff url('plbodywide.jpg') repeat-y left top;
/* color:#333; */
margin : 0 auto;
position:relative;
/* text-align:center; */
width : 1000px;
}

#plheaderwide{
background : #fff url('PLheaderwide.jpg') no-repeat left top;
height : 150px;
padding : 150px 30px 5px 30px;
voice-family : "\";}\"";
voice-family : inherit;
height : 0;
}

#plbodywide{
background :#fff url('plbodywide.jpg') repeat-y left top;
margin:0;
padding : 5px 30px 0px 30px;
}

/* #plbodywideleft{
background :#fff url('plbodywide.jpg') repeat-y left top;
margin : 0;
padding : 10px 60px 10px 60px;
text-align:left
} */

#plfooterwide{
background : #fff url('plfooterwide3.jpg') no-repeat left top;
margin : 0;
padding : 200px 30px 0 30px;
}
</head>

<div id="plcontainerwide">

<div id="plheaderwide">
</div>
<!-- end plheaderwide div -->

<div id="plbodywide">
</div>
<!-- end plbodywide div ? -->

<div id="plfooterwide">

<div class="footerlink">
</div>
<!-- end footerlink div -->

</div>
<!-- end plfooterwide div -->
</div>
<!-- end plcontainerwide div -->

<h3 style="float:left; margin-left:13px; margin-top:0px; padding:0; width:450px; color:#000;">Recent News</h3>

<h3 style="float:right; margin-right:10px; margin-top:0px; padding:0; width:450px; color:#000">Upcoming News &amp; Events</h3>

<ul style="float:left; list-style-type:none; margin-left:13px; margin-top:0px; padding:0; width:450px;">
<li><h5 class="newsheading">Best Ever Exams Results</h5>This year
has seen our best ever results in public examinations. Over 70% of
our students achieved 5 or more A* to C grades at GCSE, and our
Sixth Form students achieved a 99.3% pass rate at A level..<a href="news.htm#examresults">[more]</a></li>

<li><h5 class="newsheading">Sports Award</h5>Abdi Ahmed has been
presented with the Harold Whitham Award for the most outstanding
performance at the 2008 English Schools Athletic Association
Championships..<a href="news.htm#sportsaward">[more]</a></li>

<li><h5 class="newsheading">Ofsted Inspection</h5>Parents will know
also that we had an Ofsted inspection in April of this year..<a href="news.htm#ofsted">[more]</a></li>

<li><h5 class="newsheading">Biology Department visit Peru</h5>This
summer twenty-two students went to work as research assistants
alongside a team of International Scientists on a Conservation
project in the Amazon Rainforest..<a href="news.htm#biology">[more]</a></li>

<li><h5 class="newsheading">Jump Rope for Heart</h5>This year&#8217;s
sponsored skip raised in excess of 750 for the British Heart
Foundation, with Ryan Bondswell raising over 150.&nbsp; He received a
special commemorative certificate and rucksack from the charity for
his efforts..<a href="news.htm#jumprope">[more]</a></li>

<li><h5 class="newsheading">Stephanie Allen Award</h5>The Stephanie
Allen Sixth Form Prize for Ecology was awarded by Mrs Allen in
memory of her daughter, Stephanie. The award went to Matthew Sorsby
and Jennifer Jebamani in recognition of their outstanding commitment
to Ecology Fieldwork during a week-long residential trip to the
North York Moors..<a href="news.htm#award">[more]</a></li>
<li><h5 class="newsheading">Uganda Partnership continues to develop</h5>
The partnership with Soroti Secondary School in North Eastern
Uganda, originally setup in 2006 has continued to develop. The
sports leadership programme is now established and the sports
leaders regularly organise events throughout the school year..<a href="news.htm#uganda">[more]</a></li>
</ul>

<ul style="float:left; list-style-type:none; margin-left:20px; margin-top:0px; padding:0; width:450px;">
<li><h5 class="newsheading">Access your child's records online</h5>
Did you know you can access your child&#8217;s school record on line? You
will shortly be receiving a letter with your username and password.</li>
<li></li>
<li></li>
</ul>

The problem appears to be that when I use the <ul> and <li> html tags as above which have been styled, my background image class 'plbodywide' fails to appear and scroll down behind the list content. This happens in IE7, FF 3.0.5 and also Safari.

I've done some testing and it appears that if I add a borderless table underneath the last <ul> then the background image within 'plbodywide' does scroll down behind all content as required.

<table width="100%" border="0">
<tr>
<td style="width:50%"></td>
<td style="width:50%"></td>
</tr>
</table>

On all the other pages (which don't use a list) where the background image does scroll down behind the main page content, the content is within <p> tags, of which are block level elements while some pages also use floated images.

Therefore I'm not sure now if there is a link between pages displaying correctly that contain block level html <p> tags and the non-correctly display page which is using <ul> list tags? Is it because <ul> isn't block level? I did try to style these with <ul style="display:block"> but that didn't make any difference either?

could anybody help me please?

Thanks,
Michael

 

Moby_Dim

10+ Year Member



 
Msg#: 3828640 posted 7:02 am on Jan 18, 2009 (gmt 0)

Try to remove obsolete things from your code first-- it 's hard to understand the problem using the current code. Make the code easy to copy and paste without a necessity to change it - let it be a copy of your page without comments, commented pieces of code, etc. And try to validate the code. this is the first.

the second is that the code we see contains errors. look - you wrote "my background image class 'plbodywide' fails to appear...", but i can see #plbodywide, not a .plbodywide... etc...

Try to clean up all this, and may be you'd be able to understand the problem yourself ;)

michaelr

5+ Year Member



 
Msg#: 3828640 posted 4:13 pm on Jan 18, 2009 (gmt 0)

Hi Moby thanks for the suggestions, I must admit I didn't think my initial question was that hard to understand really but I will try to clarify the matter and code so here goes.

I've got a template container for all pages consisting of a container image, header image, body image and footer image. The html and styles for which is listed below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

#plcontainerwide {
background:#fff url('plbodywide.jpg') repeat-y left top;
margin:0 auto;
position:relative;
width:1000px;
}

#plheaderwide{
background:#fff url('PLheaderwide.jpg') no-repeat left top;
height:150px;
padding:150px 30px 5px 30px;
voice-family : "\";}\"";
voice-family : inherit;
height:0;
}

#plbodywide{
background :#fff url('plbodywide.jpg') repeat-y left top;
margin:0;
padding : 5px 30px 0px 30px;
}

#plfooterwide{
background : #fff url('plfooterwide3.jpg') no-repeat left top;
margin:0;
padding:200px 30px 0 30px;
}

.newsheading{
margin-top:10px;
color:#0067A1;
}

</style>

</head>

<body>

<div id="plcontainerwide">

<div id="plheaderwide">
</div>

<div id="plbodywide">

<p>Vestibulum ornare, sapien in placerat feugiat, nisl quam rutrum tellus, hendrerit euismod lectus pede at lectus. Curabitur sit amet sem. Nunc aliquet mollis ligula!</p>

<p>Suspendisse non nisl vitae sem ullamcorper dignissim? Aliquam interdum sem vel tortor! Integer et odio.</p>

<h3 style="float:left; margin-left:13px; margin-top:0px; padding:0; width:450px; color:#000;">Recent News</h3>

<h3 style="float:right; margin-right:10px; margin-top:0px; padding:0; width:450px; color:#000">Upcoming News &amp; Events</h3>

<ul style="float:left; list-style-type:none; margin-left:13px; margin-top:0px; padding:0; width:450px;">

<li><h5 class="newsheading">Best Ever Exams Results</h5>This year has seen our best ever results in public examinations. Over 70% of our students achieved 5 or more A* to C grades at GCSE, and our Sixth Form students achieved a 99.3% pass rate at A level..<a href="news.htm#examresults">[more]</a></li>

<li><h5 class="newsheading">Sports Award</h5>Abdi Ahmed has been presented with the Harold Whitham Award for the most outstanding performance at the 2008 English Schools Athletic Association Championships..<a href="news.htm#sportsaward">[more]</a></li>

<li><h5 class="newsheading">Ofsted Inspection</h5>Parents will know also that we had an Ofsted inspection in April of this year..<a href="news.htm#ofsted">[more]</a></li>

<li><h5 class="newsheading">Biology Department visit Peru</h5>This summer twenty-two students went to work as research assistants alongside a team of International Scientists on a Conservation project in the Amazon Rainforest..<a href="news.htm#biology">[more]</a></li>

<li><h5 class="newsheading">Jump Rope for Heart</h5>This year&#8217;s sponsored skip raised in excess of 750 for the British Heart Foundation, with Ryan Bondswell raising over 150.&nbsp; He received a special commemorative certificate and rucksack from the charity for his efforts..<a href="news.htm#jumprope">[more]</a></li>

<li><h5 class="newsheading">Stephanie Allen Award</h5>The Stephanie Allen Sixth Form Prize for Ecology was awarded by Mrs Allen in memory of her daughter, Stephanie. The award went to Matthew Sorsby and Jennifer Jebamani in recognition of their outstanding commitment to Ecology Fieldwork during a week-long residential trip to the North York Moors..<a href="news.htm#award">[more]</a></li>

<li><h5 class="newsheading">Uganda Partnership continues to develop</h5>The partnership with Soroti Secondary School in North Eastern Uganda, originally setup in 2006 has continued to develop. The sports leadership programme is now established and the sports leaders regularly organise events throughout the school year..<a href="news.htm#uganda">[more]</a></li>
</ul>

<ul style="float:left; list-style-type:none; margin-left:20px; margin-top:0px; padding:0; width:450px;">
<li><h5 class="newsheading">Access your child's records online</h5>Did you know you can access your child&#8217;s school record on line? You will shortly be receiving a letter with your username and password.</li>
</ul>

</div>

<div id="plfooterwide">
</div>

</div>

</body>
</html>

To mention at first, the page does validate without any errors.

Now again for a hopefully better explanation.

The problem appears to relate to the <ul> tags in conjunction with the background image found within div id #plbodywide. The background image fails to carry on down behind content within the <ul> tags.

This happens in IE7, FF 3.0.5 and also Safari.

On all other pages (which don't use <ul> but instead use <p> and/or floated images) the background image within the div plbodywide DOES scroll down behind the main page content.

If I add something else after the <ul> then the image does display. behind content

I'm not sure if there is a link between pages displaying correctly that contain block level html <p> tags and the non-correctly displayed page using <ul> list tags?

Somebody did mention to me about adding clear:both to the #plfooterwide div which I presume was to over come both floated lists but this then leaves a big gap after the footer in Internet Explorer 7?

Does this help more?

Thanks,
Michael

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3828640 posted 3:04 am on Jan 19, 2009 (gmt 0)

You floated you <ul>: it isn't part of the flow and therefore it does not stretch it's parent. Remove the float and it'll work, or add something after the floated element(s) that has both the clear property and is not floated itself.

Tip: inline css is confusing to those of us who never use that.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved