WP theme not displaying excerpts correctly

[rubikwizard]

Hello. I hope someone can help me.

I have created a WP website for the school I work at http://www.beckfoot.bradford.sch.uk/ and I am having trouble with how the category pages display. The site is based on a theme that we purchased. Please not that the given URL is not usually available between about midnight and 2am-ish (GMT) due to the server doing backups or something.

Take a look at http://www.beckfoot.bradford.sch.uk/?cat=3 and http://www.beckfoot.bradford.sch.uk/?cat=41 for example. Each post has its own text and a short excerpt but on the category pages if the excerpt is ‘too short’ then the formatting gets messed up and the title of the next post gets put below the text of the last post and does not start on a ‘new line’.

The code for the category page is below

Code:

Headlines

“>

ID, ‘Image’, true) ) { ?>

” title=”“>” title=”“>

The CSS styles are as follows

Code:

/*
Theme Name: thebeeb
Theme Date: 190109
Theme URL: http://stylewp.com/products/newspaper-magazine-themes/the-beeb.html
Description: Premium WordPress theme brought to you by StyleWP, a subsidiary of InType Media.
Author: StyleWP
Author URI: http://www.stylewp.com
Version: 1.2
*/

/* ================================================================
THEME SETUP
=================================================================== */

body {
background: #eeeeee;
width: 1000px;
color: #565656;
font-size: 11px;
font-family: Helvetica;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff;
width: 980px;
margin: 0px auto 10px;
padding: 0px 10px 10px 10px;
position: relative;
}

#widgetwrap {
background: #ffffff;
border: 1px solid #ffffff;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

/* ================================================================
LINK SETTINGS
=================================================================== */

a, a:visited {
color: #1F527B;
text-decoration: none;
}

a:hover {
color: #1F527B;
text-decoration: underline;
}

h1.itemtitle {
color: #1F527B;
font-size: 18px;
font-family: Verdana;
font-weight: bolder;
line-height: 22px;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
}

h1.itemtitle a, h1.itemtitle a:visited {
color: #1F527B;
font-size: 18px;
font-family: Verdana;
font-weight: bolder;
line-height: 22px;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
text-decoration: none;
}

h1.itemtitle a:hover {
color: #183A55;
text-decoration: underline;
}

h1.itemtitle_inner {
color: #404040;
font-size: 24px;
font-family: Verdana;
font-weight: bolder;
line-height: 30px;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
}

h1.itemtitle_cat {
color: #404040;
font-size: 12px;
font-family: Verdana;
font-weight: bolder;
line-height: 30px;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 0px;
}

h1.categorytitle {
color: #404040;
font-size: 20px;
font-family: Verdana;
font-weight: bolder;
line-height: 30px;
margin: 7px 0px 5px 0px;
padding: 0px 0px 0px 0px;
}

h1.fronttitle {
color: #CE1E1E;
font-size: 13px;
font-family: Arial;
font-weight: bold;
line-height: 16px;
margin: 10px 0px 15px 0px;
padding: 0px 0px 0px 0px;
}

h1.sidebartitle {
background: #CE1E1E;
color: #ffffff;
font-size: 13px;
font-family: Arial;
font-weight: bold;
line-height: 16px;
margin: 10px 0px 0px 0px;
padding: 6px;
}

h1.leftbartitle {
background: #92B9E0;
color: #ffffff;
font-size: 13px;
font-family: Arial;
font-weight: bold;
line-height: 16px;
margin: 0px 0px 20px 0px;
padding: 6px;
}

h1.sectiontitle {
background: #ffffff url(images/mid.jpg) no-repeat bottom;
color: #565656;
font-size: 14px;
font-family: Arial;
font-weight: bold;
line-height: 14px;
margin: 0px 0px 20px 0px;
padding: 6px 0px 20px 5px;
}

h1.widgettitle {
background: #ffffff url(images/h1.gif) repeat-x;
color: #ffffff;
font-size: 16px;
font-family: Tahoma;
font-weight: bold;
line-height: 23px;
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 10px;
}

h1.footcopyright {
color: #ffffff;
font-size: 18px;
font-family: Helvetica;
text-transform: uppercase;
font-weight: normal;
line-height: 16px;
margin: 0px 0px 20px 0px;
padding: 0px;
}

/* ================================================================
TOP BAR
=================================================================== */

#topbar {
background: #0A3A84 url(images/topfade.jpg) repeat-x;
width: 980px;
height: 100px;
color: #999999;
font-size: 10px;
margin: 0px;
padding: 0px;
overflow: hidden;
}

#topbar p {
font-size: 10px;
font-family: Verdana;
font-weight: bolder;
padding: 0px;
margin: 0px 0px 5px 0px;
}

.topbar_left {
background: transparent url(images/logo.jpg) no-repeat;
width: 700px;
height: 70px;
float: left;
margin: 17px 0px 0px 15px;
padding: 0px;
}

.topbar_right {
width: 240px;
float: right;
text-align: right;
margin: 0px;
padding: 22px 15px 0px 0px;
font-weight: bolder;
}

/* ================================================================
HEADER
=================================================================== */

#header {
background: #0A3A84 url(images/masthead.jpg) no-repeat;
width: 980px;
height: 68px;
color: #FFFFFF;
font-size: 10px;
margin: 1px 0px 0px 0px;
padding: 0px;
overflow: hidden;
}

#header p {
color: #ffffff;
font-size: 20px;
font-family: Verdana;
text-decoration: none;
font-weight: bold;

line-height: 8px;
text-align: left;
padding: 0px 0px 0px 15px
}

/* ================================================================
FRONTPAGE TICKER
=================================================================== */

#tickerstyle {
margin: 0px 0px 0px 15px;
}

#tickerbox {
background: #ffffff url(images/latest.gif) no-repeat;
padding: 0px 0px 0px 65px;
margin: 0px 0px 7px 0px;
}

.tickerclass {
padding: 0px;
}

.tickerclass a {
font-size: 12px;
font-family: Verdana;
text-decoration: none;
}

.tickerclass a:visited {
font-size: 12px;
font-family: Verdana;
text-decoration: none;
}

.tickerclass a:hover {
font-size: 12px;
font-family: Verdana;
text-decoration: underline;
}

/* ================================================================
FRONTPAGE SETUP
=================================================================== */

#front1 {
width: 146px;
float: left;
font-size: 12px;
font-family: Verdana;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#front1 ul {
float: left;
list-style: none;
margin: 0px 0px 20px 0px;
padding: 0px;
}

#front1 li {
list-style: none;
margin: 0px;
padding: 0px;
}

#front1 li a, #front1 li a:link, #front1 li a:visited {
width: 137px;
background: #E5E5E5;
color: #1F527B;
display: block;
font-size: 11px;
font-family: Verdana;
font-weight: bold;
margin: 0px 0px 2px 0px;
padding: 3px 3px 3px 5px;
text-decoration: none;
}

#front1 li a:hover {
width: 137px;
background: #d4d4d4;
color: #1F527B;
font-size: 11px;
font-family: Verdana;
font-weight: bold;
margin: 0px 0px 2px 0px;
padding: 3px 3px 3px 5px;
text-decoration: underline;
}

#front1 li a:active {
width: 137px;
background: #d4d4d4;
color: #1F527B;
font-size: 11px;
font-family: Verdana;
font-weight: bold;
margin: 0px 0px 2px 0px;
padding: 3px 3px 3px 5px;
text-decoration: underline;
}

#front1 li li a, #front1 li li a:link, #front1 li li a:visited {
width: 137px;
background: #E5E5E5;
color: #1F527B;
display: block;
font-size: 11px;
font-family: Verdana;
font-weight: bold;
margin: 0px 0px 2px 0px;
padding: 3px 3px 3px 5px;
text-decoration: none;
}

#front_top {
width: 834px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
line-height: 16px;
overflow: hidden;
}

#front_top p {
color: #565656;
font-size: 12px;
font-family: Verdana;
text-decoration: none;
line-height: 17px;
padding: 0px 0px 0px 0px
}

#toprow {
width: 819px;
margin: 0px 0px 10px 15px;
padding: 0px 0px 0px 0px;
border-bottom: 1px solid #9C0001;
overflow: hidden;
}

#toprow p {
color: #565656;
font-size: 11px;
font-family: Verdana;
text-decoration: none;
line-height: 11px;
padding: 0px 0px 0px 0px
}

.toprow_left {
width: 519px;
float: left;
margin: 2px 0px 0px 0px;
padding: 0px;
}

.toprow_right {
width: 300px;
float: right;
text-align: right;
margin: 2px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#toprow_inner {
width: 819px;
margin: 0px 0px 10px 15px;
padding: 0px 0px 0px 0px;
border-bottom: 1px dotted #999999;
overflow: hidden;
}

#toprow_inner p {
color: #565656;
font-size: 11px;
font-family: Verdana;
text-decoration: none;
line-height: 11px;
padding: 0px 0px 0px 0px
}

.toprow_left_inner {
width: 519px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#toolbox {
width: 819px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

#toolbox p {
color: #1F527B;
font-size: 11px;
font-family: Verdana;
text-decoration: none;
line-height: 11px;
padding: 0px 0px 0px 0px
}

#toolbox a {
color: #1F527B;
font-size: 10px;
font-family: Verdana;
text-decoration: none;
line-height: 11px;
padding: 0px 0px 0px 0px
}

#toolbox a:visited {
color: #1F527B;
font-size: 10px;
font-family: Verdana;
text-decoration: none;
line-height: 11px;
padding: 0px 0px 0px 0px
}

#toolbox a:hover {
color: #1F527B;
font-size: 10px;
font-family: Verdana;
text-decoration: underline;
line-height: 11px;
padding: 0px 0px 0px 0px
}

.front2 {
width: 468px;
float: left;
font-size: 12px;
font-family: Verdana;
margin: 0px 0px 0px 0px;
padding: 0px 15px 0px 15px;
}

#front2split {
width: 468px;
margin: 0px;
padding: 0px;
overflow: hidden;
}

.front2split_left {
width: 227px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 7px 0px 0px;
}

.front2split_right {
width: 227px;
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 7px;
}

#front2promo {
background: #EFEFEF;
width: 448px;
margin: 0px;
padding: 0px 10px 0px 10px;
overflow: hidden;
}

.front2promo_left {
width: 126px;
float: left;
margin: 0px 35px 0px 0px;
padding: 0px;
}

.front2promo_middle {
width: 126px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.front2promo_right {
width: 126px;
float: right;
margin: 0px 0px 0px 35px;
padding: 0px;
}

#catlists {
width: 468px;
margin: 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

.catlists-left {
width: 224px;
float: left;
margin: 0px 10px 0px 0px;
padding: 0px;
}

.catlists-right {
width: 224px;
float: right;
margin: 0px 0px 0px 10px;
padding: 0px;
}

#catlists ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}

#catlists ul li {
list-style-type: none;
background: #FFFFFF url(images/icon.gif) no-repeat;
margin: 0px 0px 7px 0px;
padding: 0px 0px 0px 10px;
}

#catlists a.catlink, a.catlink:visited {
color: #9C0001;
text-decoration: none;
}

#catlists a.catlink:hover {
color: #9C0001;
text-decoration: underline;
}

.front3 {
width: 326px;
float: left;
font-size: 12px;
font-family: Verdana;
margin: -18px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.front3 p.red {
color: #9C0001;
font-size: 12px;
font-family: Verdana;
text-decoration: none;
line-height: 16px;
padding: 0px 0px 0px 0px
}

.front3 ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.front3 ul li {
list-style-type: none;
background: #FFFFFF url(images/icon.gif) no-repeat;
margin: 0px 0px 7px 0px;
padding: 0px 0px 0px 10px;
}

.front3_test {
width: 326px;
float: left;
font-size: 12px;
font-family: Verdana;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.front3_test p.red {
color: #9C0001;
font-size: 12px;
font-family: Verdana;
text-decoration: none;
line-height: 16px;
padding: 0px 0px 0px 0px
}

.front3_test ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}

.front3_test ul li {
list-style-type: none;
background: #FFFFFF url(images/icon.gif) no-repeat;
margin: 0px 0px 7px 0px;
padding: 0px 0px 0px 10px;
}

/* ================================================================
IMAGE CONTROL
=================================================================== */

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

img.alignnone {
padding: 0px;
margin: 0px 0px 10px 0px;
display: inline;
}

img.alignright {
padding: 0px;
margin: 5px 0px 20px 15px;
display: inline;
}

img.alignleft {
padding: 0px;
margin: 5px 20px 15px 0px;
display: inline;
}

img.alignleft {
padding: 0px;
margin: 5px 20px 15px 0px;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

.wp-caption {
margin: 0px;
padding: 0px;
}

.wp-caption img {
margin: 0px 0px 10px 0px;
padding: 0px;
border: 0px;
}

.wp-caption p.wp-caption-text {
margin: 0px;
padding: 5px 0px 0px 0px;

font-size: 10px;
font-style: italic;
font-weight: bold;
line-height: 12px;
}

/* ================================================================
FOOTER CONTROL
=================================================================== */

#toplink {
width: 980px;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}

#toplink p {
color: #1F527B;
font-size: 11px;
font-family: Verdana;
font-weight: normal;
text-transform: uppercase;
text-align: right;
margin: 0px;
padding: 0px 0px 3px 0px;
}

#toplink a, #toplink a:visited {
color: #1F527B;
text-decoration: none;
margin: 0px;
padding: 0px 0px 0px 0px;
}

#toplink a:hover {
color: #1F527B;
text-decoration: underline;
margin: 0px;
padding: 0px 0px 0px 0px;
}

#social {
background: #EFEFEF;
width: 820px;
height: 55px;
margin: 10px 0px 0px 0px;
padding: 35px 0px 0px 160px;
overflow: hidden;
}

#social p {
color: #1F527B;
font-size: 11px;
font-family: Verdana;
font-weight: normal;
margin: 0px;
padding: 0px 0px 3px 0px;
}

#social a, #social a:visited {
color: #1F527B;
text-decoration: none;
margin: 0px;
padding: 0px 0px 0px 0px;
}

#social a:hover {
color: #1F527B;
text-decoration: underline;
margin: 0px;
padding: 0px 0px 0px 0px;
}

#footer {
color: #ffffff;
background: #646464;
width: 960px;
height: 70px;
margin: 10px 0px 0px 0px;
padding: 10px;
overflow: hidden;
}

#footer p {
color: #ffffff;
font-size: 12px;
font-family: Verdana;
font-weight: normal;
margin: 0px;
padding: 0px 0px 3px 0px;
}

#footer a, #footer a:visited {
color: #ffffff;
text-decoration: none;
margin: 0px;
padding: 0px 0px 0px 0px;
}

#footer a:hover {
color: #ffffff;
text-decoration: underline;
margin: 0px;
padding: 0px 0px 0px 0px;
}

.foot1 {
width: 480px;
float: left;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.foot2 {
width: 160px;
float: left;
text-align: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.foot3 {
width: 160px;
float: left;
text-align: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.foot4 {
width: 160px;
float: right;
text-align: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* ================================================================
SEARCH FORM
=================================================================== */

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
display: inline;
}

#searchbox {
background: #ffffff !important;
width: 160px;
color: #404040;
font-size: 11px;
font-family: Verdana;
font-weight: normal;
margin: 0px;
padding: 3px 0px 3px 5px;
border-top: 1px solid #404040;
border-right: 1px solid #404040;
border-left: 1px solid #404040;
border-bottom: 1px solid #404040;
display: inline;
}

/* ================================================================
COMMENTS
=================================================================== */

#commentblock {
float: left;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#commentblock p {
font-size: 11px;
font-family: Verdana;
padding: 0px 0px 10px 0px;
margin: 0px 0px 0px 0px;
}

.commentleft {
float: left;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#commentblock ol {
margin: 0px 5px 0px 0px;
padding: 0px 0px 10px 0px;
}

#commentblock ol li {
background: #F4F4F4;
list-style: none;
margin: 0px;
padding: 10px;
}

.commentdate {
font-size: 11px;
padding-left: 0px;
}

#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #1c1c1c;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

I would also like to have a ‘divider’ between each post on the category pages such as a light grey line like in other parts of the theme. I have tried adding a <hr> but it is not always the correct width depending on the length of the excerpt.

Thankyou to anyone who can give me any guidance on this, it will be much appreciated.

[Author]

Posts