cmCalendar Template and CSS head scratching issue

post everything related to phpwcms templates here
Post Reply
vinchenzison
Posts: 13
Joined: Sun 30. Aug 2009, 12:21
Location: Nuremberg, Germany / Hertfordshire, UK

cmCalendar Template and CSS head scratching issue

Post by vinchenzison » Tue 13. Oct 2009, 13:01

Hi all,

Nearing the end of a job and suddenly found an issue!
If you look here http://m33.ch/index.php?Dates (site not actually live so dummy content) you'll see that I have a semi transparent background on the event entries.
I discovered today that the background only covers the height of the image and not all the text.
Can anyone help with the issue?

My css is simple.

Code: Select all

.cmCalListingEntry {
background-image:url(../../../../../site_images/transparentpixel.png);
}
And main part of my template...

Code: Select all

<!--CALENDAR_LIST_ENTRY_START//-->
	<div class="cmCalListingEntry">
    <div class="cmCalListingDetail">
    	[CALENDAR_ICAL]<div class="cmCalListingiCal">{CALENDAR_ICAL}</div>[/CALENDAR_ICAL]
      [CALENDAR_TITLE]<h2>{GT:Small-Links}{CALENDAR_TITLE}{/GT}</h2>[/CALENDAR_TITLE]
	  <div class="cmCalListingDate">[CALENDAR_LOCATION]{CALENDAR_LOCATION}[/CALENDAR_LOCATION]</div>
    	[CALENDAR_DATE]{CALENDAR_DATE}[/CALENDAR_DATE] - [CALENDAR_TIME]{CALENDAR_TIME}[/CALENDAR_TIME][CALENDAR_SPAN] - {CALENDAR_SPAN}[/CALENDAR_SPAN]
    	
    	[CALENDAR_DESCRIPTION]<br />{CALENDAR_DESCRIPTION}[/CALENDAR_DESCRIPTION]
      
      [CALENDAR_ARTICLELINK]<br>{CALENDAR_ARTICLELINK}[/CALENDAR_ARTICLELINK]
    </div>
	<div class="cmCalImg">
	[IMAGE]
  		[ZOOM_ELSE]
  			[IMAGE_URL]<a href="{IMAGE_URL}"{IMAGE_URL_TARGET}>[/IMAGE_URL]
  				<img src="img/cmsimage.php/75x75x1/{IMAGE_ID}" alt="{IMAGE}" border="0" />
  			[IMAGE_URL]</a>[/IMAGE_URL]
  			[CAPTION]<p>{CAPTION}</p>[/CAPTION]
  		[/ZOOM_ELSE]
  		[ZOOM]
  			<a href="img/cmsimage.php/600x400/{IMAGE_ID}" target="_blank"{LIGHTBOX}[LIGHTBOX_CAPTION] title="{LIGHTBOX_CAPTION}"[/LIGHTBOX_CAPTION]>
  				<img src="img/cmsimage.php/75x75x1/{IMAGE_ID}" alt="{IMAGE}" border="0" />
  			</a>
  		[/ZOOM]		
  	[/IMAGE]
	</div>
</div>
I'm stuck with this one. I've tried containing everything in another DIV but didn't work. Placing the background on the .cmCalListingDetail class and .cmCalImg class separately caused some other weird issue.

Any help is appreciated. Thanks

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: cmCalendar Template and CSS head scratching issue

Post by flip-flop » Tue 13. Oct 2009, 16:33

Hi,

Give .cmCalListingEntry overflow: hidden; and it will grow to the height of the
floats and you will see your background images.

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

vinchenzison
Posts: 13
Joined: Sun 30. Aug 2009, 12:21
Location: Nuremberg, Germany / Hertfordshire, UK

Re: cmCalendar Template and CSS head scratching issue

Post by vinchenzison » Tue 13. Oct 2009, 20:42

Fantastic! Never would have thought of even trying overflow!

Tschüs!

Post Reply