Posted 3 years ago #
The text of my entries gets smaller and smaller with each addition. I've seen this problem a few times on here, but don't know enough about CSS/WP to fix it myself.
I don't use MS word, but do edit some of the content I paste into my other WP entries with DW.
Let me know if you need any of the theme codes. Thanks!
Posted 3 years ago #
Up..
Posted 3 years ago #
You need to provide a link to your site for anyone to see what you are talking about.
Posted 3 years ago #
Here is a screen shot of the problem. The text gets smaller with each entry, but appears normal when I go to the direct entry itself.
Posted 3 years ago #
A picture doesn't tell us anything about the code underneath. Without being able to go to your site and view source, it's hard to tell you what to do.
The problem is almost certainly in your theme's CSS. The font size for the text entries is being reduced using relative sizing (should look something like .8em or 80%) but, if the second entry is being displayed inside the first, the font size of the 2nd entry then ends up being "80% of 80%" etc. etc.
The end result is text that gets smaller and smaller with each additional entry.
You need to identify the elements enclosing this problem text and then check through your CSS file(s) for any font-size declarations that might apply to these elements. Try removing each declaration one at a time until you find the offending line.
Sorry to disagree but...
It is more likely to be a missing end div. So rather than checking through your css, check through your template file.
I usually find http://validator.w3.org/ to be useful if I have trouble spotting it.
Posted 3 years ago #
esmi,
Here is my CSS theme. Do you notice anything irregular?
body { font-family:'Verdana'; font-size:10px; }
#wrap { width:980px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#666; margin:0 auto; }
#header { height:56px; width:301px; position:relative; color:#000; margin-bottom:3px; float:left; padding:0; }
#header h1 { text-indent:-10000px; margin:0; padding:0; }
#header h1 a { display:block; background:url(images/logo.gif) no-repeat left top; height:56px; }
#search { margin-top:30px; float:right; padding:0; }
input#searchsubmit { background:#fc6; border:2px solid #f93; color:#333; font-size:13px; }
a:hover { text-decoration:none; color:#555353; border:none;}
.left { float:left; width:200px; border:3px solid #f3f3f3; margin:10px 0; padding:10px; }
.right { float:right; width:170px; border:3px solid #f3f3f3; margin:10px 0; padding:10px; }
.right img { border:0; display:block; margin-left:auto; margin-right:auto; }
.middle { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:718px; border:3px solid #f3f3f3; overflow:hidden; padding:10px; font-size:11px; }
.middle h2 { font-size:16px; border-bottom:dashed 1px #ccc; margin:0 7px 3px 0; padding:3px 0; }
.middle img { border:4px #eee solid; }
.ads { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:510px; border:3px solid #f3f3f3; text-align:center; padding:10px; }
.ads img { border:0; text-align:center; }
img.wp-smiley { border:0; padding:0; }
#footer { width:980px; margin-top:20px; text-align:center; clear:both; padding:10px; }
div.hr { height:3px; background:#fff url(images/hr.gif) repeat-x scroll center; clear:both; }
div.br { height:10px; background:#fff url(images/br.gif) repeat-x scroll center; clear:both; }
.alignright { float:right; }
.alignleft { float:left; }
.gcomment { border-left:none; vertical-align:middle; border-right:none; margin-bottom:3px; border-bottom:1px solid #f3f3f3; background-color:#F7F7F7; padding:3px; }
.ucomment { border-left:none; border-right:none; margin-bottom:3px; border-bottom:1px solid #f3f3f3; background-color:#fbfbf1; padding:3px; }
input#submit { background:#fc6; border:2px solid #f93; color:#fff; font-size:13px; }
ol.commentlist { margin:0 0 1px; padding:0; }
ol.commentlist li { list-style:none; margin:0; padding:13px 13px 1px; }
ol.commentlist li.commenthead { list-style:none; margin:0; }
ol.commentlist li.commenthead h2 { margin:0; }
span {}
.addthis { float:right; clear:both; }
a:link,a:active,a:visited { text-decoration:none; color:#416e90; border:none; }
.left h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.left ul,.right ul { list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.left ul li,.right ul li { list-style-type:none; margin:0 0 20px; padding:0; }
.left ul li ul,.right ul li ul { list-style-type:square; margin:0; padding:0 3px; }
.left ul li ul li,.right ul li ul li { list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.left ul li ul li :none
.right h2,.comments h3 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px; padding:3px 0; }
.right ul,.right ul { list-style-type:none; margin:0; padding:0; line-height:150%; font-size:11px; }
.right ul li,.right ul li { list-style-type:none; margin:0 0 20px; padding:0; }
.right ul li ul,.right ul li ul { list-style-type:square; margin:0; padding:0 3px; }
.right ul li ul li,.right ul li ul li { list-style-type:none; background:transparent url(images/bullet.gif) no-repeat 0 4px; border:0; margin:0; padding:0 0 2px 14px; }
.right ul li ul li :none
div.hr hr,div.br br { display:none; }
.middle2,.middle3 { margin-top:10px; line-height:16px; margin-left:10px; float:left; width:237px; border:3px solid #f3f3f3; overflow:hidden; padding:10px; }
.middle2 h2,.middle3 h2 { font-size:14px; border-bottom:dashed 1px #ccc; margin:0 7px 3px 0; padding:3px 0; }
.middle2 :hover,.middle3 :hover { background:#fafafa; }
.ucomment img,.addthis img { border:0; }
Posted 3 years ago #
Here's my page.php template file, is this the one you need to see? Sorry for my inexperience.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div class="middle">
<div align="center" style="padding:10px;">
</div>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
</div>
<div class="br"></div>
<?php endwhile; ?>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>a url of the site would make things far easier to figure out.
Posted 3 years ago #
Posted 3 years ago #
Ok, but I'm not seeing any page on the site where what you describe is happening.... (looking at it in Firefox). Can you tell us which page to look at?
Also, what browser are you viewing the site in? Sometimes things break in one browser but don't in another....
Posted 3 years ago #
Ugh, sorry guys. Here is the proper link.
Posted 3 years ago #
Anybody?
well... a few errors
Posted 3 years ago #
Here's a snippet of your code for individual posts:
<div id="post-475">
<h2><a href="[LINK DELETED]" rel="bookmark" title="Permanent Link to blah blah test">[TEXT DELETED]</a></h2>
<p><small>
<div class="entry">
<p>[TEXT DELETED]</p>
<p>[TEXT DELETED]</p>
<p>[TEXT DELETED]</p>
</div>There are things I immediately notice that are causing your problem. The first is that the opening DIV (id="post-475") is never closed. Furthermore, the class=entry DIV is wrapped inside a <p><small> that is also not closed.
So you have these nested <p><small> tags with no closing tags -- by nesting the SMALL tags, each post gets smaller and smaller.
You need to revisit your template and close those tags. There may be other errors (samboll's link above will help you find them), but these are almost certainly what is causing the increasingly tiny text.
I advise that you view your site in Firefox and install the Web Developer and/or Firebug plugins. They can be useful for understanding the structure of your page, and the CSS affecting it. And get a good HTML/CSS editor to view your code -- there are many free ones, so you can Google for this.
Posted 3 years ago #
By the way, the page.php template you post above seems to be fine from a cursory glance. The main post DIV is closed, and there are no <p><small> tags at all. So it's either being generated by another template in your heirarchy, or it has to do with cutting and pasting from another source (e.g. MS Word) that is bringing in extraneous codes.
I'm thinking, though, it's probably a different template, rather than a cutting-and-pasting issue -- the <p><small> tags occur OUTSIDE of the entry DIV, which contains your input from the WP Admin editor.
I replicated the issue in Chrome - but with all problems like this it is usually caused by a missing end tag - in this case it is specifically the </small> that is missing.
A validator is you friend.
Posted 3 years ago #
When you build a theme, you should check as you go with the validator. Elfin was kind enough to go through your code, but most who see the 54 errors will not bother.
Posted 3 years ago #
Thanks guys, I fixed the problem. It was indeed the unclosed small tags. The page has lots of errors, but I'm unsure as to how to fix them? Will the errors listed in the checker cause any severe problems?
Posted 3 years ago #
Validation is a useful tool -- invalid code may break the site in some browsers (so you need to test at least in the big 4 browsers currently in use: IE6 and IE7, Firefox and Safari), and may also cause issues for non-human readers (search engines, text readers for the visually impaired, etc.). Validity also helps ensure that your site will probably work in new versions of browsers as they come out in the future. You should therefore try to make your site as valid as you possibly can.
That said, it's worth learning which errors are minor and which are really important.
Things like failing to provide "alt" text for your images are fairly minor -- although conforming to this rule helps search engines and people who suppress images when surfing (low bandwidth, visually impaired, etc.).
Things like failing to close tags, having invalidly nested code, or using deprecated tags are major and may cause your site to break in some browsers, or in future browsers. You should definitely fix those.
(Others will disagree with me here and say that you should always make sure that your site has perfectly valid code.)
If you're going to be working on your own site, you will save a lot of headaches by learning basic HTML (fairly easy) and CSS (harder -- especially "positioning", i.e. layout).
There are lots and lots of HTML/XHTML guides online -- just make sure that your guide is fairly recent, because HTML has evolved over the years, with many tags becoming deprecated, and certain practices changing (e.g. use lowercase for tags; self-closing tags, etc.)
A great site to learn CSS is Westciv's Complete CSS Guide -- they offer paid tutorials, but the free stuff they have online is more than adequate to give you a thorough grounding.
Also, check out the Firefox extensions I mentioned above. And there are many good editors, both free and commercial, which will highlight your code in colors when you edit it, making it easier to see the structure, and many of which can validate your code as you work on it.
PS Do NOT use Microsoft FrontPage or Microsoft Word to create pages, and be wary of using any WYSIWYG tools to design web pages -- unless you are can check and fix the code such tools generate (visual editors are a useful tool, but not good to rely on).
This topic has been closed to new replies.
