Question about CSS background color property
Pliss...@gmail.com
In the div tag (with id=c1) , I have set the css background-color to
be white.
But when I load it, I don't see the white background for the div tag.
However, when I remove the style of the LI (with id=c5) i do see the
back ground color.
Can you please tell me why? In my c5 style, i don't have any
background color at all, shouldn't it use the div tag background
color?
Thank you.
<HTML>
<head><style>
body {
background-color: rgb(238, 238, 238);
color: rgb(51, 51, 51);
line-height: 1.2em;
font-family: tahoma,sans-serif;
font-size: 70%;
margin-bottom: 0pt;
margin-left: 0pt;
margin-right: 0pt;
margin-top: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
padding-right: 0pt;
padding-top: 0pt;
text-align: center;
background-position: 0pt 0pt;
background-repeat: repeat-x;
}
#c1 {
background-color: #ffffff;
}
#c4 {
margin-left: 9px;
list-style-type: none;
margin-bottom: 0pt;
margin-right: 0pt;
margin-top: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
padding-right: 0pt;
padding-top: 0pt;
}
.c5 {
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
clear: left;
float: left;
margin-bottom: 0pt;
margin-left: 0pt;
margin-right: 0pt;
margin-top: 0pt;
width: 13.6em;
white-space: nowrap;
}
</style></head>
<BODY>
<DIV id="c1">
<UL id="c4">
<LI class="c5">
<A href="http://mail.live.com">
<IMG height="20" width="25" src="http://tk2.stb.s-msn.com/i/
B6/32E46DE281A68B9C33FC582D2569D.gif" alt="Hotmail">
</IMG>
<SPAN>
<STRONG>
Hotmail</STRONG>
</SPAN>
</A>
</LI>
</UL>
</DIV>
</BODY>
</HTML>
L. David Baron
> I have the following test page:
>
> In the div tag (with id=c1) , I have set the css background-color to
> be white.
> But when I load it, I don't see the white background for the div tag.
>
> However, when I remove the style of the LI (with id=c5) i do see the
> back ground color.
>
> Can you please tell me why? In my c5 style, i don't have any
> background color at all, shouldn't it use the div tag background
> color?
When you float the li (and thus take it out of the flow), it no
longer contributes to the height of the div, so the div ends up
being zero height.
-David
--
L. David Baron http://dbaron.org/
Mozilla Corporation http://www.mozilla.com/
Pliss...@gmail.com
Thank you for the answer. But why this test page works (this is a
section of the msn.com).
When I inspect the first <li class="first">, it still has 'float:
left", and the background color is specified by div id='nav', the
topmost div tag.
But the background shows all white when i load the below in firefox.
If I understand your explanation above, it should first too, right?
<html>
<head><style>
@import "http://tk2.stc.s-msn.com/br/hp/11/en-us/css/hp_1.css";
@import "http://tk2.stc.s-msn.com/br/hp/11/en-us/css/ovr_13.css";
</style></head>
<body>
<div id="nav"><div class="parent chrome1 gt2_01 double1 cf"><div><div
class="child c1 first"><ul class="linkedimglinklist1 cf"><li
class="first"><a href="http://mail.live.com"><img height="20"
width="25" alt="Hotmail" src="http://tk2.stb.s-msn.com/i/
B6/32E46DE281A68B9C33FC582D2569D.gif"/><span><strong>Hotmail</strong></
span></a></li><li><a id="msg" href="http://im.live.com/messenger/im/
home/?source=MSNTDLINK"><img height="20" width="25" alt="Messenger"
src="http://tk2.stb.s-msn.com/i/48/86F1396496DFE1BAD68AB5F28409.gif"/
><span><strong>Messenger</strong></span></a></li><li><a href="http://
my.msn.com"><img height="20" width="25" alt="My MSN" src="http://
tk2.stb.s-msn.com/i/48/6CDE404B4BFEC334D023E5422081E0.gif"/
><span><strong>My MSN</strong></span></a></li><li class="last"><a
href="http://specials.msn.com/alphabet.aspx"><img height="20"
width="25" alt="MSN Directory" src="http://tk2.stb.s-msn.com/i/
78/7CE57843948D6DF13E79A2DE4E15C.gif"/><span><strong>MSN Directory</
strong></span></a></li></ul></div><div class="child c2"><div
class="cols cnt5"><ul class="linklist1"><li class="first"><a
href="http://travel.msn.com/default.aspx">Air Tickets/Travel</a></
li><li><a href="http://autos.msn.com/default.aspx">Autos</a></
li><li><a href="http://careers.msn.com">Careers & Jobs</a></li><li><a
href="http://cityguides.msn.com">City Guides</a></li><li
class="last"><a href="http://msn.match.com/index.aspx?
TrackingID=516163&BannerID=543351 ">Dating & Personals</a></li></
ul><ul class="linklist1"><li class="first"><a href="http://
election.msn.com">Election 2008</a></li><li><a id="new" href="http://
msn.delish.com/">Food & Entertaining</a></li><li><a href="http://
games.msn.com">Games</a></li><li><a href="http://green.msn.com">Green
Living</a></li><li class="last"><a href="http://health.msn.com">Health
& Fitness</a></li></ul><ul class="linklist1"><li class="first"><a
href="http://astrocenter.astrology.msn.com/msn/DeptHoroscope.aspx?
When=0&Af=-1000&VS">Horoscopes</a></li><li><a href="http://
lifestyle.msn.com/default.aspx">Lifestyle</a></li><li><a href="http://
maps.live.com/default.aspx?wip=2&v=2&rtp=~&FORM=MSNH">Maps
& Directions</a></li><li><a href="http://moneycentral.msn.com/
home.asp">Money</a></li><li class="last"><a href="http://
movies.msn.com/">Movies</a></li></ul><ul class="linklist1"><li
class="first"><a href="http://music.msn.com">Music</a></li><li><a
href="http://www.msnbc.msn.com/">News</a></li><li><a href="http://
realestate.msn.com">Real Estate/Rentals</a></li><li><a id="stlnk"
href="http://g.msn.com/0AD00036/931292.1??
HCType=1&CID=931292&PG=SHPHDR">Shopping</a></li><li
class="last"><a href="http://msn.foxsports.com/?MSNHPHTN">Sports</a></
li></ul><ul class="linklist1"><li class="first"><a href="http://
tech.msn.com">Tech & Gadgets</a></li><li><a href="http://
tv.msn.com">TV</a></li><li><a href="http://weather.msn.com">Weather</
a></li><li><a href="http://msn.whitepages.com/">White Pages</a></
li><li class="last"><a href="http://yellowpages.msn.com">Yellow Pages</
a></li></ul></div></div></div></div></div>
</body>
</html>