6 replies [Last post]
JessicaM
Offline
Regular
Last seen: 18 years 11 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Hi there. I am working hard perfecting my blog located here:

http://www.jessicamartin.org/blog

All is working well EXCEPT you will notice that when you resize your browser, all the items shift accordingly except for the May 2004 Calendar on the left side of the screen.

I had issues with this aspect of my page before, but what I did before to fix it (take out the 'postition: relative;' tag) is not working.

To isolate the code in question, it is located below:

<div class="calendar">
<MTEntries lastn="1">
<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead"><$MTEntryDate format="%B %Y"$></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="<$MTEntryPermalink$>"><$MTCalendarDay$></a> 
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
 <$MTCalendarDay$>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span>
</td>
<MTCalendarWeekFooter>
 </tr>
</MTCalendarWeekFooter>
</MTCalendar>
</table>
</MTEntries>
</div>

Here is the code for the stylesheet I am using for this page:

body {
         margin:0px 0px 0px 0px;
         background: #ffffff;		
         }

A { color: #000000; text-decoration: none; }
    A:link { color: #336600; text-decoration: none; }
    A:visited { color: #336600; text-decoration: none; }
    A:hover { color: #33ff66;  }
    A:active { color: #33ff66;  }
	

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

#banner {
              font-family:arial, sans-serif;
              color:#666633;
              font-size:x-large;
              font-weight:normal;	
              padding:0px;
              border-top:4px double #ffffff;
              text-align:center;
              }

#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
	          font-family: arial, sans-serif;
                          font-size: xx-large;
	          color: #ffffff;
	          text-decoration: none;
                          text-align:center;
	          }

.description {
	  font-family:arial, sans-serif;
	  color:#666633;
	  font-size:small;
  	  text-transform:none;	
	  }
				
#content {
              position:relative;
              background:#cccc99;
              width:440px;
              }

#container {
              position:relative;
              background:#ff0000;
              border:15px;
              font-family:Arial, sans-serif;
              font-size:12px;
              margin-left:0px;
              margin-right:25px;
              padding:0px;
              width:440px
              }

#footer {
            position: relative;
            font-family:arial, sans-serif;
            font-size: 14px;
            background:#ffffff;
            text-align:center;
            padding:2px;
            }

#master {
              position: relative;
              top:0px;
              left:0px;
              width:100%;
              text-align:center /*IE5 hack*/
              }

#links {	
          font-family:Arial, sans-serif;
           font-size:12px;
           padding:10px;
           margin-left:25px; 
          }
		
.blog {
         padding:0px;
         position:relative;
         }

.blogbody a, .blogbody a:link, .blogbody a:visited, .blogbody a:active, .blogbody a:hover {text-decoration:underline;}

.blogbody {
                font-family:arial, sans-serif;
	color:#000000;
                font-size:12px;
                text-align: justify;
	font-weight:normal;
  	background:#cccc99;
  	margin-top: 1em;
                margin-bottom: 1em;
                line-height: 16px;
                padding-left: 5px;
                padding-top: 5px;
                padding-bottom: 5px;
                padding-right: 5px;
                }

.title {
        font-family: arial, sans-serif;
        font-size: 15px;
        color: #000000;
        padding-top: 0px;
        text-align:center;
        margin-top: 0em;
        margin-bottom: 0em;
        }			

#menu {
            position: relative;
            margin-bottom: 0px;
            background:#ffffff; 
            }		

.date{  
        font-family:arial, sans-serif;
        color: #000000;
        font-size: 14px; 
        border-bottom:0px; 
        margin-bottom:0px;
        margin-right:5px; 
        font-weight:normal;
        text-align:right;
        }			
		
.posted	{ 
	font-family:arial, sans-serif;
	font-size: x-small; 
	color: #cccc99; 
	margin-bottom:0px;
	}
		
.calendar a, .calendar a:link, .calendar a:visited, .calendar a:active, .calendar  a:hover {text-decoration:underline;}
		
.calendar {
              font-family:arial, sans-serif;
               color:#000000;
               font-size:x-small;
               font-weight:normal;
               background:#ffffff;	
               line-height:140%;
               padding:2px;
               text-align:center;
              }
	
.calendarhead {	
       font-family:arial, sans-serif;		
                      color:#000000;
                      font-size:small;
	      font-weight:normal;
  	      padding:1px;
	      letter-spacing: .3em;
  	      background:#ffffff;
  	      text-transform:uppercase;
	      text-align:center;			
	      }	

.link1
{
font-family: Arial, sans-serif;
font-size: 12px;
text-align: center;
margin-top: 0em;
margin-bottom: 0em;
}

.link1 A:link { text-decoration: none; color: #336600;} 
.link1 A:visited { text-decoration: none; color: #336600;} 
.link1 A:hover { text-decoration: none; color: #00ff00;} 
.link1 A:active { text-decoration: none; color: #00ff00;} 
	
.side {
        color:#000000;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight:normal;
        background:#ffffff;	
        line-height:140%;
        padding:0px;
        text-align: center;				
        }

.side A:link { text-decoration: none; color: #336600;} 
.side A:visited { text-decoration: none; color: #336600;} 
.side A:hover { text-decoration: none; color: #00ff00;} 
.side A:active { text-decoration: none; color: #00ff00;} 

.sidetitle {
		font-family:Arial, sans-serif;
		color:#000000;
		font-size:10;
		font-weight:normal;
  		padding:2px;
  		letter-spacing: .3em;
              margin-top: 2em;
  		text-transform:uppercase;
              text-align: center;		
		}	

.sidetitle A:link { text-decoration: none; color: #336600;} 
.sidetitle A:visited { text-decoration: none; color: #336600;} 
.sidetitle A:hover { text-decoration: none; color: #00ff00;} 
.sidetitle A:active { text-decoration: none; color: #00ff00;}	
	
	.syndicate {
		font-family:arial, sans-serif;
		font-size:xx-small;		
  		line-height:140%;
  		padding:2px;
  		margin-top:15px;
  		background:#000000;  		
 		}	
		
	.powered {
		font-family:arial, sans-serif;
		color:#000000;
		font-size:11px;		
		line-height:140%;
		                }	
		
	
	.comments-body {
		font-family:palatino, georgia, verdana, arial, sans-serif;
		color:#666;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
 		padding-bottom:10px;
  		padding-top:10px;		
 		border-bottom:1px dotted #999; 					
		}		

	.comments-post {
		font-family:verdana, arial, sans-serif;
		color:#666;
		font-size:x-small;
		font-weight:normal;
  		background:#FFF;		
		}	
			
	
	.trackback-url {
		font-family:palatino, georgia, verdana, arial, sans-serif;
		color:#666;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
 		padding:5px;		
 		border:1px dotted #999; 					
		}


	.trackback-body {
		font-family:palatino, georgia, verdana, arial, sans-serif;
		color:#666;
		font-size:small;
		font-weight:normal;
  		background:#FFF;
  		line-height:140%;
 		padding-bottom:10px;
  		padding-top:10px;		
 		border-bottom:1px dotted #999; 					
		}		

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

		
	.comments-head	{ 
		font-family:palatino, georgia, verdana, arial, sans-serif; 
		font-size:small; 
		color: #666; 
		border-bottom:1px solid #999;
		margin-top:20px;
		font-weight:bold;
  		background:#FFF;		
		}		

	#banner-commentspop {
		font-family:palatino, georgia, verdana, arial, sans-serif;
		color:#FFF;
		font-size:large;
		font-weight:bold;
		border-left:1px solid #FFF;	
		border-right:1px solid #FFF;  		
		border-top:1px solid #FFF;  		
  		background:#003366;
  		padding-left:15px;
  		padding-right:15px;
  		padding-top:5px;
  		padding-bottom:5px;  		  		  			 
		}

In case you want to see how this < div > tag fits in with the rest of the page, my index code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta name="keywords" content="weblog, weblogs, Jessica Martin">
<meta name="distribution" content="Global">
<meta name="robots" content="All">
<meta name="rating" content="General">

<title><$MTBlogName$></title>

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />

<script language="javascript" type="text/javascript">
function OpenComments (c) {
    window.open(c,
                    'comments',
                    'width=480,height=480,scrollbars=yes,status=yes');
}

function OpenTrackback (c) {
    window.open(c,
                    'trackback',
                    'width=480,height=480,scrollbars=yes,status=yes');
}
</script>

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>

<body>	

<table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFff">
<tr> 
<td valign="middle" height="5" bgcolor="#999966" colspan="5">
<table width="100%" cellpadding="2" border="0">
<tr>
<td>
<p class="link1">
<a href="http://www.jessicamartin.org/radio.html">radio</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/essays.html">essays</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/reviews.html">reviews</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org:16080/blog">journal</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/about.html">about</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/booklist.html">booklist</a> <font color="#663300">|</font>
<a href="http://www.jessicamartin.org/links.html">community</a> <font color="#663300">|</font> 
<a href="mailto:[email protected]"> contact</a></p>
</td></tr>
</table>
</td></tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><center><br>
<img src="http://www.jessicamartin.org/images/journal.gif" width="125" height="49" border="0" alt="<$MTBlogName$>">
</center><br></td></tr>

<tr>
<td valign="top">

<div class="calendar">
<MTEntries lastn="1">
<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead"><$MTEntryDate format="%B %Y"$></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="<$MTEntryPermalink$>"><$MTCalendarDay$></a> 
</MTEntries>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
 <$MTCalendarDay$>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank> </MTCalendarIfBlank>
</span>
</td>
<MTCalendarWeekFooter>
 </tr>
</MTCalendarWeekFooter>
</MTCalendar>
</table>
</MTEntries>
</div>

<div class="sidetitle">Archives</div> 
 <div class="side"> 
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br /> 
</MTArchiveList>
 </div> 
 </div> 

</td>

<td valign="top">
<div align="center"> 
<table width"70%" align="center" BORDER="2" BORDERCOLOR="#666633" cellpadding="15" CELLSPACING="0" 
	  BORDERCOLORDARK="#666633" BORDERCOLORLIGHT="#666633"> 
          <tr>
       <td bgcolor="cccc99" width="440" valign="top">


<div id="content">
<div class="blog">
<MTEntries lastn="1">
<$MTEntryTrackbackData$>


<MTDateHeader>
	<h2 class="date">
	<$MTEntryDate format="%x"$>
	</h2>
	</MTDateHeader><div class="blogbody">
	<a name="<$MTEntryID pad="1"$>"></a>
	<h3 class="title"><$MTEntryTitle$></h3>
	<$MTEntryBody$>
	<MTEntryIfExtended>
	<span class="extended"><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>"</a></span><br />
	</MTEntryIfExtended>
	
	</div>
</MTEntries>
</div>
</div>


</td></tr>
        </table>


</td></tr>

<tr><td colspan="2" bg color="#ffffff">
<br clear="all" />

<div id="footer"><$MTInclude module="footer"$></div>

</td></tr></table>

</body>
</html>

Thanks for taking the time to read this and thanks in advance for any help you can offer Laughing out loud

*I should note that when I tested at work on a PC (on Exlporer) all looked fine on the page. It is when I got home on my Mac and looked at it on both Safari and Explorer browsers, that's where the code renders wonky. I definately want my page to be cross-browser, cross-platform (then again dont we all Wink)*

-JessicaM

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 12 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Left Nav Floating Div Not Behaving

From what I can gather from the code, and your explanation, you want the calendar to adjust to the browser as the lower-archive box does?

If so, then add this bit of CSS to your CSS file:

.calendar table
{
margin: 0 auto;
}

The next sentence is true. The previous sentence is false. Discuss...

JessicaM
Offline
Regular
Last seen: 18 years 11 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Thank you!

CO2, thank you! That is exactly the behavior I am looking for....

The inserted code works great on some browsers and not so great on others. The details:

It looks GREAT and works perfectly on Explorer on the PC. (I am not sure about Netscape on the PC because my work firewall will not let me download it Sad ) Yet on the MAC things become strange. The behaviors: It works great on Safari on the MAC but both Explorer and Netscape on the MAC exhibit the following behaviors: on Explorer, everything shifts but the calendar remains stagnant. On Netscape, everything shifts on the page (including the calendar dates), EXCEPT the calendar month (the calendarhead tag).

I am wondering the best way to troubleshoot this. Pasted below is the calendar code in question:

.calendar a, .calendar a:link, .calendar a:visited, .calendar a:active, .calendar  a:hover {text-decoration:underline;}
		
.calendar 
{
font-family:arial, sans-serif;
color:#000000;
font-size:x-small;
font-weight:normal;
background:#ffffff;	
line-height:140%;
padding:2px;
text-align:center;
}
	
.calendarhead 
{	
font-family:arial, sans-serif;		
color:#000000;
font-size:small;
font-weight:normal;
padding:1px;
letter-spacing: .3em;
background:#ffffff;
text-transform:uppercase;
text-align:center;			
}

.calendar table 
{ 
margin: 0 auto; 
}	

I will look through my CSS book in the meantime to try to figure this out.

Thanks again for your (very helpful!) two cents Laughing out loud

-JessicaM

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Left Nav Floating Div Not Behaving

Hi

One bug with some vesions of IE Mac is they don't understand

margin: 0 auto;

but they DO understand:

margin-left:auto;
margin-right:auto;

Just my 2 cents.

Trevor

JessicaM
Offline
Regular
Last seen: 18 years 11 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Left Nav Floating Div Not Behaving

Thanks Trevor! Laughing out loud

I just implemented the above code and it works fine here on my PC at work. When I get home tonight I will check it on the MAC. Do you think this fix will work for Netscape on the MAC as well?

-Jessica

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 35 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Left Nav Floating Div Not Behaving

Hi

Says he, looking heavenward, all I can see is the sunset. (=== I've no idea!)

Trevor Laughing out loud

JessicaM
Offline
Regular
Last seen: 18 years 11 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Left Nav Floating Div Not Behaving

Trevor,

Just wanted to let you know that the fix you posted works PERFECTLY on Explorer and Safari on the Mac as well as on Explorer on the PC. Alas, it still does not work in Netscape for the MAC, though. Is there a comphrehensive site out there which shows which tags are validated/recognized by each browser and platform? Curious...

-Jessica