Problem With Container Head Text

[Norman]

Hello, I have a little problem. I'm trying to put two of these boxes toghether..http://infectthesystem.com/2008/20-free-css-containers/But I get a problem with the text on the head:http://img692.imageshack.us/img692/912/64879041.jpgThis is my current code..HTML:

<!-- Container Verde --><div class="container_verde">								<div class="container_verde_head">				<img src="images/container_verde/sidebar_left.jpg" alt="" class="verde_float_left"/>				<img src="images/container_verde/sidebar_right.jpg" alt="" class="verde_float_right"/>				<div class="container_verde_head_text">				Text				</div>				</div>				<div class="container_verde_content">				<img src="images/termocamino.jpg" width="150" height="100" style="float:left; margin-right: 10px" />				<p style="margin-top: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis. Nulla egestas eros posuere justo. Quisque laoreet sem tristique eros. Cras auctor. Nam non leo. Nunc non urna.  </p>		<div style="clear: both"></div>						</div>		</div><!-- //////////// --><!-- Container Blu --><div class="container_blu">								<div class="container_blu_head">				<img src="images/container_blu/sidebar_left.jpg" alt="" class="blu_float_left"/>				<img src="images/container_blu/sidebar_right.jpg" alt="" class="blu_float_right"/>				<div class="container_blu_head_text">				Text				</div>				</div>				<div class="container_blu_content">				<img src="images/termocamino.jpg" width="150" height="100" style="float:left; margin-right: 10px" />				<p style="margin-top: 10px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam iaculis. Nulla egestas eros posuere justo. Quisque laoreet sem tristique eros. Cras auctor. Nam non leo. Nunc non urna.  </p>		<div style="clear: both"></div>						</div>		</div><!-- ////////// -->

CSS:

<!-- Container Verde -->	<!--.verde_float_left {float:left;}.verde_float_right {float:right;}.container_verde {margin: 10px 80px 10px 80px;}.container_verde_head {height:30px;background-image:url(images/container_verde/sidebar_center.jpg);}.container_verde_head_text {height:23px;padding:7px 0 0 0;font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-size:16px;font-weight:bold;}.container_verde_content {font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:5px;color:#666666;border-width: 1px 1px 1px 1px;border-spacing: 0px;border-style: none solid solid solid;border-color: #74AB05;}<!-- //////// --><!-- Container Blu -->	<!--.blu_float_left {float:left;}.blu_float_right {float:right;}.container_blu {margin: 10px 80px 10px 80px;}.container_blu_head {height:30px;background-image:url(images/container_blu/sidebar_center.jpg);}.container_blu_head_text {height:23px;padding:7px 0 0 0;font-family:Arial, Helvetica, sans-serif;color:#FFFFFF;font-size:16px;font-weight:bold;}.container_blu_content {font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:5px;color:#666666;border-width: 1px 1px 1px 1px;border-spacing: 0px;border-style: none solid solid solid;border-color: #3E93F0;}<!-- //////// -->

Any help is appreciated.

[Ingolme]

As your code is right now, I can't see where the problem is.Can you post a sample page somewhere?

[Norman]

Here it is: http://www.nacciimpianti.it/test/

[Ingolme]

You can't put HTML comments in your stylesheet.Remove this:

<!-- Container Verde -->	<!--

And anything else similar to it.

[thescientist]

weird, i could have sworn i posted to this. Well, first off (again for me) you can't have those comments in your CSS. Use /* .... */Also, I compared your style to the styles you would have gotten from the page with all the examples, and I noticed that you have a bunch of margin settings for your container_verde and container_blu where they just have a width attribute in the examples.

[roundcorners]

that's a pretty crappy way of making a box.As your boxes are fixed width you don't need the header image to be sliced into several images, you just need one.Take the one complete image and use css background-image on a heading such as h2 and in that h2 element write your text.

[dsonesuk]

you have not include the float left ref .verde_float_left, .blu_float_left {float:left;}Edit: when i checked using firebug the above was not listed, but when i actually i checked the css file, you had included the above, but the html commenting you had used cancelled these out! so remove these html comments and problem solved!