IE6/7 compatibly issue w/ floats

I’m having serious problems with CSS floats in this wordpress theme in IE6/7:
http://032b4a6.netsolhost.com/WordPress/

This is the first WP theme I’ve coded, and while I’ve learned some great lessons for the future, the code is inelegant.

It works fine in modern browsers, but it is highly likely that a large number of visitors to this site will not have updated browsers.

It seems to me that there is a core issue that is repeated throughout the styling and if I can discover what that is, then I’ll be a good bit closer to fixing the theme.

I found this page, which seems to offer some suggestions but, ultimately, makes my task sound impossible. Are there other resources or common suggestions that are offered for fixing cross-compatibility float issues with IE?

For floats with margins applied add display:inline to each to avoid the double margin bug.

However, the first element I looked at on your page suffers from other problems.


li#wpp-3 ul {
  background-color: #FFFFFF;
  border-bottom: 4px solid #F5820B;
  border-left: 4px solid #F5820B;
  border-right: 4px solid #F5820B;
  height: 210px;
  margin-top: -7px;
[B]  width: 152px;[/B]
}

li#wpp-3 li {
  [B]width: 179px;[/B]
}


The parent is only 152px wide yet you think it fine to make the child even wider! Things must fit or browsers will have to error correct and that means you get broken layouts.

It seems you have similar errors on your posts as you have set the width of the p element wider than the parent. You should probably remove the width from the p elements anyway and the heights as that is seldom a good idea.

I’m just on my way out but I’ll look deeper into in later.

Your comments have helped greatly, thank you very much.

Any more advice on how to get the posts to work properly or anything on fixing the Related Pages box in IE7 would be fantastic.

Hi,

I’m going to have to admit defeat on this one as there is no quick fix I’m afraid.:frowning:

The structure is all wrong for this to work in IE7 properly and would take me days to fix and then you probably wouldn’t be able to make wordpress match the changes.

I’ll give you some pointers to be working with.

For this next section I just have one word:


<!--[if IE 7]>
<style>
/* reset */
* { position: relative;zoom: 1; }
html, body { position: relative; zoom: 1; }
img, a img, form { position: relative; zoom: 1;}

/* defaults */
html, body, p {position: relative; zoom: 1;}
code, pre {position: relative; zoom: 1;}
p {position: relative; zoom: 1;}

</style>
<![endif]-->


No No No No No No No No No No No No No No No No No No No No No Nooooooooooooooooo…

Sorry that was more than one word :slight_smile:

That snippet of code that is actually repeated about 10 times in your page along with a load of other stuff is probably the worst thing you could ever do to IE and will effectively kill it stone dead.

Applying zoom to all elements causes all inline elements to become inline-block elements and completely destroys their usefulness in one fell swoop. Adding position:relative to all elements also is nonsensical and again changes the behaviour of all elements and introduces many bugs.

You need to remove this whole section that is repeated many times in the body of your page.


<!--[if IE 7]>
<style>
/* reset */
* { position: relative;zoom: 1; }
html, body { position: relative; zoom: 1; }
img, a img, form { position: relative; zoom: 1;}

/* defaults */
html, body, p {position: relative; zoom: 1;}
code, pre {position: relative; zoom: 1;}
p {position: relative; zoom: 1;}

</style>
<![endif]-->
            <!--[if IE 6]>
<style>
form {width:300px; float:right;}
</style>
<![endif]-->
            <!--[if IE]>
<style>
div#content-article .post {
 background-color:#ffffff;
  height:119px;
  margin-bottom:10px;
   width: 355px;
  text-decoration: none;
overflow:hidden;
  border-bottom: 1px #cccccc solid;
}
.frontpage {
background-color: #fffffff;
}
.read_more {
  color:#2299DF;
  float:right;
  margin-bottom: 5px;
}
.post h2, .post h2 a, h2.posttitle, .post h2 a:link {
color:#E96759;
  float:left;
  border-color: #ffffff;
  margin-left: 10px;
}
div#content-article img, div#content-article img a {
clear:both;
float:left;
margin-right:0;
padding-right:0;
border-top: 1px #ccc solid;

-moz-box-shadow:2px 2px 3px #ccc;
  -webkit-box-shadow:2px 2px 3px #ccc;

}
.frontpage .post p {
  height:75px;
  margin-bottom:2px;
  margin-left:10px;
  width:330px;
  float:left;
  font:normal normal normal 94%/150% Candara, 'Trebuchet MS', Trebuchet, sans-serif;
overflow:hidden;
}


That still won’t fix much because as I mentioned before the structure is all wrong for IE to work nicely.

In your posts the floated image needs to be inside the post box because once you give posts a layout then then it will always clear the image and won’t let it slide inside.

The posts need to look like this:


<div class="post" id="post-497">
    <div><small>March 24th</small> <img width="110" height="110" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/03/isb1.jpg" class="alignleft post_thumbnail wp-post-image" alt="Irish Soda Bread" title="isb1" /></div>
    <!-- Post Thumbnail Ends -->
    <h2 class="posttitle"><a href="http://032b4a6.netsolhost.com/WordPress/irish-soda-bread" rel="bookmark" title="Permanent Link to Irish Soda Bread">Irish Soda Bread</a></h2>
    <div class="entry">
        <p>Traditional favorite for St. Patrick&#8217;s Day.<br />
            Fun, hands on recipe to make with the kids.<br />
            Only 5 ingredients &#8211; Delicious and easy to make. </p>
        <div class="read_more"><a href="http://032b4a6.netsolhost.com/WordPress/irish-soda-bread"> Read More >> </a></div>
    </div>
</div>

You should lose the filters on the post boxes because that breaks IE7 as well as slowing the page down.


div#content-article .post {
    border-top:1px solid #cccccc;
    border-right:1px solid #cccccc;
    width:467px;
    height:119px;
    position:relative;
    margin-bottom: 10px;
    -moz-box-shadow: 2px 2px 3px #ccc;
    -webkit-box-shadow: 2px 2px 3px #ccc;
    box-shadow: 2px 2px 3px #ccc;/* For IE 8
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc')";
     */
/* For IE 5.5 - 7 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc');
*/
}
.post img {
    margin-top: 3px;
}
.post h2, .post h2 a {
    text-transform: uppercase;
    font: normal normal bold 12px "Comic Sans MS", "Palatino Linotype", Palatino, Georgia, serif;
    color: #E96759;
    margin: 2px 0 0;
    text-decoration: none;
    background: #fff;
}
.post small {
    color:#A6A6A6;
    float:right;
    margin-right:10px;
    display:inline;
    position: relative;
/*left: 95px;*/
}
.read_more {
    font: bold 15px/normal 'Comic Sans MS';
    right:5px;
    position:absolute;
    bottom:0;
}


For your related pages you need this to close the gaps.


#sidebar-alt-widget h2 img{
    display:block
}
#sidebar-alt-widget li{zoom:1.0}


That’s a start but I guess you won’t be able to change the page that dramatically if wordpress is controlling it. I could probably have coded the page from scratch quicker than its taken me to sort through this :slight_smile:

If it’s any use here is the whole code I was working with.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>wordpress</title>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!-- metas -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="WordPress 3.0.5" />
<!-- start IE specific metas -->
<meta content="off" name="autosize" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<!-- links -->
<style>
/* 
Theme Name:        Lorem Ipsum
Theme URI:        http://letsmint.com/themes/lorem-ipsum
Description:     No Image; a fast loading, Widget ready 3 column, clean, clear, white theme.
Version:        1.3.1
Author:            Brajeshwar
Author URI:        http://brajeshwar.com/
Tags:            white, fixed width, three columns, widgets
___________________________________________________________________________________________________ */

/* reset */
* {
    margin: 0;
    padding: 0;
}
html, body {
    border: 0 none;
    height: 100%;
    background: #fff;
    text-align: center;
    margin-top: 5px;
}
img, a img, form {
    margin: 0;
    padding: 0;
    border: 0 none;
    text-decoration: none;
}
/* defaults */
html, body, p {
    font: normal normal normal 94%/150% Candara, "Trebuchet MS", Trebuchet, sans-serif;
    color: #333;
}
code, pre {
    font: normal normal normal 1em/1.6em Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
p {
    margin:  0;
    padding: 0.15em 0;
}
/* links */
a:link {
    color:#2299DF;
}
a:visited {
    color:#6C82B5;
}
a:hover {
    text-decoration:underline;
    color:#BCE23A;
}
a:active {
    color:#0000FF;
}
/* hn */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
h1 {
    font-size: 1.2em;
    color: #BCE23A;
}
h2 {
    font-size: 1.1em;
}
h3 {
    font-size: 1.0em;
}
h4 {
    font-size: 0.8em;
}
h5 {
    font-size: 0.7em;
}
h6 {
    font-size: 0.6em;
}
/* definition lists */
dl {
    margin: 20px 0;
}
dt {
    font-size: 0.6em;
    text-transform: uppercase;
}
dd {
    margin: 0 0 20px;
}
/* lists */
ol {
    margin: 10px 0 10px 25px;
}
ol li {
    margin: 0 0 15px 0;
}
ul {
}
ul li {
    /* height: 1%; */
list-style-type: disc;
    margin: 0 0 5px;
    padding: 0 0 0 15px;
    line-height: 18px;
}
/* blockquote */
blockquote {
    margin: 0;
    padding: 10px;
    background: #f5f5f5;
    border-top: 1px dotted #ccc;
    border-bottom: 1px solid #ccc;
    font: italic normal normal 0.95em/1.5em Candara, "Trebuchet MS", Trebuchet, sans-serif;
    color: #666;
}
/* image styles */
img.left {
    float: left;
    margin: 0 15px 10px 0;
}
img.right {
    float: right;
    margin: 0 0 10px 15px;
}
img.centered {
    display: block;
    margin: 10px auto;
}
img.border {
    padding: 2px;
    border: 1px solid #999;
}
/* utility */
.clearall, .clear {
    clear: both;
    height: 0;
    line-height: 0;
}
.txtStrike {
    text-decoration: line-through;
    color: #ccc;
}
.disHide {
    display: none;
}
.codered, .codeRed, .clrred, .clrRed {
    color: #f00;
}
.noBorder, .noborder {
    border: 0 none;
}
hr {
    display: none;
}
.wp-caption {
    background-color: #f3f3f3;
    border: 1px solid #ddd;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px; /* optional rounded corners for browsers that support it */
    padding-top: 4px;
    text-align: center;
    width:470px;
}
/* misc */
abbr, acronym {
    font-style: normal;
    border-bottom: 1px dotted #666;
    cursor: help;
}
pre {
    border: 1px dotted #999;
    background: #fafafa;
    padding: 5px;
    overflow: auto;
    width: 95%;
    max-height: 500px;
    margin: 10px auto;
    font: 1em/1.5em Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
/* theme
___________________________________________________________________________________________________ */
html, body {
    background: #f3f3f3;
    margin: tpx auto;
}
div#wrapper {
    background: #fff;
    width: 960px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    border: 5px solid #fff;
}
/* header */
div#header {
    text-align: left;
}
div#header h1, div#header h1 a, div#header h1 a:hover {
    font: normal normal bold 1.6em/normal Cambria, "Times New Roman", Times, serif;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0;
    margin: 30px 0 0 15px;
}
div#header h5 {
    font: normal normal normal 1.0em/normal Helvetica, Calibri, Arial, sans-serif;
    color: #666;
    padding: 0;
}
div#header img {
    width: 475px;
    height: 84px;
    padding: 0 0 0 5px;
}
/* nav */
div#nav {
    text-align: center;
    background: #A7DA5B;
    margin-bottom:5px;
}
div#nav ul {
    margin: 0;
    padding: 0;
}
div#nav li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
div#nav ul li a {
    font: bold 12px/normal rial, Helvetica, Palatino, Georgia, serif;
    color: #fff;
    padding: 3px 25px;
    margin: 0;
    text-decoration: none;
    text-transform: uppercase;
}
div#nav ul li a:hover {
    color: #fff;
    background-color: #99BE21;
    width: 95px;
    height: 20px;
}
.search {
    clear:both;
    float: right;
}
.findtitle {
    float:right;
}
/* sidebars */

li#wpp-3 ul {
    width: auto;
    height:auto;
    border: #f5820b solid 4px;
    padding-top:25px;
    background-color: #fff;
    margin-top:8px;
    position:relative;
}
*+html li#wpp-3 ul li {
    zoom:1.0
}
.pposts {
    background:#FFFFFF;
    color:#F5820B;
    font:normal normal bold 18px/.8 'Comic Sans MS';
    z-index: 3;
    margin:0 0 0px 23px;
    position:absolute;
}
li#wpp-3 li {
    width:150px;
    overflow:hidden;
}
li#text-5 {
    margin: 0px;
    width: 185px;
    height: 24px;
}
div#Slider {
    width: 731px;
    height: 315px;
    float: left;
    border: 1px solid #e8e8e8;
    padding: 0 5px 0;
    font: bold 14pt Ariel;
    margin-top:7px;
    margin-right:6px;
    background-color:#fff;
}
div#sidebar {
    width: 160px;
    float: left;
    padding: 0 5px 0;
    font: bold 14pt Ariel;
    padding-top: 5px;
}
div#sidebar-alt {
    width: 300px;
    float: right;
    padding: 0 5px 0;
    font: bold 14pt Ariel;
    background: #fff;
}
div#sidebar img {
    margin:0;
}
div#sidebar-widget {
    margin: 0;
}
#categoryposts-3 li {
    margin: 0;
}
#categoryposts-3 {
    background: #fff;
    margin: 0 0 10px 0;
    padding: 0 5px 0 5px;
    border-bottom: 4px #F6820B solid;
}
li.cat-post-item img {
    float: left;
    margin-left: 13px;
    height: 60px;
    width: 60px;
}
li.cat-post-item {
    width: 292px;
    border-left: 4px #F6820B solid;
    border-right: 4px #F6820B solid;
    padding-top: 15px;
    height:75px;
}
li.cat-post-item p {
    margin: 0 5px 0 5px;
    padding-bottom: 10px;
    width: 200px;
    margin-left: 85px;
    font: 11px Arial, Helvetica, Palatino, Georgia, serif;
}
a.post-title {
    padding-top: 7px;
    margin-left: 12px;
    font: 13px Arial, Helvetica, Palatino, Georgia, serif;
    font-weight: bold;
    color: #D2615D;
}
div#sidebar h2, div#sidebar-alt h2, div#Slider h2 {
    font: #F5820B normal normal bold 15px/normal Arial, Helvetica, Palatino, Georgia, serif;
    text-transform: uppercase;
    height:30px;
    margin-top: 3px;
}
div#sidebar-alt ul, div#sidebar ul div#Slider ul {
    list-style: none;
    margin: 0;
}
div#sidebar-alt li, div#sidebar li, div#Slider li {
    list-style: none;
    padding: 0;
}
div#sidebar-alt ul li, div#sidebar ul li, div#Slider ul li {
    font: normal 10pt Ariel, sans-serif;
    text-transform: capitalize;
}
div#Slider ul li ul li, div#sidebar ul li ul li {
    padding: 0 5px 0 0;
    margin-right: 15px;
    background: url(http://www.activitiesforkids.com/work/img34.gif) no-repeat;
}
div#sidebar ul li {
    background: url(http://www.activitiesforkids.com/work/img34.gif) no-repeat;
}
div#sidebar-alt ul li a, div#sidebar ul li a, div#Slider ul li a {
    color:#2299DF;
    text-decoration:none;
}
div#sidebar ul li a {
    margin-left: 15px;
}
div#sidebar-alt ul li a:hover, div#sidebar ul li a:hover {
    color: #000;
    text-decoration: underline;
}
div#sidebar-alt ul li ol, div#sidebar ul li ol {
    list-style: decimal;
}
div#sidebar-alt ul li ol li, div#sidebar ul li ol li {
    list-style: decimal;
    margin: 0.2em 5px;
    padding: 0.2em 5px;
}
#rss-random, p.rss-random {
}
p.rss-random span.icon-rss {
    display: block;
    float: left;
    width: 90px;
}
p.rss-random span.randompost {
    font: normal normal normal 0.96em/normal Candara, "Trebuchet MS", Trebuchet, sans-serif;
}
p.rss-random span.randompost img {
    float: left;
    margin: 0 3px 0 0;
}
p.rss-random span.randompost a {
    text-decoration: underline;
}
p.rss-random span.randompost a:hover {
    text-decoration: underline;
    color: #000;
}
/* content */
div.content {
    background: #fff;
    margin: 5px 0;
    padding: 8px;
    height: 100%;
    border: 4px solid #98BF21;
}
/* content-article */
div#content-article {
    float:right;
    margin-right:5px;
    width:470px;
}
div#content-article-post {
    float:left;
    width: 460px;
    margin-left: 45px;
}
div#content-article-post h2, div#content-article-post h2 a {
    font-size: 16px;
}
div#content-article-post ul li {
    margin: 0;
    padding: 0;
}
div#content-article-post table {
    width:400px;
}
div#content-article-post table, td, th {
    width:400px;
}
div#content-article-page {
    float:left;
    width: 470px;
    margin-left: 45px;
}
div#content-article-page h5 {
    font: bold 25px "Comic Sans MS", "Palatino Linotype", Palatino, Georgia, serif;
    color: #ffffff;
    margin: 16px 0 10px 0;
    padding: 0 0 0 10px;
    background-color: #F68209;
    width: 460px
}
div#content-article-page .lcp_catlist {
    height:119px;
    width:464px;
}
ul.lcp_catlist p {
    height:78px;
}
ul.lcp_catlist li {
    border-right: 1px #ccc solid;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    -webkit-box-shadow:#CCCCCC 2px 2px 3px;
    box-shadow:#CCCCCC 2px 2px 3px;
    height:119px;
    margin-bottom:7px;
    width:470px;
    height:120px;
    list-style-type:none;
    padding-left:0;
}
.lcp_excerpt {
    font:normal normal normal 94%/150% Candara, 'Trebuchet MS', Trebuchet, sans-serif;
    padding-right:5px;
    height:77px;
}
ul.lcp_catlist a {
    text-transform: uppercase;
    font: normal normal bold 12px "Comic Sans MS", "Palatino Linotype", Palatino, Georgia, serif;
    margin: 2px 0 0;
    text-decoration: none;
    background: #fff;
}
ul.lcp_catlist .title {
    color: #E96759;
}
a.catlistrm {
    color:#4CA5E1;
    float:right;
    padding-right:10px;
}
.lcp_catlist small {
    color: #a6a6a6;
}
.lcp_catlist strong {
    color:#A6A6A6;
    float:right;
    height:5px;
    margin-bottom:0;
    margin-left:0;
    margin-right:10px;
    margin-top:3px;
}
.lcp_catlist p {
    width: 465px;
    color:#333333;
    font:normal normal normal 94%/150% Candara, 'Trebuchet MS', Trebuchet, sans-serif;
}
.lcp_catlist p a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
}
.lcp_catlist p a:hover {
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    color: #4876ff;
}
div#content-article h5 {
    font: bold 25px "Comic Sans MS", "Palatino Linotype", Palatino, Georgia, serif;
    color: #ffffff;
    margin: 10px 0 10px 0;
    padding: 0 0 0 10px;
    background-color: #F68209;
}
div#content-article img {
}
div#content-article-holiday {
    float:left;
    margin-left:42px;
    width:780px;
}
div#content-article-holiday h5 {
    font: bold 25px "Comic Sans MS", "Palatino Linotype", Palatino, Georgia, serif;
    color: #ffffff;
    margin: 15px 0 -4px 0;
    padding: 0 0 0 10px;
    background-color: #F68209;
}
div#month {
    float: left;
    width: 390px;
    height: 135px;
    border-top: solid #cccccc 1px;
}
div#month p {
    height:0;
}
div#month h2 {
    font-size:20px;
    margin-left:130px;
    font-color: #E7605C;
    background:none;
}
div#month ul {
    margin-left: 145px;
}
div#month li {
    padding-left: 0;
}
div#content-article-holiday .new {
    border-top: 3px solid #4DA6E2;
    border-right: 3px solid #4DA6E2;
    border-bottom: 3px solid #4DA6E2;
    background-color: #EBF7FE;
    width: 382px;
    height: 129px;
    margin-top:-4px;
}
div#content-article-holiday .new h3 {
    color:#FFFFFF;
    float:right;
    font-family:Arial, 'â&#8364;&#339;Helvetica Neueâ&#8364;', Helvetica, sans-serif;
    font-size:17px;
    font-weight:bolder;
    padding-bottom:3px;
    padding-left:6px;
    padding-right:3px;
    padding-top:3px;
    position:relative;
    top:-2px;
    background: #55A2D6;
}
div#content-article-holiday img {
    float: left;
    margin-top: 3px;
}
div#content-article .post {
    border-top:1px solid #cccccc;
    border-right:1px solid #cccccc;
    width:467px;
    height:119px;
    position:relative;
    margin-bottom: 10px;
    -moz-box-shadow: 2px 2px 3px #ccc;
    -webkit-box-shadow: 2px 2px 3px #ccc;
    box-shadow: 2px 2px 3px #ccc;/* For IE 8
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc')";
     *//* For IE 5.5 - 7 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#cccccc');
*/
}
.post img {
    margin-top: 3px;
}
.post h2, .post h2 a {
    text-transform: uppercase;
    font: normal normal bold 12px "Comic Sans MS", "Palatino Linotype", Palatino, Georgia, serif;
    color: #E96759;
    margin: 2px 0 0;
    text-decoration: none;
    background: #fff;
}
.post small {
    color:#A6A6A6;
    float:right;
    margin-right:10px;
    display:inline;
    position: relative;/*left: 95px;*/
}
.frontpage .post p {
    margin-bottom:2px;
}
.post p a {
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
}
.post p a:hover {
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    color: #4876ff;
}
.more-link, .more-link a {
    text-decoration: none;
    color: #000;
}
.read_more {
    font: bold 15px/normal 'Comic Sans MS';
    right:5px;
    position:absolute;
    bottom:0;
}
.more-link a:hover {
    text-decoration: underline;
    color: #000;
}
.post p.postmetadata, .post p.postmetadata a {
    font: normal normal normal 0.90em/normal Helvetica, Calibri, Arial, sans-serif;
    color: #999;
    text-decoration: none;
    border: 0 none;
    margin: 0;
    padding: 0;
}
.post p.postmetadata a:hover {
    text-decoration: underline;
    color: #666;
}
div#content-article img, div#content-article img a {
    /*border-top: #cccccc 1px solid;*/
    float: left;
    padding: 4px;
    margin-right: 10px;
    text-decoration: none;
    background: #fff;
    max-width: 460px;
    width: 110px;
    height: 110px;
    margin-top: 0;
}
div#content-article-page .catimg img, div#content-article-page .catimg img a {
    float: left;
    padding: 4px;
    margin-right: 5px;
    text-decoration: none;
    background: #fff;
    max-width: 460px;
    width: 110px;
    height: 110px;
    margin-top: 0;
}
div#content-article img.wp-smiley, div#content-article img.wp-wink, div#content-article img.wp-polls {
    float: none;
    border: 0 none;
    padding: 0;
    margin: 0;
}
.post p.single-postmeta {
    background: #f0f0f0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    color: #999;
    padding: 10px;
    margin: 20px 0;
}
div#content-article ul, div#content-article ol {
    list-style-type: disc;
    list-style-position: inside;
    font: normal 15px Ariel, sans-serif;
    color: #333;
    text-transform:capitalize;
}
div#content-article ul li, div#content-article ol li {
    margin: 0;
    padding: 0 0 5px;
}
div#content-article ol {
    margin: 0 20px;
}
div#content-article ol li {
    list-style: decimal;
    padding: 4px 5px;
}
div#content-article ul li a, div#content-article ol li a {
    text-decoration:none;
}
div#content-article ul li a:hover, div#content-article ol li a:hover {
    text-decoration: underline;
}
div#content-article p.article-jump {
    margin: 0;
    padding: 0;
}
div#content-article .navigation {
    margin: 20px 0;
    border:none;
}
div#content-article .alignleft img {
    width:138px;
    height:auto;
}
div#content-article .alignright img {
    width:138px;
    height:auto;
}
div#content-article .navigation img {
    height: auto;
    width: 155px;
    border:none;
}
div#related-random {
    padding: 10px 60px 10px 10px;
    margin: 0;
    background: #fff;
    border-top: 1px dotted #333;
    border-bottom: 1px dotted #333;
}
div#related-random p {
    font: bold normal normal 1em/1.5em Candara, "Trebuchet MS", Trebuchet, sans-serif;

}
/* list - this styles lists that make up content blocks on pages*/
div.linkbox {
    width: 100%;
    height: 100%;
    border: 8px solid #E8E8E8;
    padding: 0 0 0 10px;
    margin: 0px;
}
div.linkbox h3 {
    font: bold 18px "Comic Sans MS", "Palatino Linotype", Palatino, Georgia, serif;
    float: right;
    padding: 0;
    margin: 10px 185px 0 0;
}
div.linkbox img {
    width: 125px;
    height: 125px;
    border: 8px solid #E8E8E8;
    margin: 0 0 10px 0;
    padding: 0;
}
div.linkbox ul.a {
    list-style-type: disc;
    list-style-position: inside;
    float: left;
    width: 190px;
    margin: 10px 0;
    padding: 0;
}
div.linkbox ul.b {
    list-style-type: disc;
    list-style-position: inside;
    float: right;
    width: 190px;
    margin: 10px 0;
    padding: 0;
}
div.linkbox ul a {
    color:#2299DF;
    text-decoration:none;
}
div.linkbox ul a:hover {
    color:#BCE23A;
    text-decoration:underline;
}
div.linkboxclear p {
    clear:both;
    color: #E8E8E8;
    line-height: 0;
    margin: 0px;
    padding:0px;
}
/* ads */
.ads {
    overflow: hidden;
    float: none;
}
.article-top {
    border-bottom: 1px solid #f0f0f0;
}
.article-mid {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}
.article-end {
}
/* footer */
div#footer {
    text-align: center;
    border-top: 1px solid #999;
}
div#footer p {
    margin: 0;
    padding: 20px 0;
    color: #333;
    font: normal normal 0.90em/normal Constantia, "Palatino Linotype", Palatino, Georgia, serif;
}
/* arrows, icons, et al */
.more-info, .more-info-alt1 {
    padding-left: 20px;
}
.more-info {
    background: #fff url(i/tag_blue.png) left center no-repeat;
}
.more-info-alt1 {
    background: #fff url(i/accept.png) left center no-repeat;
}
/* search */
#s {
    width: 95%;
    color: #333;
    margin: 8px 0;
    padding: 4px;
}
#searchsubmit {
    margin-bottom: 10px;
}
/* forms */
.textfield-default {
    width: 95%;
    color: #333;
    margin: 8px 0;
    padding: 4px;
}
.submit-default {
}
/* comments */
.alt {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    border-bottom: 1px dotted #ccc;
}
.commentlist {
    padding: 0;
}
.commentlist li {
    margin: 15px 0 3px;
    padding: 5px 10px 3px;
    list-style: number;
}
.commentlist p {
    margin: 10px 5px 10px 0;
}
#commentform p {
    margin: 5px 0;
}
.nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
}
.commentmetadata {
    margin: 0;
    display: block;
    text-transform: lowercase;
    color: #999;
}
/* Figure from http://www.alistapart.com/articles/figurehandler */
.figure {
    margin: 0 0 1.5em;
}
.figure p {
    margin: 0;
}
.figure .credit {
    font-size: .8em;
    text-align: right;
}
.figure .credit cite {
    font-style: inherit;
}
.figure .caption {
    font-style: italic;
    font-size: 1.1em;
}
.figure .title {
    font-style: normal;
    font-weight: bold;
}
.figure .title:after {
    content: ": ";
}
/* tags */
#tags, #tags a {
    text-transform: lowercase;
    text-decoration: none;
    color: #333;
}
#tags a:hover {
    color: #00f;
    text-decoration: underline;
}
/*
FEEDBURNER - FEEDFLARE

*    FeedFlare is wrapped in a <p> tag, so it will inherit the default paragraph styles in use on your blog.
    However, because it contains a class of feedburnerFlareBlock, you can style it however you want.
* By default, FeedFlare uses bullets (â&#8364;¢) as separators. But each one is wrapped in a <span> tag,
    so you can hide them, restyle them, or make them dance at your leisure.
* To aid your styling, we've applied a class of first to the first link.

<p class="feedburnerFlareBlock"><a href="flare1url" class="first">Flare 1</a> <span>&#8226;</span> <a href="flare2url">Flare 2</a> <span>&#8226;</span> <a href="flare3url">Flare 3</a></p>
___________________________________________________________________________________________________ */
p.feedburnerFlareBlock {
}
p.feedburnerFlareBlock .first {
}
p.feedburnerFlareBlock .flare1url {
}
/* flickr photos */
#flickr_badge_source_txt {
    padding:0;
    font: 11px Arial, Helvetica, Sans serif;
    color:#666666;
}
#flickr_badge_icon {
    display:block !important;
    margin:0 !important;
    border: 1px solid rgb(0, 0, 0) !important;
}
#flickr_icon_td {
    padding:0 5px 0 0 !important;
}
.flickr_badge_image {
    text-align:center !important;
}
.flickr_badge_image img {
    border: 1px solid black !important;
}
#flickr_badge_uber_wrapper {
    width:150px;
}
#flickr_www {
    display:block;
    text-align:center;
    padding:0 10px 0 10px !important;
    font: 11px Arial, Helvetica, Sans serif !important;
    color:#3993ff !important;
}
#flickr_badge_uber_wrapper a:hover, #flickr_badge_uber_wrapper a:link, #flickr_badge_uber_wrapper a:active, #flickr_badge_uber_wrapper a:visited {
    text-decoration:none !important;
    background:inherit !important;
    color:#3993ff;
}
#flickr_badge_wrapper {
    background-color:#ffffff;
    border: solid 1px #000000
}
#flickr_badge_source {
    padding:0 !important;
    font: 11px Arial, Helvetica, Sans serif !important;
    color:#666666 !important;
}
#flickr-photos img {
    display: block;
    float: left;
    padding: 0;
    position: relative;
    height: 55px;
    width: 55px;
    border: 1px solid #999;
    margin: 2px;
}
/* figure */
.figure {
    border-bottom: 1px dotted #ccc;
}
.figure img {
    margin: 0;
    padding: 0;
    border: 0 none;
    width: 468px !important;
}
.figure p {
    margin: 0;
    padding: 0;
}
.figure .credit {
    font-size: x-small;
    text-align: right;
}
.figure .credit cite {
    font-style: inherit;
}
.figure .caption {
    margin-bottom: 6px;
}
.figure .title {
    font-weight: bold;
    background: none;
    font-style: normal;
}
.figure .title:after {
    content: ": ";
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
    font: 12px "Lucida Grande", Verdana, Arial, sans-serif;
    color: #333333;
}
#TB_secondLine {
    font: 10px "Lucida Grande", Verdana, Arial, sans-serif;
    color:#666666;
}
#TB_window a:link {
    color: #666666;
}
#TB_window a:visited {
    color: #666666;
}
#TB_window a:hover {
    color: #000;
}
#TB_window a:active {
    color: #666666;
}
#TB_window a:focus {
    color: #666666;
}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
}
.TB_overlayMacFFBGHack {
    background: url(macFFBgHack.png) repeat;
}
.TB_overlayBG {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
    position: absolute;
 height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
    position: fixed;
    background: #ffffff;
    z-index: 102;
    color:#000000;
    display:none;
    text-align:left;
    top:50%;
    left:50%;
    border: 1px solid #555;
    -moz-box-shadow: rgba(0, 0, 0, 1) 0 4px 30px;
    -webkit-box-shadow: rgba(0, 0, 0, 1) 0 4px 30px;
    -khtml-box-shadow: rgba(0, 0, 0, 1) 0 4px 30px;
    box-shadow: rgba(0, 0, 0, 1) 0 4px 30px;
}
* html #TB_window { /* ie6 hack */
    position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
    display:block;
    margin: 15px 0 0 15px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
}
#TB_caption {
    height:25px;
    padding:7px 30px 10px 25px;
    float:left;
}
#TB_closeWindow {
    height:25px;
    padding:11px 25px 10px 0;
    float:right;
}
#TB_closeAjaxWindow {
    padding:6px 10px 0;
    text-align:right;
    float:right;
}
#TB_ajaxWindowTitle {
    float:left;
    padding:6px 10px 0;
}
#TB_title {
    background-color:#e8e8e8;
    height:27px;
}
#TB_ajaxContent {
    clear:both;
    padding:2px 15px 15px 15px;
    overflow:auto;
    text-align:left;
    line-height:1.4em;
}
#TB_ajaxContent.TB_modal {
    padding:15px;
}
#TB_ajaxContent p {
    padding:5px 0px 5px 0px;
}
#TB_load {
    position: fixed;
    display:none;
    z-index:103;
    top: 50%;
    left: 50%;
    background-color: #E8E8E8;
    border: 1px solid #555;
    margin: -45px 0pt 0pt -125px;
    padding: 40px 15px 15px;
}
* html #TB_load { /* ie6 hack */
    position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect {
    z-index:99;
    position:fixed;
    top: 0;
    left: 0;
    background-color:#fff;
    border:none;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    height:100%;
    width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
    position: absolute;
 height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent {
    clear:both;
    border:none;
    margin-bottom:-1px;
    _margin-bottom:1px;
}
.ss-show-wrap {
    position: relative;
    margin: 0 0 30px;
}
.ss-slider {
    list-style: none;
    margin: 0!important;
    padding: 0!important;
    display:block;
    overflow:hidden;
}
.ss-slider a:focus {
    outline: none;
}
.ss-slider img {
    display:block;
    padding:0!important;
    margin:0;
    border: none;
    overflow:hidden!important;
}
.sexyslider-title {
    padding: 8px 5px;
    font-size: 12px;
    line-height: 16px;
}
.ss-slider-controls-wrap {
    height:16px;
    position:absolute;
    z-index:300;
    list-style:none;
    margin:0!important;
    padding:0!important;
    text-align: center;
}
.ss-slider-controls-wrap div {
    margin: 0 auto!important;
    display: block;
    height: 16px;
    position: relative!important;
}
.ss-slider-controls a {
    display:block;
    width:8px;
    height:8px;
    float:left;
    margin: 0 3px!important;
    padding: 0!important;
    cursor:pointer;
    list-style: none;
    text-indent: -9999px;
}
.ss-slider-controls li.sexyslider-control, .blue_round a { /*default style*/
    background:url(images/dots_blue_round.png) no-repeat;
}
.blue_square a {
    background:url(images/dots_blue_square.png) no-repeat!important;
}
.green_round a {
    background:url(images/dots_green_round.png) no-repeat!important;
}
.green_square a {
    background:url(images/dots_green_square.png) no-repeat!important;
}
.gray_round a {
    background:url(images/dots_gray_round.png) no-repeat!important;
}
.gray_square a {
    background:url(images/dots_gray_square.png) no-repeat!important;
}
.black_round a {
    background:url(images/dots_black_round.png) no-repeat!important;
}
.black_square a {
    background:url(images/dots_black_square.png) no-repeat!important;
}
.ss-slider-controls a.active {
    background-position: -8px 0!important;
}
.ss-paginator {
    position: absolute;
    height: 0px;
    margin-bottom: 30px;
    line-height: 30px;
    z-index: 400;
}
.ss-paginator a {
    color: #000;
    text-decoration: none;
}
.ss-paginator .sexyslider-prev, .ss-paginator .sexyslider-next {
    width:54px;
    height: 32px;
    color:#000;
    position:absolute;
    z-index:4;
    cursor:pointer;
}
.ss-paginator .sexyslider-prev {
    left: 0;
    text-align: right;
    padding-right: 10px;
    background-position: 0 0;
}
.ss-paginator .sexyslider-next {
    right: 0!important;
    background-position: -64px 0!important;
    text-align: left;
    padding-left: 10px;
}
.black_button .sexyslider-prev, .black_button .sexyslider-next {
    background: url('images/prev-next-black-button.png');
    color: #f0f0f0;
    outline: none;
}
.gray_button .sexyslider-prev, .gray_button .sexyslider-next {
    background: url('images/prev-next-gray-button.png');
}
.gray_arrow .sexyslider-prev, .gray_arrow .sexyslider-next {
    background: url('images/prev-next-arrow-gray.png');
    width: 22px!important;
    height: 32px;
    background-repeat: no-repeat;
}
.black_arrow .sexyslider-prev, .black_arrow .sexyslider-next {
    background: url('images/prev-next-arrow-black.png');
    width: 22px!important;
    height: 32px;
    background-repeat: no-repeat;
    text-indent: -9999px;
}
.black_arrow .sexyslider-prev {
    left: 10px;
}
.gray_arrow .sexyslider-prev {
    left: 10px;
}
.gray_arrow .sexyslider-next, .black_arrow .sexyslider-next {
    background-position: -32px 0!important;
    right: 10px!important;
}
/*
Skin: Default
*/
.skin-default {
    position: relative;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.skin-default dl.slidedeck {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.skin-default dl.slidedeck > dd {
    position: relative;
    height: 294px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: #fff;
}
.skin-default dl.slidedeck > dt {
    position: relative;
    cursor: pointer;
    height: 41px;
    line-height: 38px;
    font-size: 12px;
    font-weight: bold;
    font-family: "Futura Bold", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    background:#fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    color: #505050;
    margin: 0;
    padding: 0;
}
/*
 * The hovered state of a SlideDeck spine.
 */
.skin-default dl.slidedeck dt.spine:hover {
    color: #333!important;
    background: #f9f9f9;
    cursor: pointer!important;
}
/*
 * The active state of a SlideDeck spine.
 */
.skin-default dl.slidedeck dt.spine.active, .skin-default dl.slidedeck dt.spine.active:hover {
    cursor: default!important;
    color: #fff!important;
    background: #333;
    border: 1px solid #000;
}
/*
 * The SlideDeck spine index labels.
 * 
 * This is to style the numbers (or letters if you have customized it so)
 * that appear at the bottom of each SlideDeck spine.
 */
.skin-default dl.slidedeck dt.spine .index {
    font-size: 24px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    color: #505050;
}
.skin-default dl.slidedeck dt.spine.active .index {
    margin-bottom: 0;
}
/*
 * The hovered state of a SlideDeck spine index label.
 */
.skin-default dl.slidedeck dt.spine:hover .index {
    color: #333;
}
/*
 * The active state of a SlideDeck spine index label.
 */
.skin-default dl.slidedeck dt.spine.active .index {
    color: #fff;
}
/*
Skin: Gray Ribbons
*/

.skin-ribbons {
    border-top: 1px solid #313844;
    border-bottom: 1px solid #313844;
}
.skin-ribbons dl.slidedeck dd {
    padding: 0;
    background: -moz-linear-gradient(top, #ffffff, #e2e2e2);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e2e2e2));
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#e2e2e2');
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffff',EndColorStr='#e2e2e2')";
}
.skin-ribbons dl.slidedeck dt {
    height: 41px;
    line-height: 41px;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: normal !important;
    font-family: "Lucida Grande", Arial, Helvetica, sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: -1px -1px 1px #434b56;
    background: url('images/spines.png') 0 -104px repeat-x;
    color: #fff !important;
    padding-bottom: 0 !important;
}
.skin-ribbons dl.slidedeck dt:hover {
    background-position: 0 -153px;
}
.skin-ribbons dl.slidedeck dt.active {
    padding-bottom: 7px !important;
    background-position: 0 -48px!important;
}
.skin-ribbons dl.slidedeck dt.active:hover {
    background-position: 0 0;
}
.skin-ribbons dl.slidedeck dt.next {
    padding-top: 7px !important;
    background-position: 0 -97px;
    margin-left: -28px !important;
}
.skin-ribbons dl.slidedeck dt.next:hover {
    background-position: 0 -146px;
}
.skin-ribbons dl.slidedeck dt .index {
    line-height: 41px;
    font-size: 14px;
    font-weight: bold;
    color: #fff !important;
    margin-left: 4px;
}
.skin-ribbons dl.slidedeck dt.active .index {
    margin-bottom: 6px;
}
.skin-ribbons dl.slidedeck dt:hover .index {
    color: #fecb00 !important;
}
.skin-ribbons dl.slidedeck .activeCorner {
    display:none;
}
/*
Wordpress Popular Posts plugin stylesheet
Developed by Hector Cabrera

Use the following classes to style your popular posts list as you like.
*/

/* title styles */
.wpp-post-title {
}
/* thumbnail styles */
img.wpp-thumbnail {
    border:none;
}
/* excerpt styles */
.wpp-excerpt {
}
/* Stats tag styles */
.post-stats {
    font-size:9px;
    font-weight:bold;
}
.wpp-comments {
}
.wpp-views {
}
.wpp-author {
    font-style:italic;
}
.wpp-date {
}
/* WP-PostRatings styles */
.wpp-rating {
}


#sidebar-alt-widget h2 img{
    display:block
}
#sidebar-alt-widget li{zoom:1.0}

</style>
<!-- javascript -->
<!--[if lt IE 7]>
<script defer type="text/javascript" src="http://032b4a6.netsolhost.com/WordPress/wp-content/themes/lorem-ipsum/js/pngfix.js"></script>
<![endif]-->
<!-- favicon -->
<style type="text/css">
.easyrecipe {
    background-color : #f7f7f7;
    border : 1px dashed #000000;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://032b4a6.netsolhost.com/WordPress/wp-content/plugins/easyrecipe/easyrecipe.js?ver=1.0.1'></script>
<script type='text/javascript' src='http://032b4a6.netsolhost.com/WordPress/wp-content/plugins/sugar-slider/includes/js/jquery.sexyslider.js?ver=3.0.5'></script>
<script type='text/javascript' src='http://032b4a6.netsolhost.com/WordPress/wp-content/plugins/sugar-slider/includes/js/slidedeck.jquery.lite.js?ver=3.0.5'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://032b4a6.netsolhost.com/WordPress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://032b4a6.netsolhost.com/WordPress/wp-includes/wlwmanifest.xml" />
<link rel='index' title='wordpress' href='http://032b4a6.netsolhost.com/WordPress' />
<meta name="generator" content="WordPress 3.0.5" />
<!-- call Thickbox for Joliprint use -->
<style type="text/css">
.easyrecipe {
    background-color : #f7f7f7;
    border : 1px dashed #000000;
}
</style>
<script type='text/javascript'>
/* <![CDATA[ */
var thickboxL10n = {
    next: "Next >",
    prev: "< Prev",
    image: "Image",
    of: "of",
    close: "Close",
    noiframes: "This feature requires inline frames. You have iframes disabled or your browser does not support them."
};
try{convertEntities(thickboxL10n);}catch(e){};
/* ]]> */
</script>
<script type='text/javascript' src='http://032b4a6.netsolhost.com/WordPress/wp-includes/js/thickbox/thickbox.js?ver=3.1-20100407'></script>
<!-- End Thickbox for Joliprint use -->
<!-- begin Joliprint code (version 1.1.5) -->
<script type="text/javascript" src="http://api.joliprint.com/joliprint/js/joliprint.js" charset="ISO-8859-1" ></script>
<script type="text/javascript" src="http://032b4a6.netsolhost.com/WordPress/wp-content/plugins/joliprint/js/wp_joliprint.js" charset="ISO-8859-1" ></script>
<script type="text/javascript">var joliprint_site_url = 'http://032b4a6.netsolhost.com/WordPress';var joliprint_wnd_height = 400;</script>
<!-- end Joliprint code -->
<style type="text/css">
/* Sugar Slider Custom CSS */
            .ss-show-wrap {
    margin-top: 15px;
    margin-bottom: 0;
    border: 1px black solid;
}
.ss-show-wrap h2 {
    font-size: 16px;
    opacity:1.0;
    filter:alpha(opacity=100);
}
</style>
<style type="text/css">
.easyrecipe {
    background-color : #f7f7f7;
    border : 1px dashed #000000;
}
</style>
<!-- Wordpress Popular Posts v2.1.4 -->
<!-- End Wordpress Popular Posts v2.1.4 -->
</head>
<body>
<!-- START: wrapper -->
<div id="wrapper">
    <!-- START: header -->
    <div id="header"> <a style="float:left;" href="http://032b4a6.netsolhost.com" /><img src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/test.jpg" /></a>
        <h2 style="float:right;">Find the Perfect Activity</h2>
        <div style="clear: right; float:right;">
            <form method="get" id="searchform" action="http://032b4a6.netsolhost.com/WordPress/">
                <input type="text" value="" name="s" id="s" />
                <input type="submit" id="searchsubmit" value="Search" />
            </form>
        </div>
    </div>
    <div style="clear: both;"></div>
    <!-- END: header -->
    <!-- START: nav -->
    <div id="nav">
        <ul>
            <li><a href="http://032b4a6.netsolhost.com/WordPress">Home</a></li>
            <li class="page_item page-item-2"><a href="http://032b4a6.netsolhost.com/WordPress/about" title="About">About</a></li>
            <li class="page_item page-item-254"><a href="http://032b4a6.netsolhost.com/WordPress/parties" title="Parties">Parties</a></li>
            <li class="page_item page-item-257"><a href="http://032b4a6.netsolhost.com/WordPress/holidays" title="Holidays">Holidays</a></li>
            <li class="page_item page-item-260"><a href="http://032b4a6.netsolhost.com/WordPress/recipes" title="Recipes">Recipes</a></li>
            <li class="page_item page-item-262"><a href="http://032b4a6.netsolhost.com/WordPress/crafts" title="Crafts">Crafts</a></li>
            <li class="page_item page-item-264"><a href="http://032b4a6.netsolhost.com/WordPress/printables" title="Printables">Printables</a></li>
            <li class="page_item page-item-266"><a href="http://032b4a6.netsolhost.com/WordPress/educational" title="Educational">Educational</a></li>
            <li class="page_item page-item-268"><a href="http://032b4a6.netsolhost.com/WordPress/site-map" title="Site Map">Site Map</a></li>
        </ul>
    </div>
    <!-- END: nav -->
    <!-- START: content -->
    <div id="content">
        <!-- START: sidebar -->
        <div id="sidebar">
            <!-- START: sidebar-widget -->
            <p class="pposts">Popular Posts</p>
            <!-- Wordpress Popular Posts Plugin v2.1.4 [W] [all] [regular] -->
            <ul >
                <li id="wpp-3" class="widget popular-posts">
                    <ul>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/fathers-day-card" title="Father's Day Card"><span class="wpp-post-title">Father's Day Card</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/holidays" title="Holidays"><span class="wpp-post-title">Holidays</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/post-template-1-mod-2" title="Post Template #1(Mod3)"><span class="wpp-post-title">Post Template #1(...</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/wall-ball" title="Wall Ball"><span class="wpp-post-title">Wall Ball</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/irish-soda-bread" title="Irish Soda Bread"><span class="wpp-post-title">Irish Soda Bread</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/holidays/chinese-new-year" title="Chinese New Year"><span class="wpp-post-title">Chinese New Year</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/tug-of-war" title="Tug of War"><span class="wpp-post-title">Tug of War</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/recipes" title="Recipes"><span class="wpp-post-title">Recipes</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/crafts" title="Crafts"><span class="wpp-post-title">Crafts</span></a> </li>
                        <li><a href="http://032b4a6.netsolhost.com/WordPress/parties" title="Parties"><span class="wpp-post-title">Parties</span></a> </li>
                    </ul>
                </li>
                <!-- End Wordpress Popular Posts Plugin v2.1.4 -->
                <li id="text-3" class="widget widget_text">
                    <div class="textwidget">
                    <div id="ga1" style="margin-top: 10px;">
                    <script type="text/javascript"><!--
google_ad_client = "ca-pub-1205630963811834";
/* AFK-home */
google_ad_slot = "7814922637";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
                    <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                    <div></div>
                </li>
            </ul>
            <!-- START: sidebar-widget -->
        </div>
    </div>
    <!-- START: sidebar-alt -->
    <div id="sidebar-alt">
        <ul id="sidebar-alt-widget">
            <!-- START: sidebar-widget -->
            <li id="categoryposts-3" class="widget widget_categoryposts">
                <h2 class="widgettitle"><img src="http://jhsizemore.com/test/wp-content/uploads/2011/02/relatedpages.jpg"></h2>
                <ul>
                    <li class="cat-post-item"> <a class="post-title" href="http://032b4a6.netsolhost.com/WordPress/post-template-1-mod-2" rel="bookmark" title="Permanent link to Post Template #1(Mod3)">Post Template #1(Mod3)</a> <a href="http://032b4a6.netsolhost.com/WordPress/post-template-1-mod-2" title="Post Template #1(Mod3)"> <img width="60" height="59" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/110x110.jpg" class="attachment-cat_post_thumb_sizecategoryposts-3 wp-post-image" alt="110x110" title="110x110" /> </a>
                        <p>This text was placed in the post&#8217;s &#8220;excerpt box&#8221;. Text pasted in the Excerpt box does show in the post&#8217;s body.</p>
                    </li>
                    <li class="cat-post-item"> <a class="post-title" href="http://032b4a6.netsolhost.com/WordPress/valentines-day-coupon-book" rel="bookmark" title="Permanent link to Valentine&#8217;s Day Coupon Book">Valentine&#8217;s Day Coupon Book</a> <a href="http://032b4a6.netsolhost.com/WordPress/valentines-day-coupon-book" title="Valentine&#8217;s Day Coupon Book"> <img width="60" height="59" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/110x110.jpg" class="attachment-cat_post_thumb_sizecategoryposts-3 wp-post-image" alt="110x110" title="110x110" /> </a>
                        <p>This text was placed in the post&#8217;s &#8220;excerpt box&#8221;. Text pasted in the Excerpt box does show in the post&#8217;s body.</p>
                    </li>
                    <li class="cat-post-item"> <a class="post-title" href="http://032b4a6.netsolhost.com/WordPress/chinese-lanterns" rel="bookmark" title="Permanent link to Chinese Lanterns">Chinese Lanterns</a> <a href="http://032b4a6.netsolhost.com/WordPress/chinese-lanterns" title="Chinese Lanterns"> <img width="60" height="60" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/sm-Chinese-Lantern.jpg" class="attachment-cat_post_thumb_sizecategoryposts-3 wp-post-image" alt="Paper Chinese Lantern" title="Chinese Lantern" /> </a>
                        <p>Fun and festive, colorful Chinese Lanterns that are easy to assemble. Celebrate the Chinese New Year.</p>
                    </li>
                </ul>
            </li>
            <li id="text-4" class="widget widget_text">
                <div class="textwidget">
                    <script type="text/javascript"><!--
google_ad_client = "ca-pub-1205630963811834";
/* AFK300250 */
google_ad_slot = "3297487393";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
                    <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
                </div>
            </li>
        </ul>
        <!-- END: sidebar-widget -->
    </div>
    <!-- END: sidebar-alt -->
    <!-- START: content-article -->
    <div id="content-article">
        <div class="frontpage">
            <script type="text/javascript">
            //<![CDATA[
                jQuery.noConflict();
                jQuery(function($){

                    $('.ss-slider-2').SexySlider({
                        width     : 470,
                        height    : 225,
                        delay     : 4000,
                        auto      : true,
                        strips    : 15,
                        autopause : true,
                                                    navigation: '#ss-paginator-2',
                                                                                                                                onComplete    : function() { if (jQuery.browser.msie) { $(".ss-slider-2 .sexyslider-title").get(0).style.removeAttribute('filter'); } },
                            onTitleHide   : function() { $('.ss-slider-2 .sexyslider-title').css({'height':0}).animate({'height':34}, { queue:false, duration:700 });},
                            onTitleShow   : function() { if (jQuery.browser.msie) { $('.ss-slider-2 .sexyslider-title').get(0).style.removeAttribute('filter'); } },
                                            
                        effect    : 'random'
                    });
                    // gets the required width of the ul container
                    var dots = $('.ss-slider-controls-wrap-2 div a').size();
                    $('.ss-slider-controls-wrap-2 div').width(8*dots+(dots*6));
                });
            //]]> 
        </script>
            <style type="text/css">
            .ss-slider-2, 
            #ss-show-wrap-2        {
                width: 470px!important;
                height: 225px!important;
            }
                        .ss-slider-controls-wrap-2    {
                                top: 8px!important;
                                left: 5px!important;
                            }
            .ss-slider-controls-2-wrap div    {
                            }
                        #ss-paginator-2    {
                width: 470px!important;
                                top: 96.5px;
                                                            }
                        #ss-show-wrap-2 .sexyslider-title    {
                bottom: 0px!important;
                                width: 460px;
                            }        
            #ss-paginator-2 a    {
                            }
                        #ss-paginator-2 a span    {
                display: none!important;
            }
                    </style>
            <div class="ss-show-wrap" id="ss-show-wrap-2">
                <div class="ss-paginator gray_arrow" id="ss-paginator-2"></div>
                <div class="ss-slider ss-slider-2"><img src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/valebtines.jpg" class="ss-preview-image" id="image_4" alt="<h2 >Welcome to Activities For Kids</h1>"/><img src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/shamrock-front.jpg" class="ss-preview-image" id="image_7" alt="<h2 >Holiday Feature: 5 Olde Irish Tales to Tell on St. Patties Day</h1>"/><img src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/thanksgivingfront.jpg" class="ss-preview-image" id="image_8" alt="<h2>Bountiful Harvest: How to Build Your Own Cornucopia</h5>"/></div>
            </div>
            <h5>Recent Posts</h5>
            <!-- The Post Thumbnail function is active by default, but this line of php will make it display. -->
            <!-- Post Thumbnail Ends -->
            <div class="post" id="post-646"> <small>March 31st</small>
                <h2 class="posttitle"><a href="http://032b4a6.netsolhost.com/WordPress/recipe-test-post" rel="bookmark" title="Permanent Link to Recipe Test Post">Recipe Test Post</a></h2>
                <div class="entry">
                    <p>Tweet Yield: 1 loaf Serves: 6 Serving Size: 2 slices Prep time: 15 minutes Cook time: 45 minutes // Ingredients: 4 c all-purpose flour 1 tsp baking soda 1 tsp salt 1 ¼ c buttermilk* ¼ c butter, melted Directions: Preheat oven to 425. Mix melted butter and ¼ c of buttermilk. Set aside for [...]</p>
                    <div class="read_more"><a href="http://032b4a6.netsolhost.com/WordPress/recipe-test-post"> Read More >> </a></div>
                </div>
                <!--    <p class="postmetadata"> Posted in <a href="http://032b4a6.netsolhost.com/WordPress/category/uncategorized" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> |   <a href="http://032b4a6.netsolhost.com/WordPress/recipe-test-post#respond" title="Comment on Recipe Test Post">No Comments »</a></p> -->
            </div>
            <!-- The Post Thumbnail function is active by default, but this line of php will make it display. -->
            <div class="post" id="post-497"> <small>March 24th</small> <img width="110" height="110" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/03/isb1.jpg" class="alignleft post_thumbnail wp-post-image" alt="Irish Soda Bread" title="isb1" />
                <!-- Post Thumbnail Ends -->
                <h2 class="posttitle"><a href="http://032b4a6.netsolhost.com/WordPress/irish-soda-bread" rel="bookmark" title="Permanent Link to Irish Soda Bread">Irish Soda Bread</a></h2>
                <div class="entry">
                    <p>Traditional favorite for St. Patrick&#8217;s Day.<br />
                        Fun, hands on recipe to make with the kids.<br />
                        Only 5 ingredients &#8211; Delicious and easy to make. </p>
                    <div class="read_more"><a href="http://032b4a6.netsolhost.com/WordPress/irish-soda-bread"> Read More >> </a></div>
                </div>
                <!--    <p class="postmetadata">Tags: <a href="http://032b4a6.netsolhost.com/WordPress/tag/chinesenewyear" rel="tag">chinesenewyear</a>, <a href="http://032b4a6.netsolhost.com/WordPress/tag/irish-recipes" rel="tag">irish recipes</a>, <a href="http://032b4a6.netsolhost.com/WordPress/tag/irish-soda-bread" rel="tag">irish soda bread</a>, <a href="http://032b4a6.netsolhost.com/WordPress/tag/stpatricksday" rel="tag">stpatricksday</a><br /> Posted in <a href="http://032b4a6.netsolhost.com/WordPress/category/recipes" title="View all posts in Recipes" rel="category tag">Recipes</a>, <a href="http://032b4a6.netsolhost.com/WordPress/category/holidays/st-patricks-day" title="View all posts in St Patricks Day" rel="category tag">St Patricks Day</a> |   <a href="http://032b4a6.netsolhost.com/WordPress/irish-soda-bread#respond" title="Comment on Irish Soda Bread">No Comments »</a></p> -->
            </div>
            <!-- The Post Thumbnail function is active by default, but this line of php will make it display. -->
            <!-- Post Thumbnail Ends -->
            <div class="post" id="post-442"> <small>March 11th</small> <img width="110" height="110" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/110x110.gif" class="alignleft post_thumbnail wp-post-image" alt="110x110" title="110x110" />
                <h2 class="posttitle"><a href="http://032b4a6.netsolhost.com/WordPress/march-blog" rel="bookmark" title="Permanent Link to March Blog">March Blog</a></h2>
                <div class="entry">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="read_more"><a href="http://032b4a6.netsolhost.com/WordPress/march-blog"> Read More >> </a></div>
                </div>
                <!--    <p class="postmetadata">Tags: <a href="http://032b4a6.netsolhost.com/WordPress/tag/garbage-post" rel="tag">garbage post</a><br /> Posted in <a href="http://032b4a6.netsolhost.com/WordPress/category/uncategorized" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> |   <a href="http://032b4a6.netsolhost.com/WordPress/march-blog#respond" title="Comment on March Blog">No Comments »</a></p> -->
            </div>
            <!-- The Post Thumbnail function is active by default, but this line of php will make it display. -->
            <div class="post" id="post-203"> <small>February 12th</small> <img width="200" height="160" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/fathers-day-card.jpg" class="alignleft post_thumbnail wp-post-image" alt="Father's Day Card" title="fathers-day-card" />
                <!-- Post Thumbnail Ends -->
                <h2 class="posttitle"><a href="http://032b4a6.netsolhost.com/WordPress/fathers-day-card" rel="bookmark" title="Permanent Link to Father&#8217;s Day Card">Father&#8217;s Day Card</a></h2>
                <div class="entry">
                    <p>Excerpt box text that should show up on the home page. </p>
                    <div class="read_more"><a href="http://032b4a6.netsolhost.com/WordPress/fathers-day-card"> Read More >> </a></div>
                </div>
                <!--    <p class="postmetadata">Tags: <a href="http://032b4a6.netsolhost.com/WordPress/tag/fathers-day-2" rel="tag">fathers day</a><br /> Posted in <a href="http://032b4a6.netsolhost.com/WordPress/category/uncategorized" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> |   <a href="http://032b4a6.netsolhost.com/WordPress/fathers-day-card#respond" title="Comment on Father&#8217;s Day Card">No Comments »</a></p> -->
            </div>
            <!-- The Post Thumbnail function is active by default, but this line of php will make it display. -->
            <div class="post" id="post-201"> <small>February 11th</small> <img width="110" height="110" src="http://032b4a6.netsolhost.com/WordPress/wp-content/uploads/2011/02/110x110.jpg" class="alignleft post_thumbnail wp-post-image" alt="110x110" title="110x110" />
                <!-- Post Thumbnail Ends -->
                <h2 class="posttitle"><a href="http://032b4a6.netsolhost.com/WordPress/print-test" rel="bookmark" title="Permanent Link to Print Test">Print Test</a></h2>
                <div class="entry">
                    <p>This text was placed in the post&#8217;s &#8220;excerpt box&#8221;. Text pasted in the Excerpt box does show in the post&#8217;s body.</p>
                    <div class="read_more"><a href="http://032b4a6.netsolhost.com/WordPress/print-test"> Read More >> </a></div>
                </div>
                <!--    <p class="postmetadata"> Posted in <a href="http://032b4a6.netsolhost.com/WordPress/category/uncategorized" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> |   <a href="http://032b4a6.netsolhost.com/WordPress/print-test#respond" title="Comment on Print Test">No Comments »</a></p> -->
            </div>
        </div>
    </div>
    <!-- END: content -->
    <div class="clearall"></div>
    <!-- START: footer -->
    <div id="footer">
        <p> &copy; Copyright 2011 wordpress &mdash; <a href="http://wordpress.org/" title="Wordpress">Wordpress</a> Theme &mdash; <a href="http://www.letsmint.com/themes/lorem-ipsum/" title="Lorem Ipsum">Lorem Ipsum</a> &mdash;
            Subscribe to <a href="http://032b4a6.netsolhost.com/WordPress/feed" title="Articles (RSS)">Articles (RSS)</a> or the <a href="http://032b4a6.netsolhost.com/WordPress/comments/feed" title="Comments (RSS)">Comments (RSS)</a> </p>
    </div>
    <!-- END: footer -->
</div>
<!-- END: wrapper -->
</body>
</html>


Sorry, if it’s not much help :frowning:

I have again implemented your suggested changes and they have been quite helpful.

I have access to all of the site’s code, so I was able to move around the PHP to bring the post block closer in line with what you have suggested.

Structurally, it now looks more sound, though it is still have an problem with the date and “read more” being outside of the post box and, for some reason, the posts with images are not displaying their excerpts.

I’m pretty sure one of the problems is how I’ve chosen to handle the “Read More” button. I really want it to display in the bottom right hand corner of each post box, but the only way I’ve been able to accomplish that is by placing the PHP outside the Post box and positioning it relative. This, it seems, is causing a problem with the box width in IE.

I looked around your site and I did not see a tip jar. Do you have one? You have been very helpful and I’d like to acknowledge that beyond just saying so.

Hi,

You still have some conflicting rules for IE.

Try something like this:


div#content-article .post{width:467px!important;}
.read_more {
    font: bold 15px/normal 'Comic Sans MS';
    position:absolute;
    float:none;
    margin:98px 0 0 360px;
}
.post small {
    color:#A6A6A6;
    float:right;
    height:5px;
    position: relative;
    /*left: 95px;*/
    margin:0 5px 0 0;
}


The read more is absolutely placed as that is the only way to make sure it is in the same place but the drawback is that you must make sure your content never overlaps it.

You have a fixed height on that element anyway so must have some sort of character limit in place anyway. If you don’t then you would need to change the design to be a fluid height otherwise if you have more content it will overflow.

(I am around for a few hours tomorrow evening and then I am away for 10 days)

The tip about !important is awesome, I didn’t even know about that.

It took me a little while to get your suggested changes to work. I had to move around the PHP element and I changed up a couple other things, I’m not exactly sure how I made it jive.

Initially, I had the same problem that steered me away from using absolute: the “read more” links were placed against the left side of the browser window.

There are one or two quirks still, but I think I’ll be able to work them out or live with them.

Thanks for everything. I think that’s it unless you have other suggestions about pitfalls that I’m not seeing.

Now I’ve been steering clear of wordpress related problems because, well… between the nonsensical ENDLESS classes for nothing, redundant/pointless title attributes, absolute URL’s for no good reason, scripting for nothing, automatic comment generation in places where it can trip rendering bugs in BOTH FF and IE, and general rubbish associated with turdpress themes… Sites built in it are such a train wreck I cannot have kind words for it.

But on a lark, let’s see what I can see APART from the usual “issues”.

Ok, your first heading is a H2 so the heading order is nonsensical right out of the gate, I’m seeing empty H2’s – oh wait, images only so it has no graceful degradation and presentational images in the markup… I see presentation like floats in the markup for no good reason, extra DIV’s and classes that serve NO purpose like #header and #nav, clearing DIV like it was 1998, lists around elements that having headings and content do not warrant lists, h2 doing a LEGEND or LABEL’s job, invalid/poor accessibility on the form, giant bloated jquery script nonsense that doesn’t even run here (explains that giant blank spot on the home page – stupid animated nonsense)…

… which brings us to how all your articles are broken and overlapping each-other because you tried to fix the height of the home page article boxes… which breaks MISERABLY for large font/120dpi users.

Which all explains the 24k of markup to deliver less than 2k of plaintext content; basically using two or three times as much HTML as necessary on such a simple layout.

… and that’s before we talk the issue you’re having, that stems more from broken methodologies than a problem with floats themselves.

So, step one, clean up the markup… and get the scripting nonsense out of there until it’s working, THEN add it back in if desired. (I wouldn’t). Unfortunately being turdpress you’re stuck with such a convoluted MESS for markup it’s a miracle it works at all. (seriously, how the devil do people put up with wordpress’ manure?)

Huh, digging through it that “popular posts” plugin is vomiting up SERIOUSLY invalid markup while at it… like LI that aren’t even inside a UL. Surprised it’s only throwing 11 validation errors… I suspect the validator is throwing up it’s hands and saying “oh well, too many” as you fix one, it’s gonna add ten more.

Wait, the entire COLUMNS are inside LI? And you’re wondering why you’re having float problems?!? Change those to DIV. LI can’t be trusted for floats in the first place unless you fix their height!

That image banner thing is a disaster too – arbitrary heading levels on non-heading elements, tags inside alt text, Christmas on a cracker what a wreck… it’s even doing nonsense like opening H2 and closing h1… opens a h2 closes a h5, wow… Nothing like hiding invalid markup in alt tags.

… ok, stripping out all the garbage and rewriting it with semantic markup that actually makes SENSE, the HTML for that page should look more like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<link
	rel="start"
	href="/WordPress"
	title="Home"
/>

<link
	rel="alternate"
	type="application/rss+xml"
	href="/WordPress/feed"
	title="wordpress RSS Feed"
/>

<link
	rel="pingback"
	href="/WordPress/xmlrpc.php"
/>

<link
	rel="EditURI"
	type="application/rsd+xml"
	title="RSD"
	href="/WordPress/xmlrpc.php?rsd"
/>

<link
	rel="wlwmanifest"
	type="application/wlwmanifest+xml"
	href="/WordPress/wp-includes/wlwmanifest.xml"
/>

<link
	rel="index"
	title="wordpress"
	href="/WordPress"
/>

<title>
	Activities for Kids
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		<a href="/">
			Activities for Kids
			<span><!-- image replacement --></span>
		</a>
	</h1>

	<form method="get" id="searchform" action="/WordPress/">
		<fieldset>
			<label>Find the Perfect Activity</label>
			<input type="text" value="" name="s" id="s" />
			<input type="submit" id="searchsubmit" value="Search" />
		</fieldset>
	</form>

	<ul id="mainMenu">
		<li><a href="/WordPress">Home</a></li>
		<li><a href="/WordPress/about">About</a></li>
		<li><a href="/WordPress/parties">Parties</a></li>
		<li><a href="/WordPress/holidays">Holidays</a></li>
		<li><a href="/WordPress/recipes">Recipes</a></li>
		<li><a href="/WordPress/crafts">Crafts</a></li>
		<li><a href="/WordPress/printables">Printables</a></li>
		<li><a href="/WordPress/educational">Educational</a></li>
		<li><a href="/WordPress/site-map" title="Site Map">Site Map</a></li>
	</ul>

	<div id="firstSideBar">

		<div class="popularPosts">
			<h2>
				Popular Posts
				<span><!-- image replacement --></span>
			</h2>
			<ul>
				<li><a href="/WordPress/fathers-day-card" title="Father&#039;s Day Card"><span class="wpp-post-title">Father&#039;s Day Card</span></a> </li>
				<li><a href="/WordPress/holidays" title="Holidays"><span class="wpp-post-title">Holidays</span></a> </li>
				<li><a href="/WordPress/post-template-1-mod-2" title="Post Template #1(Mod3)"><span class="wpp-post-title">Post Template #1(...</span></a> </li>
				<li><a href="/WordPress/3-ingredient-peanut-butter-cookies" title="3 Ingredient Peanut Butter Cookies"><span class="wpp-post-title">3 Ingredient Pean...</span></a> </li>
				<li><a href="/WordPress/irish-soda-bread" title="Irish Soda Bread"><span class="wpp-post-title">Irish Soda Bread</span></a> </li>
				<li><a href="/WordPress/wall-ball" title="Wall Ball"><span class="wpp-post-title">Wall Ball</span></a> </li>
				<li><a href="/WordPress/holidays/chinese-new-year" title="Chinese New Year"><span class="wpp-post-title">Chinese New Year</span></a> </li>
				<li><a href="/WordPress/tug-of-war" title="Tug of War"><span class="wpp-post-title">Tug of War</span></a> </li>
				<li><a href="/WordPress/recipes" title="Recipes"><span class="wpp-post-title">Recipes</span></a> </li>
				<li><a href="/WordPress/crafts" title="Crafts"><span class="wpp-post-title">Crafts</span></a> </li>
			</ul>
		<!-- .popularPosts --></div>

		<div class="googleSkyscraperAd">
			<script type="text/javascript"><!--
				google_ad_client = "ca-pub-1205630963811834";
				/* AFK-home */
				google_ad_slot = "7814922637";
				google_ad_width = 160;
				google_ad_height = 600;
				//-->
			</script>
			<script
				type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
			></script>
		<!-- .googleSkyscraperAd --></div>

	<!-- #firstSideBar --></div>

	<div id="secondSideBar">

		<div class="relatedPages">

			<h2>
				Related Pages
				<span><!-- image replacement --></span>
			</h2>

			<div class="subSection">
				<h3>
					<a href="/WordPress/post-template-1-mod-2">
						<img
							src="/WordPress/wp-content/uploads/2011/02/110x110.jpg"
							alt="Placeholder Image"
							width="60" height="59"
						/>
						Post Template #1(Mod3)
					</a>
				</h3>
				<p>
					This text was placed in the post&#8217;s &#8220;excerpt box&#8221;. Text pasted in the Excerpt box does show in the post&#8217;s body.
				</p>
			<!-- .subSection --></div>

			<div class="subSection">
				<h3>
					<a href="/WordPress/valentines-day-coupon-book">
						<img
							src="/WordPress/wp-content/uploads/2011/02/110x110.jpg"
							alt="Placeholder Image"
							width="60" height="59"
						/>
						Valentine&#8217;s Day Coupon Book
					</a>
				</h3>
				<p>
					This text was placed in the post&#8217;s "excerpt box". Text pasted in the Excerpt box does show in the post&#8217;s body.
				</p>
			<!-- .subSection --></div>

			<div class="subSection">
				<h3>
					<a href="/WordPress/chinese-lanterns">
						<img
							width="60" height="60"
							src="/WordPress/wp-content/uploads/2011/02/sm-Chinese-Lantern.jpg"
							alt="Paper Chinese Lantern"
						/>
						Chinese Lanterns
					</a>
				</h3>
				<p>
					Fun and festive, colorful Chinese Lanterns that are easy to assemble. Celebrate the Chinese New Year.
				</p>
			<!-- .subSection --></div>

		<!-- #relatedPages --></div>

		<div class="googleAdvert">
			<script type="text/javascript"><!--
				google_ad_client = "ca-pub-1205630963811834";
				/* AFK300250 */
				google_ad_slot = "3297487393";
				google_ad_width = 300;
				google_ad_height = 250;
				//-->
			</script>
			<script
				type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
			></script>
		<!-- .googleAdvert --></div>

	<!-- #secondSideBar --></div>

	<div id="content">

		<div id="slideShow">
			<img
				src="/WordPress/wp-content/uploads/2011/02/shamrock-front.jpg"
				alt="Holiday Feature: 5 Olde Irish Tales to Tell on St. Patties Day"
			/>
			<img
				src="/WordPress/wp-content/uploads/2011/02/thanksgivingfront.jpg"
				alt="Bountiful Harvest: How to Build Your Own Cornucopia"
			/>
			<img
				src="/WordPress/wp-content/uploads/2011/04/banner-cookie-ingredients.jpg"
				alt="Cookie ingredients"
			/>
		<!-- #slideShow --></div>

		<div id="recentPosts">

			<h2>
				Recent Posts
				<span><!-- image replacement --></span>
			</h2>

			<div class="post" id="post-677">
				<img
					width="110" height="110"
					src="/WordPress/wp-content/uploads/2011/04/sqpnbc.jpg"
					alt="sqpnbc"
				/>
				<h3>
					<a href="/WordPress/3-ingredient-peanut-butter-cookies">3 Ingredient Peanut Butter Cookies</a>
					<small>April 5th</small>
				</h3>
				<p>
					Super Easy Peanut Butter Cookies.
					Egg, sugar and peanut butter make delicious cookies in minutes.
				</p>
				<a
					href="/WordPress/3-ingredient-peanut-butter-cookies"
					class="readMore"
				>Read More >></a>
			<!-- .post --></div>

			<div class="post nothumb" id="post-646">
				<h3>
					<a href="/WordPress/recipe-test-post">Recipe Test Post</a>
					<small>March 31st</small>
				</h3>
				<p>
			 		Tweet Yield: 1 loaf Serves: 6 Serving Size: 2 slices Prep time: 15 minutes Cook time: 45 minutes // Ingredients: 4 c all-purpose flour 1 tsp baking soda 1 tsp salt 1 ¼ c buttermilk* ¼ c butter, melted Directions: Preheat oven to 425. Mix melted butter and ¼ c of buttermilk. Set aside for [...]
			 </p>
				<a
					href="/WordPress/recipe-test-post"
					class="readMore"
				>Read More >></a>
			<!-- .post --></div>

			<div class="post" id="post-497">
				<img
					width="110" height="110"
					src="/WordPress/wp-content/uploads/2011/03/isb1.jpg"
					alt="Irish Soda Bread"
				/>
				<h3>
					<a href="/WordPress/irish-soda-bread">Irish Soda Bread</a>
					<small>March 24th</small>
				</h3>
				<p>
					Traditional favorite for St. Patrick&#8217;s Day. Fun, hands on recipe to make with the kids. Only 5 ingredients &#8211; Delicious and easy to make.
				</p>
				<a
					class="readMore"
					href="/WordPress/irish-soda-bread"
				>Read More >></a>
			<!-- .post --></div>

			<div class="post" id="post-442">
				<img
					width="110" height="110"
					src="/WordPress/wp-content/uploads/2011/02/110x110.gif"
					alt="placeholder"
				/>
				<h3>
					<a href="/WordPress/march-blog">March Blog</a>
					<small>March 11th</small>
				</h3>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				</p>
				<a
					href="/WordPress/march-blog"
					class="readMore"
				>Read More >></a>
			<!-- .post --></div>
			
			<div class="post" id="post-203">
				<img
					width="200" height="160"
					src="/WordPress/wp-content/uploads/2011/02/fathers-day-card.jpg"
					alt="Father's Day Card"
				/>
				<h3>
					<a href="/WordPress/fathers-day-card">Father&#8217;s Day Card</a>
					<small>February 12th</small>
				</h3>
				<a
					class="readMore"
					href="/WordPress/fathers-day-card"
				>Read More >></a>
			<!-- .post --></div>
			
		<!-- #recentPosts --></div>
		
	<!-- #content --></div>
	
	<div id="footer">
		&copy; 2011 wordpress &mdash;
		<a href="http://wordpress.org/">Wordpress</a> Theme &mdash;
		<a href="http://www.letsmint.com/themes/lorem-ipsum/">Lorem Ipsum</a> &mdash;
		Subscribe to <a href="/WordPress/feed">Articles (RSS)</a>
		or the <a href="/WordPress/comments/feed">Comments (RSS)</a>
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

</body></html>

Which is just under 10k – just to give you an idea how bad the markup you have is. Good luck bending wordpress over the table and making it your ****, which as I understand it is the only way to get it to output anything decent – especially when it comes to “plugins”.

Gah, wordpress and absolute URL’s and redundant titles – it’s worse than their “classes on EVERYTHING” bull. Just once I’d like to see something out of them that actually resembled an understanding of HTML elements.

deathshadow, thank you for your critique.

Most of the problems you cite stem from me not being aware of best practices. I thank you for filling me in.
I assume that, since you’ve already invested the time to write this, you’ll have a few moments to suffer a newb.

“h2 doing a LEGEND or LABEL’s job”
I’m unfamiliar with legends or labels and, as such, I’m unsure what job you’re referring to.

“invalid/poor accessibility on the form,”
I’m not sure what you are calling the form. The search, perhaps?

“giant bloated jquery script nonsense that doesn’t even run here (explains that giant blank spot on the home page – stupid animated nonsense)…”

So the slider did not render for you? Works in all of the browsers I checked. What browser are you using?
Perhaps animated sliders doesn’t suit your taste, but to each their own.

“which brings us to how all your articles are broken and overlapping each-other because you tried to fix the height of the home page article boxes… which breaks MISERABLY for large font/120dpi users.”

I was completely unaware of the needs of large font users. Again this renders just fine for me in IE6-9, FF and Chrome (save for a bug I currently render in IE8).

“That image banner thing is a disaster too – arbitrary heading levels on non-heading elements, tags inside alt text, Christmas on a cracker what a wreck… it’s even doing nonsense like opening H2 and closing h1… opens a h2 closes a h5, wow… Nothing like hiding invalid markup in alt tags.”

It took me a while to understand that all of this is in criticism of the “image banner,” but I’m unsure which element you are referring to.

For any of these questions I will gladly RTFM, if you could point me to where I can find that information or provide me with enough context to search for it.

And finally, and perhaps most importantly, what CMS do you recommend instead? I prefer Wordpress because I am often showing other people how to use the backend and it seems to be the most user-friendly. That’s a fairly important characteristic for me. If, for instance, there was a CMS that was perfect in every respect that you’ve mentioned, but it had an unforgiving, inaccessible backend, then it would not be the right one for me.