How to stop CSS blog date from streching Twentyten
-
Hi I’ve used some CSS to style the date next to each blog entry as in Twentyten theme it is just plain text. However whatever I seem to do it stretches it wider than specified in code.
Please click here to see image to understand what I mean
The CSS I am using is as follows:
.calendar { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); background: #ebebeb; border: 1px solid #555555; font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif; float: left; margin-right: 20px; width: 41px; height: 47px; font-size: 12px; } .calendar > span { display: block; } .calendar > .month { -moz-border-top-left-radius: 3px; -moz-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; background: #53A4E6; border-bottom: 1px solid #555555; font-weight: bold; padding: 0 2px 0 2px; text-align: center; color: #ffffff; line-height: 1.5; } .calendar > .day { -moz-border-bottom-left-radius: 3px; -moz-border-botton-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; background: #f6f6f6; padding: 2px 0 2px 0; text-align: center; font-weight: bold; font-size: 18px; color: #000000; line-height: 1.3; } .entry-title { clear: right; }
I have placed the code in the loop.php file in the location:
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="calendar"> <span class="month"><?php the_time("M", get_option('date_format')); ?></span> <span class="day"><?php the_time("d", get_option('date_format')); ?></span> </div><!-- calendar --> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
- The topic ‘How to stop CSS blog date from streching Twentyten’ is closed to new replies.