Okay, I’ve got one more problem with my layout and then I think I’ve got everything all set—thanks for all the help so far with image alignment.

I recently changed the css layout for my site.  In the old layout (example here), the mini calendar was just the right size and fit in the left-hand menu bar just perfectly.  In the new layout (example here - scroll down a little), the font size appears to have jumped from 8 pt to 12 pt or so, and the calendar stretches out beyond the border of the left menu.  I’ve checked everything I could think to check—all the font styles in the new CSS, I’ve even tried creating a new css declaration called “.table” that specifies a smaller font.

I’m not a designer or a developer, really all I am good at is cutting and pasting!  It’s hard for me to see where the coding is messed up.  I did a “view source” for both pages and compared the codes for both tables as best as I could—both specify “font size=“1” which is the right size.  Any idea where I’m going wrong?

Thanks in advance!

Hi…

open your newcss2.css

and paste the next code to the bottom of it…..

/* THE FOLLOWING ARE FOR USE WITH THE MINI-CALENDAR */

/*  Calendar header text */
.header {
font-family: verdana,trebuchet,sans-serif;
font-size:  10px;
color:    #ffffff;
font-weight: bold;
}

/*  Navigational links in the header */
.navlinks, .navlinks a:link, .navlinks a:active, .navlinks a:visited, .navlinks a:hover{
color:    #ffffff;
font-family: verdana,trebuchet,sans-serif;
font-size:  10px;
font-weight: bold;
}
.navlinks a:link   { color:  #ffffff; text-decoration: none;}
.navlinks a:visited { color:  #ffffff; text-decoration: none;}
.navlinks a:active { color:  #333333; text-decoration: none;}
.navlinks a:hover   { color:  #000000; text-decoration: underline;}

/*  Days of the week text */
.weekdays {
font-family: verdana,trebuchet,sans-serif;
font-size:  9px;
color:    #666666;
font-weight:  bold;
}

/*  Days of the month text and links */
.monthdays, .monthdays a:link, .monthdays a:active, .monthdays a:visited, .monthdays a:

hover {
font-family: verdana,trebuchet,sans-serif;
font-size:  9px;
color:    #666666;
}
.monthdays a:link   { color:  #0000b0; text-decoration: underline;font-weight: bold;}
.monthdays a:visited { color:  #0000b0; text-decoration: underline;font-weight: bold;}
.monthdays a:active { color:  #333333; text-decoration: underline;font-weight: bold;}
.monthdays a:hover   { color:  #cccccc; text-decoration: none;font-weight: bold;}
.thumbnail3 { border: 1px solid #000; float: left; margin: 3px; padding: 3px; ; font-

family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal}
.thumbnail2 { border: 1px #993300 solid; float: left; margin: 3px; padding: 3px; ; font

-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal ; background

-color: #F6E9D9; font-weight: normal; font-variant: normal; text-transform: none; color:

#990000}
.thumbnail4 { border: 1px #993300 solid; float: left; margin: 3px; padding: 3px; ; font

-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal ; background

-color: #F6E9D9; font-weight: normal; font-variant: normal; text-transform: none; color:

#990000}
.thumbnail5 { border: 1px #993300 solid; float: left; margin: 3px; padding: 3px; width:

100px; ; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal

; background-color: #F6E9D9; font-weight: normal; font-variant: normal; text-transform:

none; color: #990000}

That’s your problem…

Thanks, Jostar—we’re getting there!  The letters are all smaller, but the numbers in the calendar still show up in the bigger size font (except the ones that are linked - those are okay).  Should I be putting a class tag in the “index.php” file somewhere?

Hi again.

this is a clear css that you can use.
———————————————————————
copy it and use it
———————————————————————>

BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 20px; FONT: 11px/17px verdana, arial, helvetica, sans-serif; COLOR: #333; PADDING-TOP: 0px; BACKGROUND-COLOR: white
}
H1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 900; FONT-SIZE: 24px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 15px; COLOR: #ccc; PADDING-TOP: 0px
}
H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 5px; FONT: bold 14px verdana, arial, helvetica, sans-serif; PADDING-TOP: 0px
}
P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 16px; FONT: 11px/14px verdana, arial, helvetica, sans-serif; PADDING-TOP: 0px
}
UNKNOWN {
MARGIN: 0px
}
UNKNOWN {
TEXT-INDENT: 30px
}
A {
FONT-WEIGHT: 600; FONT-SIZE: 11px; COLOR: #09c; FONT-FAMILY: verdana, arial, helvetica, sans-serif; TEXT-DECORATION: none
}
A:link {
COLOR: #09c
}
A:visited {
COLOR: #07a
}
A:hover {
BACKGROUND-COLOR: #eee
}
.right {
PADDING-RIGHT: 3px; MARGIN-TOP: 10px; PADDING-LEFT: 3px; FLOAT: right; PADDING-BOTTOM: 3px; MARGIN-LEFT: 10px; PADDING-TOP: 3px; POSITION: relative
}
.left {
PADDING-RIGHT: 3px; MARGIN-TOP: 10px; PADDING-LEFT: 3px; FLOAT: left; PADDING-BOTTOM: 3px; MARGIN-RIGHT: 10px; PADDING-TOP: 3px; POSITION: relative
}
.image {
FLOAT: right; MARGIN: 10px 0px 10px 10px; POSITION: relative
}
.table {
FONT: 11px verdana, arial, helvetica, sans-serif
}
.content {
BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: black 1px solid; PADDING-LEFT: 10px; Z-INDEX: 3; PADDING-BOTTOM: 10px; MARGIN: 0px 210px 20px 170px; BORDER-LEFT: black 1px solid; WIDTH: auto; PADDING-TOP: 10px; BORDER-BOTTOM: black 1px solid; POSITION: relative; BACKGROUND-COLOR: white; min-width: 120px
}
#navAlpha {
BORDER-RIGHT: black 1px dashed; PADDING-RIGHT: 10px; BORDER-TOP: black 1px dashed; PADDING-LEFT: 10px; Z-INDEX: 2; LEFT: 20px; PADDING-BOTTOM: 10px; BORDER-LEFT: black 1px dashed; WIDTH: 128px; PADDING-TOP: 10px; BORDER-BOTTOM: black 1px dashed; POSITION: absolute; TOP: 20px; voice-family: inherit
}
UNKNOWN {
WIDTH: 128px
}
#navBeta {
BORDER-RIGHT: black 1px dashed; PADDING-RIGHT: 10px; BORDER-TOP: black 1px dashed; PADDING-LEFT: 10px; Z-INDEX: 1; RIGHT: 20px; PADDING-BOTTOM: 10px; BORDER-LEFT: black 1px dashed; WIDTH: 168px; PADDING-TOP: 10px; BORDER-BOTTOM: black 1px dashed; POSITION: absolute; TOP: 20px; voice-family: inherit
}
UNKNOWN {
WIDTH: 168px
}
.table {
FONT-SIZE: x-small; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
/* THE FOLLOWING ARE FOR USE WITH THE MINI-CALENDAR */

/*  Calendar header text */
.header {
font-family: verdana,trebuchet,sans-serif;
font-size:  10px;
color:    #ffffff;
font-weight: bold;
}

/*  Navigational links in the header */
.navlinks, .navlinks a:link, .navlinks a:active, .navlinks a:visited, .navlinks a:hover{
color:    #ffffff;
font-family: verdana,trebuchet,sans-serif;
font-size:  10px;
font-weight: bold;
}
.navlinks a:link   { color:  #ffffff; text-decoration: none;}
.navlinks a:visited { color:  #ffffff; text-decoration: none;}
.navlinks a:active { color:  #333333; text-decoration: none;}
.navlinks a:hover   { color:  #000000; text-decoration: underline;}

/*  Days of the week text */
.weekdays {
font-family: verdana,trebuchet,sans-serif;
font-size:  9px;
color:    #666666;
font-weight:  bold;
}

/*  Days of the month text and links */
.monthdays, .monthdays a:link, .monthdays a:active, .monthdays a:visited, .monthdays a:hover {
font-family: verdana,trebuchet,sans-serif;
font-size:  9px;
color:    #666666;
}
.monthdays a:link   { color:  #0000b0; text-decoration: underline;font-weight: bold;}
.monthdays a:visited { color:  #0000b0; text-decoration: underline;font-weight: bold;}
.monthdays a:active { color:  #333333; text-decoration: underline;font-weight: bold;}
.monthdays a:hover   { color:  #cccccc; text-decoration: none;font-weight: bold;}
.thumbnail3 { border: 1px solid #000; float: left; margin: 3px; padding: 3px; ; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal}
.thumbnail2 { border: 1px #993300 solid; float: left; margin: 3px; padding: 3px; ; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal ; background-color: #F6E9D9; font-weight: normal; font-variant: normal; text-transform: none; color: #990000}
.thumbnail4 { border: 1px #993300 solid; float: left; margin: 3px; padding: 3px; ; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal ; background-color: #F6E9D9; font-weight: normal; font-variant: normal; text-transform: none; color: #990000}
.thumbnail5 { border: 1px #993300 solid; float: left; margin: 3px; padding: 3px; width: 100px; ; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal ; background-color: #F6E9D9; font-weight: normal; font-variant: normal; text-transform: none; color: #990000}

———————————————————————————————
also in your page you have somewhere….>

<b>Calendar</b> <br>
    <!—Mini-calendar—>
    <div class=“table”>
<font face=“Verdana, Arial, Helvetica, sans-serif” size=“1”> <table border=“0” cellpadding=“0” cellspacing=“0” >
<tr>
<td align=“center”>

————————————————————————————————-

replace it with
—————————>

<b>Calendar</b> <br>
    <!—Mini-calendar—>
    <div>
<table border=“0” cellpadding=“0” cellspacing=“0” >
<tr>
<td align=“center”>
—————————————————————————————————

i check it localy and works perfect.

Hey, it worked!!  Jostar, thank you so much for your help.  I didn’t change the code for the calendar in the index.php file, because after I uploaded the css file everything straightened out, and now it’s as tiny as I need it.  Thanks again!