• Lester, how does one set padding to make page-navi behave in IE (or the other way around)?

    Currently, IE creates page number boxes that are far wider than they are tall.

    I’m guessing this may involve a complicated “width” setting, but I’m not sure how to go about it.

    Thanks.

Viewing 11 replies - 1 through 11 (of 11 total)
  • I can’t really help you on that as I am not good with CSS.

    If you post a link to your site, or show some example CSS, I can take a look.

    Thread Starter bobjones

    (@bobjones)

    Not good with CSS? Then why did you include a style sheet with the page-navi plugin?

    dbmartin: Check the stylesheet. If you’re using the plugin, check the output in IE. You should see the result.

    I’m not using the plugin, but I checked it out on the plugin site. From what I can tell, there is an HTML entity ( ) before and after each page number like so:

    <div class="wp-pagenavi">
      <span class="pages">&#8201;Page # of #&#8201;</span>
      <span class="current">&#8201;1&#8201;</span>
      <a href="" title="2">&#8201;2&#8201;</a>
      <a href="" >&raquo;</a>
      <span class="extend">&#8201;...&#8201;</span>
      <a href="" title="Last &raquo;">&#8201;Last &raquo;&#8201;</a>
    </div>

    IE doesn’t recognize &#8201; as a valid entity, so it’s replacing it with a hidden open-square bullet. See this page for reference (view it in IE). It (IE) is allowing space for this box, which is why you’re seeing unusually wide boxes around your numbers.

    Basically there’s two fixes:

    1. You can remove these entities in the wp-pagenavi.php file and then readjust your r&l padding in the CSS file (I tested and set them to 6px instead of 4px and it looked fine).
    2. You can create a separate CSS file for IE only and set the r&l padding to 0px.
    Thread Starter bobjones

    (@bobjones)

    dbmartin, you are a CSS scholar.

    I had allowed the automatic update for wp-pagenavi, and so did not realize that the new version has added the “thin space” code.

    Thanks for the correction.

    Lester: With all respect for your skill and generosity as a plugin designer, if you don’t know anything about CSS, why are you gumming up your work with obscure html symbol entities?

    Bad form!

    Thanks, I just realized that as well! I will fix it when I am back. BTW I am using IE7 and even though it shoes the html entities, it works fine for me.

    I just checked, the HTML entities is added to support RTL language by one of my users (I have no idea how does that works). The patch is submitted to me, personally I will not use HTML entities.

    Thread Starter bobjones

    (@bobjones)

    Hey, glad we could help out!

    Seriously, including a style sheet is a nice thing, but hard-coding a style with an html entity just creates confusion.

    Thanks to you for the plugin, and to dbmartin for locating the error.

    Thank you dbmartin!

    I’m having padding issues also. Just with the “Page # of #”.

    Everything else is padded correctly, but IE is ignoring the left padding on that box. And its also ignoring a left margin.

    But when I look at the plugin page here: http://lesterchan.net/wordpress/ That looks fine in IE.

    I made sure the plugin was updated (it wasnt, even tho the WP auto updater thing said it was – I’m done using that feature….) So I uninstalled and installed a new version.

    I also captured the CSS used on the plugin page and used that. And I also tried using 6/10px instead of 4. Still no change…

    Right padding works fine.

    http://clan-ngru.com/index/

    Any help is appreciated

    Edit: I got a left margin by just adding a .wp-pagenavi class to the CSS and putting a left margin on that. Still no go on the left padding tho.

    Is this still not fixed?

    I don’t think the thin space character “thin space” should be hardcoded into the plugin. Adding space around text is surely the job of CSS?

    The problem is that because of the thin space, the paging text is indented compare to everything else on the page. If you removed the thin space characters then you would have more control over the spacing of the text using css margin. For example:

    .pages { margin-right:20px; }

    Surely the thin space should be removed?

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

The topic ‘[Plugin: WP-PageNavi] Padding problem in IE’ is closed to new replies.