This has been bugging me for days.
http://www.teamserenity.com/IYTYGIB/index.htm
Don't look at it unless it's Firefox, or else it will look like *beep*.
Anyway, under the recent posts section, every other post is supposed to have a gray background. So, I styled the div with background-color: #f2f2f2; and it still looked white. So, I fiddled with the styles until I found out that the paragraph ( I just moved to NYC... ) is somehow "breaking" the background color ( I also tried styling the background with an image, fyi. ) - specifically the float: right; style. Anyone venture a guess as to why this is happening? Relevant code below:
HTML: I just moved to NYC and I need to start looking into private schools for my children. I'm not concerned about cost, but I don't want to be far away from the city. There are so many schools to sort through and I don't know where to start. If anyone can recommend some ...
I need to find a private school for kids near NYC, any help?
10/11/2007 1:25:35 PM by ronpaulisgod
CSS:
#posts { margin: 40px 0 0 -11px; width: 700px; }
#posts h2 {
font-family: Verdana, sans-serif;
font-weight: normal;
}
.post {
clear: both;
border-top: 1px solid #999;
}
img.poster {
float: left;
margin: 20px 10px 0 10px;
}
img.sillhouette {
float: left;
margin: 10px 11px 0 0;
}
.post h3, #gray h3, #gray2 h3 {
font-weight: normal;
color: #c01717;
display: inline;
float: left;
}
.post h6, #gray h6, #gray2 h6 {
color: #000;
font-size: .75em;
line-height: .85em;
float: left;
margin: -18px 0 0 30px;
font-weight: normal;
}
.post h6 a, #gray h6 a, #gray2 h6 a {
color: #c01717;
text-decoration: none;
}
.post p, #gray p, #gray2 p {
float: right;
width: 580px;
margin-right: 14px;
padding-bottom: 25px;
font-family: sans-serif;
font-size: .85em;
}
#gray, #gray2 {
clear: both;
border-top: 1px solid #999;
background-color: #ccc;
}
I hate to bump, but this is
I hate to bump, but this is really bugging me.
Additionally, the gray style is displaying correctly in IE.
Two things come to
Two things come to mind.
First, if you are going to style multiple divs you should use a class and not an ID (only one instance of an ID may be used on a page).
Second, if you are floating paragaphs within a div you need to clear those floats before closing the div. You may not be seeing the background color because, with no close to the floats, the div is collapsing rather than enclosing your elements.
re:First - I haven't
re:First - I haven't repeated any IDs. I used #gray and #gray2 for the two different blocks. Originally I had used one class for both blocks, but I decided to try ids just to see if it made a difference.
re:Second - I can't clear the floats or else the paragraph will display below the images on the left (block and red silhouette). I guess I could use negative margins to put the paragraph where it belongs after I clear the floats, but that would be pretty dumb, no?
You haven't contained your
You haven't contained your floats. Change #gray and #gray2 back to classes, add overflow: hidden to that class and then fix up the rest of your markup - can't have list items wrapped by anchors.
Where do I have list items
Where do I have list items wrapped by anchors?
I'll try your suggestion, thanks.
Edit: Whoops, I see those a's wrapping li's now - I hadn't uploaded after I fixed them, my mistake.
Edit2: Worked, thanks a lot.