0

Here are the facts:

  • Wordpress Theme Parent: Pytheas (I'm using a child theme)
  • Site: http://longgame.org
  • I am a beginner. I'm still learning the basics of CSS.

My Problem:

On the front page, there is a group of five "Highlights" where I will inserting text. Note the following image (which depicts the leftmost two):

I can't figure out where this yellow-area is being generated

That yellow-highlighting denotes an area that I can't seem to remove. I've done the following:

  • Checked HTML element to confirm there's no accidental carriage return.
  • Deleted the thing, whereby the next item - the "About" blurb, 'slid over' and exhibited the same behavior.
  • Searched through my child theme in order to determine if I goofed up (undoubtedly the problem, but I can't find it).

I don't know when this started happening, but it's within the past few days that I've been trying my luck at all this Wordpressy stuff.

As I mentioned, I'm a beginner. Please let me know if I can provide further data to improve the odds of correcting this.

Thank you, in advance, for any recommendations you can offer.

EDIT: I was unsure what code, in particular was the culprit, especially since I wouldn't even know how to edit anything php-ish. I've simply never tried. :)

Anyway, perhaps this bit from the parent theme? It's from home-highlights.php - so let me know if I'm way off.

            <div class="grid-container clearfix">

    <?php
    $count=0; //set counter var
    foreach($hp_highlight_posts as $post) : setup_postdata($post); //start loop
    $count++; //increase counter var with each post in loop

    //meta
    $hp_highlights_url = get_post_meta($post->ID, 'wpex_hp_highlights_url', TRUE);
    $hp_highlights_icon = get_post_meta($post->ID, 'wpex_hp_highlights_icon', TRUE);
    ?>

    <div class="hp-highlight grid-5 <?php echo $post->ID; ?>"> 
        <h3>
            <?php
            //display icon if option not set to default
            if($hp_highlights_icon !='Select') { ?>
                <span class="wpex-icon-<?php echo $hp_highlights_icon; ?>"></span>
            <?php } //highlight meta option set to "Select" ?>
            <?php
            //show the highlight title as a link
            if(!empty($hp_highlights_url)) { ?><a href="<?php echo $hp_highlights_url; ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
            <?php }
            //show plain title because link option is blank
            else { the_title(); } ?>
        </h3>
        <?php
        //show the post content
        the_content(); ?>

Thank you for the etiquette feedback. I will do better next time. :)

FURTHER RESEARCH:

Is this related? : Why is &#65279; appearing in my HTML?

Community
  • 1
  • 1
DocBadwrench
  • 149
  • 1
  • 7
  • You forgot to post code. The code that generates the welcome grid would be helpful – Musa Apr 14 '13 at 20:00
  • So sorry. I didn't really know what bit of code to use. I've been searching and will amend this. – DocBadwrench Apr 14 '13 at 20:35
  • How are you adding these category descriptions that show up on the home page? Are they specific to the theme you're using (in the theme specific admin pages)? A widget? An extra field on a page or post? – Chris Budy Apr 15 '13 at 18:11
  • Here's a look: https://dl.dropboxusercontent.com/u/280909/Pytheas-Highlights-Problem.png – DocBadwrench Apr 15 '13 at 18:39

3 Answers3

3

You have some extra white spaces in between h3 tag and p tag ..try to remove those white spaces before this text <p>This the digital notebook of Matt Warren. Thanks for stopping by.</p>

Try to use Firebug

Your current HTML containing white spaces - 

<div class="hp-highlight grid-5 13699"> 
            <h3><span class="wpex-icon-home"></span>
                Welcome
            </h3>
            &#65279;<p>This the digital notebook of Matt Warren. Thanks for stopping by.</p>
        </div>

In the above code you have &#65279; that is the Unicode Character 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF).

I believe you copied the content from a different file/location which silently include those white spaces.

swapnesh
  • 26,318
  • 22
  • 94
  • 126
  • 1
    Thanks for your response. I'm still looking into this. I don't know exactly where I'd go to fix this (since it's in a Wordpress theme). But I will use this information to investigate. :) I'm quite a beginner. I have installed Firebug, though. Thanks for the recommend. I don't know why I haven't had that installed up to now. – DocBadwrench Apr 14 '13 at 20:24
  • @DocBadwrench How you are adding this text ? from wordpress editor or it is in the theme file..let me know the case then..and I will surely help u to investigate more – swapnesh Apr 15 '13 at 03:23
  • That's it. I'm *not* adding the text. It must be coming from some part of the theme (though why it didn't materialize before now, I don't know). I added some additional detail to the question that might be useful. – DocBadwrench Apr 15 '13 at 05:24
  • @DocBadwrench This text I believe is coming from the editor "This the digital...." ?? Just give a try by using trim() method like trim(the_content()); and let me know the case then :) – swapnesh Apr 15 '13 at 05:36
  • I've never done something like that, so I'll look up a tutorial and figure ol' *trim()* out. Thanks so much for the direction! – DocBadwrench Apr 15 '13 at 15:30
1

It seems the problem is in the content part. Try replacing "the_content()" with "trim(the_content())" in the very last line of your php.

If that fails the problem is in your php file rather than in your content. Try completely retyping the last three or so lines of the php snippet you quoted to eliminate accidental weird characters.

Daan Reid
  • 339
  • 2
  • 7
  • As soon as I get a chance, I will do that! I think that's what @swapnesh was telling me to do but I wasn't getting it. – DocBadwrench Apr 15 '13 at 19:10
  • I did make that change in the parent theme, but it didn't go away. I *did* remember to empty the page-cach and do a hard reload afterward. – DocBadwrench Apr 15 '13 at 19:36
0

I tried trim() -iming like crazy. No dice. Forunately, someone in the G+ Wordpress community provided a user-friendly comment that pointed the way to an answer:

Hi +Matt Warren , this looks to me like the extra space is somewhere in your widget code. I'm assuming you have created the various blocks in the header using custom text widgets? Look for spaces or line breaks there -> I'm sure you will find an unsuspecting space in front of the opening

tag. The index.htm files you are referring to are to keep would-be nosey-noseys from snooping around your files on your web server; they are meant to be that way.

While it was not a widget, it was my homepage: my empty homepage. Because it's not actually used. It's just a 'stand in' for the rest of the stuff that's actually at the homepage.

I deleted the homepage. Then I recreated it, went to the Reading Settings and re- set it as my homepage. Problem solved.

DocBadwrench
  • 149
  • 1
  • 7