elementalgrace Posted January 10, 2008 Share Posted January 10, 2008 I have a really weird problem with a calendar that I can't make head nor tail of. Fingers crossed someone here might be able to see something I can't because it's driving me batty. I've checked it with firebug (it's not inheriting anything weird) and tried everything I can think of (which is by no means exhaustive, I admit) and I just cannot see what's making it happen.The problem is this: The calendar page is working nicely. When you add an event, it displays in a blue box that links through to the event in more detail. The problem occurs when you put in a title longer than about 20 characters. The link doesn't stay within the box but the overflow carries on outside the box. The content is a link within the title div. The strange thing is that the title div stays inside the previous div but the a tag doesn't If I put overflow:hidden on the monthview class that contains the other div and the link then it does hide the excess content but this seems like a pretty shoddy solution. I want the monthview div to stretch and accomodate all the content in the link rather than cutting it off halfway through. If anyone has any suggestions, I'd be absolutely very happy to hear them!HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta name="author" content="" /> <meta name="copyright" content="" /> <meta name="robots" content="all" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" media="screen" href="themes/themename/styles.css" /> <!--[if lt IE 7]><link type="text/css" rel="stylesheet" media="all" href="themes/ttml/ie.css" /> <![endif]--> <link rel="alternate" type="application/atom+xml" title="" href="/rss.xml" /> <script type="text/javascript" src="/drupal-5.3/misc/jquery.js"></script> <script type="text/javascript" src="/drupal-5.3/misc/drupal.js"></script> <script type="text/javascript" src="/drupal-5.3/modules/jstools/jstools.js"></script> <script type="text/javascript" src="/drupal-5.3/modules/jstools/collapsiblock/collapsiblock.js"></script> <script type="text/javascript" src="/drupal-5.3/modules/jstools/jquery.cookie.js"></script> <script type="text/javascript" src="/drupal-5.3/modules/jstools/tabs/jquery.tabs.pack.js"></script> <script type="text/javascript" src="/drupal-5.3/modules/jstools/jquery.history_remote.min.js"></script> <script type="text/javascript" src="/drupal-5.3/modules/jstools/tabs/tabs.js"></script> <script type="text/javascript">Drupal.extend({ settings: { "jstools": { "cleanurls": false, "basePath": "/drupal-5.3/" }, "collapsiblock": { "blocks": { "block-views-contacts": "1", "block-event-0": "1" }, "default_state": 1 }, "tabs": { "slide": false, "fade": false, "speed": "slow", "auto_height": false } } });</script></head><body> <div id="all"> <!--HEADER--> <div id="header"> <a href="/drupal-5.3"> <img src="themes/themename/images/logo.png" alt=" logo. Click on the image to return to the homepage" class="logo" /></a> <!--TOP NAV--> <ul class="links"> <li class="first menu-1-1-2"><a href="/drupal-5.3/" title="Shortcut to home" class="menu-1-1-2"> Home</a></li> <li class="menu-1-2-2"><a href="/drupal-5.3/?q=calendar" title="Company Calendar and Events" class="menu-1-2-2">Calendar</a></li> <li class="menu-1-3-2"><a href="/drupal-5.3/?q=image/tid" title="Image Gallery" class="menu-1-3-2"> Gallery</a></li> <li class="menu-1-4-2-active"><a href="/drupal-5.3/?q=meetingroom" title="Check the meeting room availability" class="menu-1-4-2-active active">Meeting Room</a></li> <li class="menu-1-5-2"><a href="/drupal-5.3/?q=ed-classified/tid/11" title="Company News and Events" class="menu-1-5-2">Notice Board</a></li> <li class="last menu-1-6-2"><a href="/drupal-5.3/?q=view/contacts" title="A list of Client Contacts" class="menu-1-6-2">Contacts</a></li> </ul> <!--END TOPNAV--> <img src="themes/ttml/images/header.jpg" height="60" width="996" alt="Decorative Images" /> <!--END HEADER--> </div> <!--LEFT--> <div id="left-sidebar"> <div class="block block-menu" id="block-menu-116"> <div class="blockinner"> <h2 class="title"> Lorem Ipsum </h2> <div class="content"> <ul class="menu"> <li class="leaf"><a href="/drupal-5.3/?q=node/29" title="Lorem Ipsum Sit Dolor">Escalation</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/31" title="Lorem Ipsum Sit Dolor">Excel Bible</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/32" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/30" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/26" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/27" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/28" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> </ul> </div> </div> </div> <div class="block block-menu" id="block-menu-115"> <div class="blockinner"> <h2 class="title"> Lorem Ipsum </h2> <div class="content"> <ul class="menu"> <li class="leaf"><a href="/drupal-5.3/?q=node/25" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/24" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> </ul> </div> </div> </div> <div class="block block-menu" id="block-menu-114"> <div class="blockinner"> <h2 class="title">Lorem Ipsum Sit Dolor</h2> <div class="content"> <ul class="menu"> <li class="leaf"><a href="/drupal-5.3/?q=node/22" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/23" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/21" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/20" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/19" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> </ul> </div> </div> </div> <div class="block block-menu" id="block-menu-46"> <div class="blockinner"> <h2 class="title"> Lorem Ipsum </h2> <div class="content"> <ul class="menu"> <li class="leaf"><a href="/drupal-5.3/?q=node/10" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/8" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/9" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> </ul> </div> </div> </div> <div class="block block-menu" id="block-menu-57"> <div class="blockinner"> <h2 class="title"> Lorem Ipsum </h2> <div class="content"> <ul class="menu"> <li class="leaf"><a href="/drupal-5.3/?q=node/18" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/17" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/12" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/11" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/13" title="Lorem Ipsum Sit Dolor"> Lorem Ipsum Sit Dolor</a></li> </ul> </div> </div> </div> <div class="block block-menu" id="block-menu-64"> <div class="blockinner"> <h2 class="title"> Lorem Ipsum </h2> <div class="content"> <ul class="menu"> <li class="leaf"><a href="/drupal-5.3/?q=node/6" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> <li class="leaf"><a href="/drupal-5.3/?q=node/7" title="Lorem Ipsum Sit Dolor">Lorem Ipsum Sit Dolor</a></li> </ul> </div> </div> </div> </div> <!--END LEFT--> <!--CONTENT--> <div id="content"> <h1> Meeting Room</h1> <div class="tabs"> <ul class="tabs primary"> <li class="active"><a href="/drupal-5.3/?q=meetingroom" class="active">View</a></li> <li><a href="/drupal-5.3/?q=meetingroom/edit">Edit</a></li> <li><a href="/drupal-5.3/?q=meetingroom/clone">Clone</a></li> <li><a href="/drupal-5.3/?q=meetingroom/export">Export</a></li> <li><a href="/drupal-5.3/?q=meetingroom/setup" title="Calendar setup.">Setup</a></li> <li><a href="/drupal-5.3/?q=meetingroom/ical" title="iCal setup.">iCal</a></li> </ul> </div> <div class='view view-Meeting-Room'> <div class='view-content view-content-Meeting-Room'> <ul class="links"> <li class="first 0"><a href="/drupal-5.3/?q=meetingroom/2008" class="0">Year</a></li> <li class="1"><a href="/drupal-5.3/?q=meetingroom/2008/01" class="1">Month</a></li> <li class="last 2"><a href="/drupal-5.3/?q=meetingroom/2008/01/9" class="2">Day</a></li> </ul> <div class="calendar-calendar"> <table> <thead> <tr> <th class="prev"> <span class="prev"><a href="/drupal-5.3/?q=meetingroom/2007/12/all">« prev</a></span></th> <th class="heading" colspan="5"> January 2008</th> <th class="next"> <span class="next"><a href="/drupal-5.3/?q=meetingroom/2008/2/all">next »</a></span></th> </tr> </thead> <tbody> </tbody> </table> </div> <div class="calendar-calendar"> <div class="month-view"> <table> <tbody> <tr class="odd"> <td class="days mon"> Mon</td> <td class="days tue"> Tue</td> <td class="days wed"> Wed</td> <td class="days thu"> Thu</td> <td class="days fri"> Fri</td> <td class="days sat"> Sat</td> <td class="days sun"> Sun</td> </tr> <tr class="even"> <td> <div class="calendar-empty"> </div> </td> <td class="jan tue" id="jan1"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/1">1</a></div> </div> </td> <td class="jan wed" id="jan2"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/2">2</a></div> </div> </td> <td class="jan thu" id="jan3"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/3">3</a></div> </div> </td> <td class="jan fri" id="jan4"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/4">4</a></div> </div> </td> <td class="jan sat" id="jan5"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/5">5</a></div> </div> </td> <td class="jan sun" id="jan6"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/6">6</a></div> </div> </td> </tr> <tr class="odd"> <td class="jan mon" id="jan7"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/7">7</a></div> </div> </td> <td class="jan tue" id="jan8"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/8">8</a></div> </div> </td> <td class="jan wed today" id="jan9"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/9">9</a></div> </div> </td> <td class="jan thu" id="jan10"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/10">10</a></div> <div class="calendar monthview"> <div class="stripe-1" title="Key: 1"> <span class="stripe">Key 1</span></div> <div class="title"> <a href="/drupal-5.3/?q=node/69" title="view this item">test meeting room request 123 456 789</a></div> <div class="times"> <span class="start">14:15</span> <span class="end">- 17:15</span> </div> <div class="links"> </div> </div> </div> </td> <td class="jan fri" id="jan11"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/11">11</a></div> </div> </td> <td class="jan sat" id="jan12"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/12">12</a></div> </div> </td> <td class="jan sun" id="jan13"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/13">13</a></div> </div> </td> </tr> <tr class="even"> <td class="jan mon" id="jan14"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/14">14</a></div> </div> </td> <td class="jan tue" id="jan15"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/15">15</a></div> </div> </td> <td class="jan wed" id="jan16"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/16">16</a></div> </div> </td> <td class="jan thu" id="jan17"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/17">17</a></div> </div> </td> <td class="jan fri" id="jan18"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/18">18</a></div> </div> </td> <td class="jan sat" id="jan19"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/19">19</a></div> </div> </td> <td class="jan sun" id="jan20"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/20">20</a></div> </div> </td> </tr> <tr class="odd"> <td class="jan mon" id="jan21"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/21">21</a></div> </div> </td> <td class="jan tue" id="jan22"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/22">22</a></div> </div> </td> <td class="jan wed" id="jan23"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/23">23</a></div> </div> </td> <td class="jan thu" id="jan24"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/24">24</a></div> </div> </td> <td class="jan fri" id="jan25"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/25">25</a></div> </div> </td> <td class="jan sat" id="jan26"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/26">26</a></div> </div> </td> <td class="jan sun" id="jan27"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/27">27</a></div> </div> </td> </tr> <tr class="even"> <td class="jan mon" id="jan28"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/28">28</a></div> </div> </td> <td class="jan tue" id="jan29"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/29">29</a></div> </div> </td> <td class="jan wed" id="jan30"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/30">30</a></div> </div> </td> <td class="jan thu" id="jan31"> <div class="inner"> <div class="day"> <a href="/drupal-5.3/?q=meetingroom/2008/01/31">31</a></div> </div> </td> <td> <div class="calendar-empty"> </div> </td> <td> <div class="calendar-empty"> </div> </td> <td> <div class="calendar-empty"> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <!--END CONTENT--> <!--RIGHT--> <div id="right-sidebar"> <div class="block block-views" id="block-views-tracker"> <div class="blockinner"> <h2 class="title"> Most Recent Posts </h2> <div class="content"> <div class='view view-tracker'> <div class='view-content view-content-tracker'> <div class="item-list"> <ul> <li> <div class='view-item view-item-tracker'> <div class='view-label view-label-node-title'> Title</div> <div class='view-field view-data-node-title'> <a href="/drupal-5.3/?q=node/69">test meeting room request 123 456 789</a> </div> <div class='view-label view-label-users-name'> Author</div> <div class='view-field view-data-users-name'> <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div> </div> </li> <li> <div class='view-item view-item-tracker'> <div class='view-label view-label-node-title'> Title</div> <div class='view-field view-data-node-title'> <a href="/drupal-5.3/?q=node/66">test notice 2</a> </div> <div class='view-label view-label-users-name'> Author</div> <div class='view-field view-data-users-name'> <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div> </div> </li> <li> <div class='view-item view-item-tracker'> <div class='view-label view-label-node-title'> Title</div> <div class='view-field view-data-node-title'> <a href="/drupal-5.3/?q=node/65">Test Notice</a> </div> <div class='view-label view-label-users-name'> Author</div> <div class='view-field view-data-users-name'> <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div> </div> </li> <li> <div class='view-item view-item-tracker'> <div class='view-label view-label-node-title'> Title</div> <div class='view-field view-data-node-title'> <a href="/drupal-5.3/?q=node/64">tuesday test</a> </div> <div class='view-label view-label-users-name'> Author</div> <div class='view-field view-data-users-name'> <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div> </div> </li> <li> <div class='view-item view-item-tracker'> <div class='view-label view-label-node-title'> Title</div> <div class='view-field view-data-node-title'> <a href="/drupal-5.3/?q=node/63">test event 2</a> </div> <div class='view-label view-label-users-name'> Author</div> <div class='view-field view-data-users-name'> <a href="/drupal-5.3/?q=user/1" title="View user profile.">admin</a></div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="block block-search" id="block-search-0"> <div class="blockinner"> <h2 class="title"> Search </h2> <div class="content"> <form action="/drupal-5.3/?q=search/node" method="post" id="search-block-form"> <div> <div class="container-inline"> <div class="form-item"> <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size="15" value="" title="Enter the terms you wish to search for." class="form-text" /> </div> <input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" /> <input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="557d481f14ed033ef2762fb8e4a23aba" /> <input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form" /> </div> </div> </form> </div> </div> </div> <div class="block block-poll" id="block-poll-0"> <div class="blockinner"> <h2 class="title"> Poll </h2> <div class="content"> <div class="poll"> <div class="title"> What do you think of the this?</div> <div class="text"> Great</div> <div class="bar"> <div style="width: 67%;" class="foreground"> </div> </div> <div class="percent"> 67%</div> <div class="text"> Rubbish</div> <div class="bar"> <div style="width: 33%;" class="foreground"> </div> </div> <div class="percent"> 33%</div> <div class="total"> Total votes: <em>3</em></div> </div> <div class="links"> <ul class="links"> <li class="first last 0"><a href="/drupal-5.3/?q=poll" title="View the list of polls on this site." class="0">Older polls</a></li> </ul> </div> </div> </div> </div> <div class="block block-user" id="block-user-1"> <div class="blockinner"> <h2 class="title"> admin </h2> <div class="content"> <ul class="menu"> <li class="collapsed"><a href="/drupal-5.3/?q=node">Content</a></li> <li class="leaf"><a href="/drupal-5.3/?q=user/1">My account</a></li> <li class="collapsed"><a href="/drupal-5.3/?q=admin">Administer</a></li> <li class="leaf"><a href="/drupal-5.3/?q=logout">Log out</a></li> </ul> </div> </div> </div> </div> <!--END RIGHT--> <div style="clear: both;"> </div> </div></body></html> CSS /*ALL*/*{margin:0; padding:0;}body {margin:0; padding:0;text-align:center; font:100% arial, sans-serif;background-color:#217eb8}#all{width:996px;border:1px #c0c0c0 solid;margin:auto; background-color:#ffffff; text-align:left;}/*HEAD*/#header{ width:996px; background: url(images/topnav_bg.gif) no-repeat; background-color:White;}#header img{padding:0; margin:2px 0 0 0;}.logo{float:left;border:none; height:39px; width:100px;}#header .links{margin:5px 3px 0 0; padding:0;float:right;}#header .links li{display:inline; margin: 0px 15px 0px 0px; text-align:right; letter-spacing:-1px; font: bold 85% arial, sans-serif;}#header .links li a{text-decoration:none; color:#000066;}#header .links li a:hover, .links li a.on{color:#868686;}/*MISC*/h1, h2, h3, h4, h5, h6{text-transform:capitalize;letter-spacing:-1px;}h1{ font: bold 95% arial, sans-serif; color:#000066; padding: 5px 5px 5px 0;}h2{ font: bold 120% arial, sans-serif; color:#494949; padding: 5px;}h3{ font: bold 85% arial, sans-serif; color:#09405C ; padding: 5px;}h4{font: bold 82% arial, sans-serif; color:#1A4F75; padding: 5px;}h5{ font: bold 82% arial, sans-serif; color:#000066 ; padding: 5px; background: url(images/bgnavigation.jpg) repeat-x 0px 100%; margin: 0 5px 0 5px;border:solid 1px #cedbe3;}h6{font: bold 75% verdana, sans-serif; color:#000066 ;font-weight:bold;}p{color:#494949;}a{text-decoration:underline; color:#000066;}a:hover{color:Gray;}.tabs ul, .tabs ul li {display:inline; margin-right:15px; padding-bottom:10px;}.tabs a{text-decoration:none;}.tabs a:active{font-weight:bold;}.node{padding-top:10px;}.clear{clear:both;}/*LHS*/#left-sidebar{width:195px; background-color:#e2eff7; min-height:300px; height:auto !important; height:300px;float:left; border-top: 1px solid #cedbe3; border-right:1px solid #cedbe3;}.left-block{border-right: 1px solid #cedbe3;}li.leaf {border-bottom: 1px solid #cedbe3; list-style-type:none; letter-spacing:-1px; font: normal 0.8em verdana, sans-serif;}.leaf a {background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.leaf a:hover {background: #e2eff7;color: #553;}ul.menu ul.menu li.leaf a{font-size:1em; }ul.menu ul.menu ul.menu li.leaf a{font-size:0.85em; text-indent:25px;}li.expanded{border-bottom: 1px solid #cedbe3; list-style-type:none; letter-spacing:-1px; font: verdana, sans-serif;}li.expanded a{background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;font-size:0.8em; color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.expanded a:hover {background: #e2eff7;color: #553;}li.collapsed{border-bottom: 1px solid #cedbe3; list-style-type:none; letter-spacing:-1px; font: verdana, sans-serif;}li.collapsed a{background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.collapsed a:hover {background: #e2eff7;color: #553;}ul.menu ul.menu li.collapsed a{font-size:0.8em;}ul.menu li.expanded a.active{font-size:0.8em; font-weight:bold;}ul.menu li.collapsed a{font-size:0.8em;}/*MAIN*/.title{background: url(images/block_title_bg.gif) no-repeat; height:29px; letter-spacing:-1px; font: bold 85% arial, sans-serif; color:#000066; text-align:center; padding:5px 0 0 0; margin:0;}#content{letter-spacing:-1px; font: normal 73% verdana, sans-serif; color:#494949; line-height:140%;width:572px; margin-left: 7px;min-height:510px; height:auto !important; height:510px;float:left; background-color:#f6f6f6; padding: 0 10px 20px 10px;}#content p{line-height:150%; padding:5px;}#content h2.title{background:none; text-align:left; font-size:120%;}#content h1{font-size:120%;}#content h3{background:none; text-align:left; font-size:117%;margin-left:0; padding-left:0;}#content h4{background:none; text-align:left; font-size:110%;}#content h5{background:none; text-align:left; font-size:110%;}#content h6{background:none; text-align:left; font-size:110%;}#content div.tabs{margin-left:5px;}/*GALLERY*/ul.galleries{margin:0; padding:0; }ul.galleries li.clear-block{background:#e7e7e7; border: 1 px solid gray; list-style-type:none; margin: 5px 0 5px 0; width:99%; padding-bottom:5px;}ul.galleries li.clear-block h3 a{text-decoration:none;}ul.galleries li.clear-block img{display:block; margin:0; padding-bottom:0;}ul.galleries li.clear-block div.pic{float:left; width:90px; margin: 5px 0 0 5px;}ul.galleries li.clear-block div.pic img{border:none;}ul.galleries li.clear-block div.gallerydetail{float:left; text-align:left; width:250px; padding: 0 0 0 10px;}#content ul.galleries li.clear-block div.description{width:200px;}/*SUB GALLERY*/ul.images li{background:#e7e7e7; width:118px; margin-right:4px; margin-bottom:4px;padding:10px; float:left; min-height:175px; height:auto !important; height:175px; list-style-type:none; text-align:center; display:inline; }ul.images li img{border:none;}ul.images li b.imgbox a{text-decoration:none; text-transform:capitalize; text-align:center;}.imgbox{text-align:center; width:90px; display:block;}#content ul.links li{display:inline; list-style-type:none; margin-right:10px;}span.new{font-weight:bold;}#content ul.images li{vertical-align:bottom;}/*ADMIN*/#content p.description{margin-left:0; padding-left:0;}#content div.description{font-size:0.9em; color:#C00000; padding:3px 0; clear:both; }#content div.form-item div.description{font-size:1.1em; color:#c00000; padding:3px 0; clear:both; }#content div.compact-link{margin-left:5px;}#content dl.admin-list{background:#e7e7e7; padding:5px 15px;}#content dt{font-weight:bold; padding-bottom:3px;}#content dd{font-weight:normal; padding-bottom:10px;}#content ul.tips li{list-style:none;}#content div.item-list{padding:5px 0 5px 0;}#content div.item-list ul li{font: 9pt verdana, sans-serif; list-style-type:disc; margin:5px 0 5px 25px;}#content div.item-list ul li a{text-decoration:none; }#content div.box{margin: 5px 0;}#content div.help{padding-top: 10px;}#content div.messages {padding: 10px 0;}#content div.messages li{margin-left:20px; padding-bottom:3px;}/*READMORE*/#content li.node_read_more{text-align:right; list-style:none;letter-spacing:-1px; font: normal 115% verdana, sans-serif; color:#000066;}#content li.node_read_more a{text-decoration:none;}#content ul.menu{margin-left:25px;}#content li.leaf{border:none; list-style-type:disc; font-size:1em;}#content li.leaf a{background:none;}/*RECENT*/div.node h2.title{background:none; text-align:left;} div#block-views-tracker div.item-list li{background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; height:auto; padding:5px; border-bottom: 1px solid #cedbe3; font-size:0.75em;} div.view-label{font-weight:bold; width:30%; display: -moz-inline-stack; /*firefox*/display:inline-block; vertical-align:top;}* html div.view-label{display:inline;}* + html div.view-label{display:inline;}div.view-field{ width:69%; display: -moz-inline-stack; /*firefox*/display:inline-block;}* html div.view-field{display:inline;}* + html div.view-field{display:inline;}/*MAIN:FORMS*/#content .form-item input, #content .form-item textarea {font:normal 9pt Verdana, Sans-Serif; }#content .form-item select, #content .form-item textarea {width:90%; }#content .form-item input.form-text{width:90%; color:#000066;}#content .form-item textarea{ width:90%; font:normal 9pt Verdana, Sans-Serif; color: #000066;}#content div.form-item label{font:normal 9pt Verdana, Sans-Serif;display:block; clear:both; color:#000066; font-weight:bold;}#content div.form-item label.option{font:normal 9pt Verdana, Sans-Serif; }div.form-radios{display:block;}#content div.picture{margin:5px;}#content div.form-item select.form-select{font:normal 9pt Verdana, Sans-Serif;}#content div.form-item input.form-file{border: 1px solid ccc;}#content input.form-submit{margin-top:10px;}input.form-submit{border: 1px solid #000066; background-color:White; color:#000066; min-height:20px; height:auto !important; height:20px; width:10em;}fieldset{margin: 10px 10px 20px 0; padding: 5px; width:95%;}#content fieldset.collapsible{display:block;}#content legend{font-weight:bold; color: #000066;}#content fieldset table{width:330px;}#content div.help ul{margin: 10px 0 5px 25px;}#content div.help li{margin:5px 0;}/*MAIN:TABLES*/#content table.package{width:100%;}#content table th{background-color:#000066; color:#ffffff; font-weight:200; text-align:center;padding:5px; text-transform:capitalize;}#content table th a{color:#ffffff; text-decoration:none;}#content table th img{border:none;}#content table tr{background-color:#e7e7e7; }#content table td{background-color:#e7e7e7;padding:5px; text-transform:capitalize;}#content table td.module{font-weight:bold; background-color:#cecece; text-transform:capitalize;}#content table td label{font-size:1em; width:100%; float:left; display:block;}#content table td label.option{text-align:center; margin:auto;}#content table div.form-item input.form-text{width:100px; letter-spacing:-1px; font:1.18em verdana, sans-serif; margin-top:10px;}#content table td div.form-item select.form-select{width:100px;}#content table td input.form-submit{height:auto; width:auto;}table#blocks td.region{background-color:#cecece; font-weight:bold;}table#blocks td div.form-item select.form-select{width:75px; letter-spacing:-1px; font:1.18em verdana, sans-serif; }/*PERMISSIONS*/#content table#permissions{width:100%;}#content table#permissions td.permission{vertical-align:top;}/*PAGING*/#content div.pager{margin-top:10px;}#content div.pager span.pager-list a, .pager-next, .pager-last, .pager-current {padding-left:5px; padding-right: 5px;}/*ADDRESS BOOK*/#content div.item-list ul{margin-left:0; padding-left:0;}#content div.item-list ul li{margin-bottom:20px; list-style-type:none; margin-left:0; padding-left:0;}#content div.item-list ul li div.view-item-contacts{margin-left:5px;}#content div.item-list ul li div.view-field{padding: 3px 0 2px 10px;}.view-data-node-data-field-name-field-name-value{font-weight:bold;}#content .view-label{ padding-top:3px; padding-bottom:2px;width:20%;}#content .view-field{width:65%;}#content div.submitted{padding: 5px 0 5px 0;}#content div.field{width:100%; }#content div.field-label{font-weight:bold;width:25%; float:left; padding-bottom:3px;}#content div.field-item{width:65%; float:left; padding-bottom:3px;}/*NOTICEBOARD*/#content ul.classified-ad-list li{list-style-type:none; margin-bottom:20px;}#content ul.classified-ad-list li h3, #content ul.classified-ad-list li div.classified-author, #content ul.classified-ad-list li div.classified-date{margin-left:5px; text-transform:capitalize;}div.classified-description p{margin-bottom:10px;}#content ul.classified-ad-list li div.classified-author{font-weight:bold;}#content ul.classified-ad-list li div.classified-author a{font-weight:normal;}/*POPUP CALENDAR*/div.calendar { position: relative; }.calendar, .calendar table {border: 1px solid #206A9B;fon Link to comment Share on other sites More sharing options...
Ingolme Posted January 10, 2008 Share Posted January 10, 2008 It's very hard to look through all your code. I can't find the ".monthview" class or the div that contains the title you're speaking about.But it seems your problem is that you've given the div a fixed width. It's not going to take any word that goes out side it. If you want it to stretch you must use the CSS min-width property. This property doesn't work in Internet Explorer so you'll have to use conditional comments to make IE use the width property instead. Link to comment Share on other sites More sharing options...
elementalgrace Posted January 10, 2008 Author Share Posted January 10, 2008 I know - it's vast (and I just noticed that it seems to have cut the CSS off halfway through - argh!). Would it be easier if I just put the relevant bits down? Having checked in firebug, it doesn't seem to be an inherited problem so this might be easier.I must not have made it clear but it's the height that's the problem rather than the width. Weirder still is that the day view of the calendar, which uses all the same classes (but dayview instead of monthview) and is structured in exactly the same way does not have this problem with the content spilling out the bottom of the div. Link to comment Share on other sites More sharing options...
Synook Posted January 11, 2008 Share Posted January 11, 2008 What about a link to your site? Then we can also see the problem. Link to comment Share on other sites More sharing options...
elementalgrace Posted January 11, 2008 Author Share Posted January 11, 2008 What about a link to your site? Then we can also see the problem.It's password protected and hosted locally unfortunately. If it were simply on a test domain I would do. I'll post the more relavent bits of HTML and CSS to see if that helps - the beginning of the container box starts <div class="calendar monthview">. I have stripped out most of the CSS to start again but the problem seems to be there from the beginning <!--CONTENT--><div id="content"><h1>Meeting Room</h1><div class="tabs"><ul class="tabs primary"><li class="active"><a href="/drupal-5.3/?q=meetingroom" class="active">View</a></li><li><a href="/drupal-5.3/?q=meetingroom/edit">Edit</a></li><li><a href="/drupal-5.3/?q=meetingroom/clone">Clone</a></li><li><a href="/drupal-5.3/?q=meetingroom/export">Export</a></li><li><a href="/drupal-5.3/?q=meetingroom/setup" title="Calendar setup.">Setup</a></li><li><a href="/drupal-5.3/?q=meetingroom/ical" title="iCal setup.">iCal</a></li></ul></div><div class='view view-Meeting-Room'><div class='view-content view-content-Meeting-Room'><ul class="links"><li class="first 0"><a href="/drupal-5.3/?q=meetingroom/2008" class="0">Year</a></li><li class="1"><a href="/drupal-5.3/?q=meetingroom/2008/01" class="1">Month</a></li><li class="last 2"><a href="/drupal-5.3/?q=meetingroom/2008/01/9" class="2">Day</a></li></ul><div class="calendar-calendar"><table> <thead><tr><th class="prev"><span class="prev"><a href="/drupal-5.3/?q=meetingroom/2007/12/all">« prev</a></span></th><th class="heading" colspan="5">January 2008</th><th class="next"><span class="next"><a href="/drupal-5.3/?q=meetingroom/2008/2/all">next »</a></span></th> </tr></thead><tbody></tbody></table></div><div class="calendar-calendar"><div class="month-view"><table><tbody> <tr class="odd"><td class="days mon">Mon</td><td class="days tue">Tue</td><td class="days wed">Wed</td><td class="days thu">Thu</td><td class="days fri">Fri</td><td class="days sat">Sat</td><td class="days sun">Sun</td> </tr> <tr class="even"><td><div class="calendar-empty"> </div></td><td class="jan tue" id="jan1"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/1">1</a></div></div></td><td class="jan wed" id="jan2"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/2">2</a></div></div></td><td class="jan thu" id="jan3"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/3">3</a></div></div></td><td class="jan fri" id="jan4"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/4">4</a></div></div></td><td class="jan sat" id="jan5"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/5">5</a></div></div></td><td class="jan sun" id="jan6"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/6">6</a></div></div></td> </tr> <tr class="odd"><td class="jan mon" id="jan7"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/7">7</a></div></div></td><td class="jan tue" id="jan8"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/8">8</a></div></div></td><td class="jan wed today" id="jan9"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/9">9</a></div></div></td><td class="jan thu" id="jan10"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/10">10</a></div><div class="calendar monthview"><div class="stripe-1" title="Key: 1"><span class="stripe">Key 1</span></div><div class="title"><a href="/drupal-5.3/?q=node/69" title="view this item">test meeting room request test meeting room request test meeting room request</a></div><div class="times"><span class="start">14:15</span><span class="end"> - 17:15</span></div><div class="links"></div></div></div></td><td class="jan fri" id="jan11"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/11">11</a></div></div></td><td class="jan sat" id="jan12"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/12">12</a></div></div></td><td class="jan sun" id="jan13"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/13">13</a></div></div></td> </tr> <tr class="even"><td class="jan mon" id="jan14"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/14">14</a></div></div></td><td class="jan tue" id="jan15"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/15">15</a></div></div></td><td class="jan wed" id="jan16"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/16">16</a></div></div></td><td class="jan thu" id="jan17"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/17">17</a></div></div></td><td class="jan fri" id="jan18"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/18">18</a></div></div></td><td class="jan sat" id="jan19"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/19">19</a></div></div></td><td class="jan sun" id="jan20"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/20">20</a></div></div></td> </tr> <tr class="odd"><td class="jan mon" id="jan21"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/21">21</a></div></div></td><td class="jan tue" id="jan22"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/22">22</a></div></div></td><td class="jan wed" id="jan23"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/23">23</a></div></div></td><td class="jan thu" id="jan24"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/24">24</a></div></div></td><td class="jan fri" id="jan25"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/25">25</a></div></div></td><td class="jan sat" id="jan26"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/26">26</a></div></div></td><td class="jan sun" id="jan27"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/27">27</a></div></div></td> </tr> <tr class="even"><td class="jan mon" id="jan28"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/28">28</a></div></div></td><td class="jan tue" id="jan29"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/29">29</a></div></div></td><td class="jan wed" id="jan30"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/30">30</a></div></div></td><td class="jan thu" id="jan31"><div class="inner"><div class="day"><a href="/drupal-5.3/?q=meetingroom/2008/01/31">31</a></div></div></td><td><div class="calendar-empty"> </div></td><td><div class="calendar-empty"> </div></td><td><div class="calendar-empty"> </div></td> </tr></tbody></table></div></div></div></div> </div><!--END CONTENT--> /*CALENDAR*/#content div.calendar-calendar{margin-top:10px;}#content div.calendar-calendar table{width:560px;}#content div.calendar-calendar table td{width:80px; vertical-align:top;} Link to comment Share on other sites More sharing options...
elementalgrace Posted January 11, 2008 Author Share Posted January 11, 2008 I dicovered that by adding height:auto to the div.title, it set the div to stretch to the height of the content and the event div to sretch to fit that div. Obviously I had been adding height:auto to the wrong div. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.