Comments Floating in Google Chrome

  • I am having a terrible time trying to get my comments to work in Google Chrome. For some reason, they want to float to the right of the navigation links at the foot of a single post.

    Here is an example: https://gate21.net/2009/04/03/walking-in-memphis-a-brief-reflection-on-reality-basketball-and-bruce-pearl%e2%80%a6/. The comments are the “.post” class which is excerpted below.

    Vertically, the comments are in the correct position. Horizontally, however, the comments always float immediately to the right of the “Older” posts link which is set at class “navigation” “.alignleft“, despite the fact that the “Newer” posts link follows that with “.alignright“. Thus, wherever the line ends for the “Older” posts <div>, the comments align (with padding) immediately to the right of it and then under the right sidebar off of the viewable area. Here is a link to a screencap showing what I am talking about (my comments are in green to show the problem) or you can see the problem by visiting this page in Chrome or any other post with comments.

    It works fine in FFox 3.0+ and in IE7+. I simply cannot figure out what is going wrong with it when displayed in Chrome.

    As a bit of disclosure of what I have already tried:

    • YES, I have run a validation check, and I am aware of some warnings, but most are plugin/widget generated (which I cannot fix), and the rest are syntax or non-critical issues (at least the best I can tell they are)
    • I have tried disabling plugins that I thought could be causing the problems (most notably WP-Gravatars), but that changed nothing
    • I have checked the code on my comment PHP, and my style sheet, and could not come up with any likely suspects, except maybe the post class which was entitled as “Contained Float Fix” in the original theme: The code for that is as follows:
      • /* ================ Contained Floats Fix ================ */

.post
{
/*display: none;*/
/*align: left;*/
display: block;
/*display:inherit;*/
overflow: hidden;
width: 98%;
/*white-space:normal;*/
}

      The commented out parameters are older settings that I used temporarily in the past, but no longer use.

      My Stylesheet lives here: https://gate21.net/wp-content/themes/21-ileather-10/style.css

      Any thoughts that anyone could give would be GREATLY appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)

  • 215 validation errors can’t be just shrugged off, in my experience. And you do have some serious nesting and missing tags errors in amongst all of the noise.

    Thread Starter lawvol

    (@lawvol)

    For what it is worth, I don’t disagree (and as a result of the issues here) I am trying to work through fixing them.

    Still, I cannot see anything in there which would cause these problems. Any ideas?

    Thread Starter lawvol

    (@lawvol)

    Okay, I got rid of around 100 validation errors which were due to missing alt=”_” attributes. Now I have around 130 I think — 99% of which come from embed codes (which I really can’t change) and from the Gravatars plugin (and fixing that is beyond me).

    Thus, any ideas on what might be causing the problems would be appreciated.

    You’ve got 2 CSS errors that need fixing. Just fix the top 2 if you can. Ignore the rest. They’re either not an issue or they’re being inserted by plugins – so beyond your control.

    Thread Starter lawvol

    (@lawvol)

    @ esmi: Thanks for the pointers — I sincerely appreciate your help, because this one has me stumped.

    At any rate, I went in and fixed the errors you noted, and a few others. Unfortunately, I am still getting the float.

    Any other ideas?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Comments Floating in Google Chrome’ is closed to new replies.