Hello everybody. I have a problem with my css styling. I am building a wordpress site. I have a horizontal list with news items that I want to have a background color. The problem is that in combination with display:inline and float: left (to get a horizontal list) the background color disappears. Does anybody have a solution for this problem? <!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 profile="http://gmpg.org/xfn/11"> <title>AID INDIA</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="generator" content="WordPress 2.7.1" /> <!-- leave this for stats please --> <link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/style.css" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://localhost/wordpress/feed/" /> <link rel="alternate" type="text/xml" title="RSS .92" href="http://localhost/wordpress/feed/rss/" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://localhost/wordpress/feed/atom/" /> <link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" /> <script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/scripts/mootools.js" type="text/javascript"></script> <script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script> <link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/css/jd.gallery.css" type="text/css" media="screen" /> <link rel='archives' title='January 2009' href='http://localhost/wordpress/2009/01/' /> <link rel='archives' title='December 2008' href='http://localhost/wordpress/2008/12/' /> <link rel='archives' title='November 2007' href='http://localhost/wordpress/2007/11/' /> <meta name='robots' content='noindex,nofollow' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" /> <!-- Multi-level Navigation Plugin v2.1 by PixoPoint Web Development ... http://pixopoint.com/multi-level-navigation/ --> <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/style.php" /> <script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/hoverIntent.js.php?ver=r5'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/superfish.js?ver=1.4.8'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/superfish_settings.js.php?ver=1.0'></script> <meta name="generator" content="WordPress 2.7.1" /> <script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/NiftyCube/niftycube.js" type="text/javascript"></script> <script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/NiftyCube/niftyLayout.js" type="text/javascript"></script> <link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/NiftyCube/css/niftyCorners.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/NiftyCube/css/niftyLayout.css" type="text/css" media="screen" /> <script type="text/javascript"> window.onload=function(){ Nifty("li#search","big"); } </script> </head> <body> <div id="wrapper"> <img id="header-logo" src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/header-logo.gif" width="84" height="129" alt="logo AID India"/> <div id="header"> <ul> <li><h1><a href="http://localhost/wordpress">AID INDIA</a></h1></li> <li><h4>Injustice anywhere is a threat to justice everywhere</h4></li> <li><h4>Treat others as you would like to be treated</h4></li> </ul> </div> <!-- Multi-level Navigational Plugin by PixoPoint Web Development ... http://pixopoint.com/multi-level-navigation/ --> <div id="pixopoint_menu_wrapper1"> <div id="pixopoint_menu1"> <ul class="sf-menu" id="suckerfishnav"><li class="current_page_item"><a href="http://localhost/wordpress/">Home</a></li><li class="page_item page-item-10 haschildren"><a href="http://localhost/wordpress/about/" title="Who we are">Who we are</a> <ul> <li class="page_item page-item-62"><a href="http://localhost/wordpress/about/who-we-are/" title="About us">About us</a></li> <li class="page_item page-item-64"><a href="http://localhost/wordpress/about/where-we-work/" title="Where we work">Where we work</a></li> <li class="page_item page-item-66"><a href="http://localhost/wordpress/about/vision-mission/" title="Vision & mission">Vision & mission</a></li> <li class="page_item page-item-68"><a href="http://localhost/wordpress/about/organisation-profile/" title="Organisation profile">Organisation profile</a></li> </ul> </li> <li class="page_item page-item-5"><a href="http://localhost/wordpress/humanism/" title="What we do">What we do</a></li> <li class="page_item page-item-12"><a href="http://localhost/wordpress/the-community/" title="Where we work">Where we work</a> <ul> <li class="page_item page-item-20"><a href="http://localhost/wordpress/the-community/geographical-conditions/" title="Geographical Conditions">Geographical Conditions</a></li> <li class="page_item page-item-22"><a href="http://localhost/wordpress/the-community/population/" title="Population">Population</a></li> <li class="page_item page-item-24"><a href="http://localhost/wordpress/the-community/literacy-level/" title="Literacy Level">Literacy Level</a></li> <li class="page_item page-item-26"><a href="http://localhost/wordpress/the-community/health-status/" title="Health Status">Health Status</a></li> <li class="page_item page-item-28"><a href="http://localhost/wordpress/the-community/beneficiaries/" title="Beneficiaries">Beneficiaries</a></li> <li class="page_item page-item-30"><a href="http://localhost/wordpress/the-community/local-infrastructure/" title="Local Infrastructure">Local Infrastructure</a></li> </ul> </li> <li class="page_item page-item-131"><a href="http://localhost/wordpress/how-you-can-help/" title="How you can help">How you can help</a> <ul> <li class="page_item page-item-138"><a href="http://localhost/wordpress/how-you-can-help/micro-credit-program/" title="Micro Credit Program">Micro Credit Program</a></li> <li class="page_item page-item-140"><a href="http://localhost/wordpress/how-you-can-help/people-with-disabilities/" title="People with disabilities">People with disabilities</a></li> <li class="page_item page-item-136"><a href="http://localhost/wordpress/how-you-can-help/teaching-computer-application/" title="Teaching Computer Application">Teaching Computer Application</a></li> <li class="page_item page-item-134"><a href="http://localhost/wordpress/how-you-can-help/teaching-english/" title="Teaching English">Teaching English</a></li> </ul> </li> <li><a href="">News</a><ul><li><a href="http://localhost/wordpress/2009/01/need-based-training/">Need Based Training to the SHG Members</a></li><li><a href="http://localhost/wordpress/2009/01/children%e2%80%99s-day-celebration-in-island-of-hope/">Children’s Day Celebration in Island of Hope</a></li><li><a href="http://localhost/wordpress/2008/12/unity-in-humanist-orphanage-virudhunagar/">Unity In Humanist Orphanage Virudhunagar</a></li><li><a href="http://localhost/wordpress/2007/11/charity-in-virudhunagar/">Charity in Virudhunagar</a></li></ul></ul> </div> </div> <div id="extra"> <script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true, showArrows: true, showCarousel: false, useThumbGenerator: false, delay: 7000 }); } window.onDomReady(startGallery); </script> <div id="myGallery"> <div class="imageElement"> <h3>A chance for education</h3> <p></p> <a href="#" title="Find out more..." class="open"></a> <img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/photosaid/1.jpg" class="full" alt="Shine" /> </div> <div class="imageElement"> <h3>Farming for support</h3> <p></p> <a href="#" title="Open map" class="open"></a> <img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/photosaid/3.jpg" class="full" alt="Churches" /> </div> <div class="imageElement"> <h3>Micro credit for a better living</h3> <p></p> <a href="#" title="Read latest articles" class="open"></a> <img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/photosaid/4.jpg" class="full" alt="Civic Involvement" /> </div> <div class="imageElement"> <h3>Children are the future</h3> <p></p> <a href="#" title="Read latest articles" class="open"></a> <img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/photosaid/5.jpg" class="full" alt="Action" /> </div> </div> <div id="extra-sidebar"> <div class="sidebar3"> <ul> <li id="text-387420871" class="widget widget_text"> <h2 class="widgettitle">Aid India </h2> <div class="textwidget">Aid India empowers the disadvantaged in one of the poorest parts of India: Tamil Nadu. In this part of India, where 54% of rural people live below the poverty line, life is especially challenging for women, people with disabilities, orphans and deserted children. By means of orphanages, a micro credit program, welfare programs and educational opportunities Aid India enables the poor and disadvantaged to build up a better life! </div> </li> </ul> </div> </div> </div> <div class="sidebar4"> <ul> <div id="sp_image-392381781" class="widget widget_sp_image"> <img class="widget_sp_image-image" src="http://localhost/wordpress/wp-content/uploads/2009/03/sp_image-392381781-1238383894.jpeg" alt="image widget" /> </li> <li id="text-392398321" class="widget widget_text"> <h2 class="widgettitle">Bladie</h2> <div class="textwidget">Dit is een stukje tekst over de plaatjes, heel interessant. Er moet wel wat tekst staan anders is er niks aan. </div> </li> <div id="sp_image-392383071" class="widget widget_sp_image"> <img class="widget_sp_image-image" src="http://localhost/wordpress/wp-content/uploads/2009/03/sp_image-392383071-1238383956.jpeg" alt="image widget" /> </li> <li id="text-392398821" class="widget widget_text"> <h2 class="widgettitle">Bladie</h2> <div class="textwidget">Dit is een stukje tekst over de plaatjes, heel interessant. Er moet wel wat tekst staan anders is er niks aan.</div> </li> </ul> </div> <div id="recentnews"> <h2>News</h2> <ul id="newsblock"> <li><a href="http://localhost/wordpress/2009/01/need-based-training/"><div class="time"><p>24. 01. 2009</p></div>Need Based Training to the SHG Members<br /><div class="more">More</div></a></li> <li><a href="http://localhost/wordpress/2009/01/children%e2%80%99s-day-celebration-in-island-of-hope/"><div class="time"><p>16. 01. 2009</p></div>Children’s Day Celebration in Island of Hope<br /><div class="more">More</div></a></li> <li><a href="http://localhost/wordpress/2008/12/unity-in-humanist-orphanage-virudhunagar/"><div class="time"><p>09. 12. 2008</p></div>Unity In Humanist Orphanage Virudhunagar<br /><div class="more">More</div></a></li> <li><a href="http://localhost/wordpress/2007/11/charity-in-virudhunagar/"><div class="time"><p>20. 11. 2007</p></div>Charity in Virudhunagar<br /><div class="more">More</div></a></li> </ul> </div> </div> </body> </html> Code (markup): /************************************************************************ Recent news block below donate buttons **************************************************************************/ #recentnews h2{ font-family: Trebuchet MS; margin-top: 10px; color: #689A2F; } #recentnews ul{ background: #acacac; list-style-type: none; display: inline; padding: 0; margin: 0; } #recentnews ul li, #recentnews ul li a{ font-family: Arial; font-size: 12px; padding: 0 5px 5px 5px; width: 190px; color: #000000; font-weight: bold; float: left; } #newsblock li a:hover{ text-decoration:none} .time{ font-weight: normal; color: #ACACAC; } .more{ color: #689A2F; } Code (markup):
It's not the display: inline (you only have that to stop an IE6 bug), it's the float: left. This is normal behaviour. If you have a normal, static box (your ul) and its children are all floated, the static box (ul) can't see them. The floats are like Post-It notes: their bottoms are sticking "up" out of the page (towards you) and so the rules say the container thinks it's actually empty, and collapses its height to 0 (empty). The dirty way to fix this is to set a height (or a min-height) on the ul so it LOOKS like it's enclosing the floated children. It still can't see the children but to visitors it looks ok. The (usually more) correct way of doing it is to understand that this is normal for floats, and that there are a few ways to enclose them: setting the overflow property to something other than the default (visible), or having another child come after the floats who clears them, or floating the container too, or you can do stuff like display: table which comes with its own dangers. Internet Exploder of course follows the beat to its own drum and uses Haslayout to (incorrectly) enclose floats. If you want to see this stuff in action, get a modern browser (like FF or Opera) and IE (doesn't matter which one) and look through my floaties pages. IE6 has a few little bugs that make the content disappear sometimes too-- I never got around to fixing that. Short answer: I usually use overflow: hidden on my menus, unless it's a dropdown (you don't want the submenus hidden!).
Stomme poes gave you a great explanation , the short "resolve" would be to add a overflow:hidden to the container of the elements that are floating.