WordPress.org

1. Will Taft
   Member
   Posted 5 years ago #
   

   This displays the date fine in Firefox, but does not display the date in IE. In IE, you can hover over the blank space where the date should display and click to the date link. It just does not visually display the date. I have tried a few things, but can't fix it. Can anyone see the problem?

   Thanks!
   -------------------

   <span class="date">
        <?php $arc_year = get_the_time('Y'); $arc_month = get_the_time('m'); $arc_day = get_the_time('d'); ?>
        <a>"><?php the_time('F jS, Y') ?></a> at <?php the_time('h:ia')?>
   </span>

2. whooami
   Member
   Posted 5 years ago #
   

   if the date displays fine in ff, there isnt anything wrong with the PHP

   Its a CSS issue, in other words.

3. Will Taft
   Member
   Posted 5 years ago #
   

   Thanks for that direction, whooami. I struggle with the learning curve of CSS much more than with PHP. Here is all that is in the orig. css for date. I tried a few things and managed to change how the date displayed in ff, but nothing I did got it to display in IE.

   Any suggestions?

   .date{
   float:left;
   font-weight:bold;
   }

4. pcmt
   Member
   Posted 5 years ago #
   

   Technically, when declaring a CSS float, you need to specify a width for the floated DIV (height is less important).

   .date{
   float:left;
   width:500px; // example
   font-weight:bold;
   }

5. Will Taft
   Member
   Posted 5 years ago #
   

   Thanks for your response, pcmt. I am trying my best to debug this, but no success yet. If you have any other ideas, keep them coming!

   One of the first things I tried was what you suggest. That gave me control of the width, but did not cause the date to be displayed in IE.

   What is strange is that the link is there, just invisible. As I said, I can hover over it and click through to all posts on a given date, you just can not see the text of the post date displayed on the screen. Frustrating!

6. Aleister
   Member
   Posted 5 years ago #
   

   Depending on how the divs are structured, adding a 'display: inline;' to a floated div can prevent certain bugs from occurring.

   Also, when using floats I find that using divs instead of spans can often work better.

7. Will Taft
   Member
   Posted 5 years ago #
   

   Thanks Aleister - I just tried a couple of ways to do what you suggest and was not successful. I think it is my mistake, however, as one of my attempts made the page display go blank.

   Are you able to give a more specific instruction to doing what you suggest either as an edit to the style sheet or the code quoted in my first post?

8. Aleister
   Member
   Posted 5 years ago #
   

   CSS bugs can be quite tricky - unless I see the entire page, I would not have much to go on. It is most likely not a problem with that block of code itself, but some conflict with it and the rest of the site.

   If you would like to post a link to that page I can take a look.

9. Will Taft
   Member
   Posted 5 years ago #
   

   Thanks! Here is a link to one page. Viewed in ff, it is fine, in IE, the date does not display. I also just noticed that the html I am using to change the initial letter of each post works fine in ff, but messes up the spacing of the first 2 lines in IE. But... that is another issue.

   I am starting to hate IE!!

   Thanks very much for your help.

   http://willtaft.com/organic-food/the-cotton-clothing-blues/

   btw: One of the attempts I just made to change from span to div in the single.php file DID allow the date to start displaying in IE. But it messed up the font size, formatting and bumped my sidebars to the bottom. I could not overcome those results, so it is now back to the original code.

10. Aleister
    Member
    Posted 5 years ago #
    

    The date shows up fine in IE7, just not IE6 (which is what most people mean by 'not working in IE' these days anyway *grin*). That whole section acts differently in every browser though.

    The first thing I see is that you are trying to float divs inside a P tag, which is never that great of an idea:

    <p class="meta">
    etc..

    I would first turn meta into a div. Then instead of using a single div to float the date left, use one for the left data, and one for the right, clearing after them. Something like this:

    <div class="meta">
    
    <div style="width:49%; float: left;">
      (post date code)
    </div>
    
    <div style="width: 49%; float: right;">
      (posted by, leave a comment, etc..)
    </div>
    
    <div style="clear:both;"><!-- --></div>
    
    (categories and trackback links here)
    
    </div> <!-- end of meta -->

    As for the size of the first letter of the post, you are doing this:

    <font color="#996600"><em><font face="Comic"><font size="6">A</font></font></em></font>

    CSS would handle this much better. Example:

    <span style="color: #996600; font-style: italic; font-size: 180%;">A</span>ccording

    Of course you could move that to a custom class within your CSS file, and just apply it like this:

    <span class="first-letter">A</span>ccording

    That should help take care of the line height issues as well. If not, you could experiment with the line-height property of that class.

11. Will Taft
    Member
    Posted 5 years ago #
    

    Thanks for the heads up on the IE7 vs 6. I still use 6, just to view my site in situations like this, and should change that right away.

    I will spend some time working through your other suggestions. It's a bit above my proficiency and I will probably stumble a bit, but that is how I learn best.

    Thanks again for the help and I'll post back with any further questions or, hopefully, news of success.

    -Will

    on edit: Your suggestion for using CSS to handle the first letter of the post works perfectly!

12. syncbox
    Member
    Posted 5 years ago #
    

    I don't understand why you are floating it in the first place. I'd change the meta paragraph to a div using that class and then use a list or paragraphs within for each line. OR, use line breaks. BTW, you are also using <br> in an xhtml document. It should be

    <div class="meta">
    <p>whatever you want here</p>
    <p>whatever you want here</p>
    <p>whatever you want here</p>
    <p>whatever you want here</p>
    </div>

    or keep it a paragraph, use linebreaks to get separate lines. OR, us an unordered list and list items (most semantically correct, imo)

    floating should be avoided unless it is the only thing that will do the trick. It's buggy, especially in IE browsers. Sometimes declaring position:relative helps (or can add other types of bugs, but hey, that the drawback of floating). I'd never use the display:inline like suggested by someone above. If anything, if you simply feel you MUST float a span, you should declare display:block and use a width.

    But none of that is even necessary. BTW, you can look at the generated source and see that the php is working. It is your css and markup that is the issue.

    HTH

13. Will Taft
    Member
    Posted 5 years ago #
    

    Thanks syncbox. What are you meaning, diffentiating between line breaks and <br>? I thought <br> was a line break?

    Except for some of the br's, the things you bring up are part of the authors original code. I probably am not good enough at this to make the changes you suggest, but I'll post the suggestions for the theme's author.

Topic Closed

This topic has been closed to new replies.