Full length background-color

[RammsteinNicCage]

Ok, here's what I'm trying to do, without tables.

Year
Month: Event
Month: Event
Month: Event

Year
Month: Event
Month: Event
Month: Event

In the Year section, there is a background color that I would like to have extend the full width of the content area, not just the text. I tried putting the width of the class at 100% and that didn't work... any other ideas?

Jennifer

[broniusm]

Could you post a snippet of html and the associate css? Otherwise, pulling straws:

<style>
.outer { width:400px; }
.yr { background-color:red; } /* note: width:100% unnecessary */
</style>

<div class="outer">
<div class="yr">Year</div>
Month: Event
Month: Event
</div>
...

Does that work?

[RammsteinNicCage]

I already tried something like that and it gave me the same result as not doing it.

<style>
#content {
border: 3px #307d7e solid;
float: left;
width: 75%;
margin-left: 30px;
background-color: #aaaaaa;
padding: 5px;
}

.bodyMenu {
color: #000000;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
background-color: #307d7e;
}
</style>

<div id="content">
<span class="bodyMenu">1994</span><br />
January: event <br />
<br />
<span class="bodyMenu">1995</span <br />
March: event <br />
August: event <br />
...
</div>

Jennifer

[broniusm]

A picture is worth a thousand words. Unfortunately, that has nothing to do with this thread... I digress..

I see a couple things:

- add "width:100%;" to your .bodyMenu for the year span, and I think you'll get what I think you're looking for (I tried it in IE6, and it worked)

- your 2nd span tag isn't closed, but that's probably not an issue here

- keep in mind that a span is inline and a div breaks a line. You might bear this in mind and possibly avoid having to throw in a <br> (preference, I guess).

hope this helps

[RammsteinNicCage]

whoops, well, that span problem definitely isn't it because I just quickly typed that in here so that it would look complete. :p

I did try width: 100%; and it didn't work in Opera 7.11, but I didn't try it in IE.... I'd like something that would work in Opera too.

And good point with the div/br thing, I'll change that later, but have to go to work now....

Jennifer

[RammsteinNicCage]

You're right, it does work in IE6 perfectly. But, it doesn't work in Opera 7.11, Netscape 7.02, or Mozilla 1.4. Any ideas on something that will also work on the other browsers?

edit: It doesn't work in Netscape 7.1 either.

Jennifer

[broniusm]

Check a css validator to be certain your css is perfect:
[jigsaw.w3.org...]

I ran your code thru and keep getting "You have no color with your background-color : #content" for CSS2. I tried quotes and apostrophes around #aaaaaa, but it just doesn't want to take. Maybe that's a clue?

Didn't want to leave you hanging-- just to say I hope someone else is still monitoring this thread! I'm an IE web apps developer. Good luck.

[RammsteinNicCage]

When trying to validate my css, I do get an error because of the scrollbar colors, but that doesn't matter to me really... or should I really use a javascript for that?

As for the background color, maybe it doesn't like that style and I should find the number equivalent (sorry, I don't remember the "real" name) of it?

Anyway, I did find something that worked... I took out the width: 100%; and put in display: block; and it works great. Thanks for the help. :)

Jennifer

[broniusm]

odd that you should have to explicity say display:block. I thought that was default, but good that you found something that works. Also, I don't know why it wouldn't take the hex rgb for color..

cheers
-bronius