1 reply [Last post]
noelgreen
noelgreen's picture
Offline
newbie
Springfield
Last seen: 12 years 15 weeks ago
Springfield
Joined: 2004-01-22
Posts: 8
Points: 0

For my first post...

If you all wouldn't mind looking at this site and telling me if it all looks okay in your browsers, that would be great! Comments welcome... it's the first site I've done with 100% CSS. Smile

Now my question!!

I'm working on a website for our arts council and am having problems getting the calendar to "fit" in the iframe box on IE, but only on PCs. On my Mac, and every browser there in, it looks fine.

Here's the code for the calendar page. (I use MoveableType for my backend admin stuff.)

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />

<div class="calendarsidebox">
<div align="center" class="calendar">

<table border="0" width="187" cellspacing="2" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogArchiveURL>/cal/<MTArchiveDate format="%Y_%m">.php"><img src="../images/arrow.previous.gif" border="0"  align="middle"></a>
</MTArchivePrevious>
<$MTArchiveDate format="%B"$>
<MTArchiveNext><a href="<MTBlogArchiveURL>/cal/<MTArchiveDate format="%Y_%m">.php"><img src="../images/arrow.next.gif" border="0" align="middle"></a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday" align="center"><span class="calendar">Sun</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mon</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">Wed</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Thu</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fri</span></th>
<th abbr="Saturday" align="center"><span class="calendar">Sat</span></th>
</tr>

<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td align="center"><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1">
<a href="<$MTArchiveURL$><$MTEntryDate format="%Y_%m_%d"$>.php" target="content"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank>
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
</table>
</div>
</div>

And here's my style sheet... hope this isn't too much to post. :?:

body {
        margin:0px 0px 0px 0px;
        background:#FFFFCD;
        background-image:url(images/content.bg.jpg)
    
        }
    A             { color: #6699CC; text-decoration: none;} 
    A:link        { color: #6699CC; text-decoration: none; } 
    A:visited    { color: #6699CC; text-decoration: none; } 
    A:active    { color: #99FF66;  } 
    A:hover        { color: #99FF66;  }

    h1, h2, h3 {
        margin: 0px;
        padding: 0px;
    }

    #banner {
        font-family:verdana, arial, sans-serif;
        color:#CC9933;
        font-size:x-large;
        font-weight:bold;
          padding-left:0px;                     
        }
        
    #banner a,
        #banner a:link,
        #banner a:visited,
        #banner a:active,
        #banner a:hover {
        font-family:verdana, arial, sans-serif;
        font-size: x-large;
        color: #CC9933;
        text-decoration: none;
        }

    .description {
        font-family:verdana, arial, sans-serif;
        color:#CCC;
        font-size:x-small;
        font-weight:bold;
          text-transform:none;    
        letter-spacing: none;         
        }    
                
    #content {
        float:right;
        width:490px;
        }

    #links {
        float:left;
        width:190px;
        }
        
    .blog {
          padding-left:0px;
          padding-top:0px;
          padding-right:25px;    
            
        }    
    
    .blogbody {
        font-family:verdana, arial, sans-serif;
        color:#333;
        font-size:small;
        font-weight:normal;
          line-height:140%;        
          padding:0px;
        }

    .blogbody a,
    .blogbody a:link,
    .blogbody a:visited,
    .blogbody a:active,
    .blogbody a:hover {
        font-weight: normal;
        text-decoration: underline;
    }
    
    .title    { 
        font-family:verdana, arial, sans-serif; 
        font-size:normal; 
        color: #333;
          border-bottom:1px solid #666;                            
        text-transform: uppercase;
        font-style:italic;
        padding-top:12px;
        font-weight:bold;    
        }            
        
    #menu {
          font-size:small;
        font-weight:bold; 
        text-align:center;                             
        }    
    #menu a             { color: #6699CC; } 
    #menu a:link        { color: #6699CC; } 
    #menu a:visited    { color: #6699CC; } 
    #menu a:active    { color: #330099; } 
    #menu a:hover        { color: #330099; }

        
    .date    { 
        font-family:verdana, arial, sans-serif;
        color:#FFF;
        background:#330099;
        font-size:small;
        font-weight:bold;
          line-height:140%;
          padding-top:2px;
          padding-left:8px;                
          padding-bottom:2px;                
        }            
        
    .posted    { 
        font-family:verdana, arial, sans-serif; 
        font-size: x-small; 
        color: #999; 
        }
        
    .sidephoto {
        text-align:center;
        padding-top:2px;
        padding-bottom:2px;
        }
        

    .sidebox {
        background:#99CCFF;
         border-left:2px solid #000;            
          border-right:2px solid #000;
          border-bottom:2px solid #000;                            
         border-top:2px solid #000;            
        }
        
    .sideboxhot {
        background:#E7E138;
         border-left:2px solid #000;            
          border-right:2px solid #000;
          border-bottom:2px solid #000;                            
         border-top:2px solid #000;            
        }
        
    .calendar {
        font-family:verdana, arial, sans-serif;
        color:#003366;
        font-size:12px;
        font-weight:normal;
          padding-bottom:5px;    
          padding-top:5px;                
        }
    .calendar a             { color: #000; background:#D5FE9E; } 
    .calendar a:link        { color: #000; background:#D5FE9E; } 
    .calendar a:visited        { color: #000; background:#D5FE9E; } 
    .calendar a:active        { color: #000; background:#FFCC33; } 
    .calendar a:hover        { color: #000; background:#FFCC33; }

    
    .calendarhead {    
        font-family:verdana, arial, sans-serif;
        color:#FFF;
        background:#330099;
        font-size:small;
        font-weight:bold;
          line-height:140%;                
        }    
        
    .calendarlist {
        font-family:verdana, arial, sans-serif;
        color:#003366;
        font-size:x-small;
        font-weight:bold;
        text-transform:uppercase;
        margin-left:10px;
        line-height:160%;
          padding-bottom:5px;    
          padding-top:5px;                
        }
    .calendarlist a             { color: #336699; } 
    .calendarlist a:link        { color: #336699; } 
    .calendarlist a:visited    { color: #336699; } 
    .calendarlist a:active    { color: #336699; background:#D5FE9E; } 
    .calendarlist a:hover        { color: #336699; background:#D5FE9E; }


    .calendarsidebox {
        background:#99CCFF;
         }

    .calendarlisthead {    
        font-family:verdana, arial, sans-serif;
        color:#FFF;
        background:#330099;
        font-size:small;
        font-weight:bold;
          line-height:140%;
          margin-top:5px;
          text-align:center;                
        }    

    .linkstab {
        margin-left:20px;
        text-transform:none;
        }

    .linkssidebox {
        background:#99CCFF;
         border-left:2px solid #000;            
          border-right:2px solid #000;
          border-bottom:2px solid #000;                            
         border-top:2px solid #000;            
        }

    .linkslisthead {    
        font-family:verdana, arial, sans-serif;
        color:#FFF;
        background:#330099;
        font-size:small;
        font-weight:bold;
          line-height:140%;
          margin-top:5px;
          text-align:center;                
        }    

    .whatshot {    
        font-family:verdana, arial, sans-serif;
        color:#FFF;
        background:#E73838;
        font-size:small;
        font-weight:bold;
          line-height:140%;
          margin-top:5px;
          text-align:center;                
        }    

    .side {
        font-family:verdana, arial, sans-serif;
        color:#333;
        font-size:x-small;
        font-weight:normal;
          line-height:140%;                
        }    
        
    .sidetitle {
        font-family:verdana, arial, sans-serif;
        color:#333;
        font-size:x-small;
        font-weight:bold;
          line-height:140%;
          padding:0px;
          border-bottom:1px dotted #666;
          text-transform:uppercase;
        letter-spacing: .2em;                      
        }        
        
    .search {
        font-family:verdana, arial, sans-serif;
        color:#333;
        font-size:x-small;
        text-align:center;
        font-weight:normal;
          line-height:140%;                
        }    

    
    .syndicate {
        font-family:verdana, arial, sans-serif;
        font-size:xx-small;
        font-weight:bold;        
          line-height:140%;
          padding-left:0px;
          text-align:left;        
         }    
        
    .powered {
        font-family:verdana, arial, sans-serif;
        color:#999;
        font-size:xx-small;
        font-weight:bold;
        line-height:140%;
        text-transform:uppercase; 
        padding-left:5px;
        text-align:left;
        letter-spacing: .2em                     
        }    
        
    
    .comments-body {
        font-family:verdana, arial, sans-serif;
        color:#666;
        font-size:small;
        font-weight:normal;
          background:#FFF;
          line-height:140%;
          padding-bottom:10px;            
        }        

    .comments-post {
        font-family:verdana, arial, sans-serif;
        color:#999;
        font-size:x-small;
        font-weight:normal;
          background:#FFF;    
        }    
        
    .comments-head    { 
        font-family:verdana, arial, sans-serif; 
        font-size: small; 
        color: #999; 
        font-weight:bold;
        text-transform:uppercase;
        border-bottom:1px dotted #666;        
        }        

     .trackback-body {
        font-family:verdana, arial, sans-serif;
        color:#333;
        font-size:small;
        font-weight:normal;
          line-height:140%;    
          padding-top:15px;                
        }        

    .trackback-url {
        font-family:verdana, arial, sans-serif;
        color:#666;
        font-size:small;
        font-weight:normal;
          line-height:140%;    
          padding:5px;
          border:1px dashed #666;                 
        }

    .trackback-post {
        font-family:verdana, arial, sans-serif;
        color:#999;
        font-size:x-small;
        font-weight:normal;
          }    

    #banner-commentspop {
        font-family:verdana, arial, sans-serif;
        color:#CC9933;
        font-size:large;
        font-weight:bold;
          padding-left:15px; 
        }

    .copyright {
        font-family:verdana, arial, sans-serif;
        color:#99CCFF;
        background-image:url(images/black.bg.jpg);
        font-size:xx-small;
        font-weight:normal;    
          padding-bottom:0px;
        }

    .copyright a,
    .copyright a:link,
    .copyright a:visited,
    .copyright a:active,
    .copyright a:hover {
        font-weight: normal;
        text-decoration: none;
    }

    

Any help would be appreciated!

Thanks!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 3 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

iframe Calendar not aligning correctly

Without deciphering the code, it looks like you have a fixed size box around the calender and therefore you may miss out on end days (like in May) or the background does not stretch far enough.

Can the box be flexible, and if not make it bigger and give it a background of the same colour as your calendar.

Regards
Day

The only way to learn is to do it yourself