5 replies [Last post]
Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 36 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

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:



Thread Starter
Sillhouette

I need to find a private school for kids near NYC, any help?


10/11/2007 1:25:35 PM by ronpaulisgod

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 ...




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;
}

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 36 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

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.

chikoppi
Offline
Enthusiast
Last seen: 9 years 50 weeks ago
Timezone: GMT-6
Joined: 2006-06-25
Posts: 85
Points: 2

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.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 36 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

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?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 9 years 36 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

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.