Need help? Check out our Support site, then


Blog Browser Issue

  1. writtininstone
    Member

    I love my blog and I have no problems with the design itself. It's only that I just realized that my blog has some browser issues.

    I usually only use Chrome and Safari, so it wasn't until today, when I checked on my site using Internet Explorer and then Firefox, that I realized that my pictures were totally off in the two latter browsers.

    I don't understand why that's happening. I tried to fix it with some HTML action, but that did absolutely nothing. I need help making my browser look like this:

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-07-at-9-31-54-pm1.png

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-07-at-9-52-25-pm.png

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-07-at-9-52-42-pm.png

    Instead of this:

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-07-at-9-30-49-pm.png (Notice how it's cut off on the side where my social icons are.)

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-07-at-9-31-01-pm.png

    and

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-07-at-9-31-09-pm.png

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-07-at-9-31-29-pm.png

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-07-at-9-31-33-pm.png

    (My pictures are all over the place and moving into my sidebar.)

    In all browsers.

    Can CSS help? Thank you in advice for your help.

    The blog I need help with is thinkwellinkwell.wordpress.com.

  2. Hi there,

    This isn't an issue with your CSS. If you strip all of your CSS and load your site in Firefox, the same problems persist. Rather, it's with your HTML tables.

    I would suggest removing all of those HTML tables and replacing them with galleries:
    http://en.support.wordpress.com/images/gallery/

    A gallery is a far better choice because it's formatted to display images consistently no matter what browser or device your blog is viewed in, and this doesn't shift if you change your theme.

    HTML tables, on the other hand, are fiddly and inconsistent and need to be manually adjusted every time you change anything.

    For the social icons being cut off a bit on the right in Firefox, adding 5 px to your sidebar max width fixes that:

    .site-main .sidebar-container {
    	max-width: 255px;
    	width: 100%;
    }
  3. writtininstone
    Member

    Thank you for your help.

    Unfortunately, the code didn't work to clear up the social media icons issue on Firefox.

    As far as the galleries, when I first created this blog I wanted to use galleries instead of tables, but galleries don't allow for links which is what my images are. They're links to other pages. If I'm able to add links to the images in my galleries, I would have absolutely no problem using galleries since, in the long and short run, they're much easier to manage.

    But not being able to link to the images without it being a caption, is a problem. If some CSS can clear up this issue, I'd be happy to use the galleries instead.

    If not, I need another option.

  4. No, it's not possible to do that with galleries. But I see that your Fanfiction page is displaying properly in all of my browsers now -- did you adjust the HTML tables?

    Also, the icons look fine to me in Firefox -- which version of Firefox are you using?

  5. I actually did some research on the issue and found a viable answer on another forum question. I used floated divs instead of an html table.

    This is the code I used:

    <div style="overflow:hidden;">
    <div style="float:left; margin-top:10px; text-align:center; width:25%;">
    <img height="112" width="150" title="IMG_TITLE" alt="IMG_HOVER_TEXT" src="IMG_URL?w=150&h=112" style="border:2px solid #CFCFCF;">
    </div>

    <div style="float:left; margin-top:10px; text-align:center; width:25%;">
    <img height="112" width="150" title="IMG_TITLE" alt="IMG_HOVER_TEXT" src="IMG_URL?w=150&h=112" style="border:2px solid #CFCFCF;">
    </div>

    <div style="float:left; margin-top:10px; text-align:center; width:25%;">
    <img height="112" width="150" title="IMG_TITLE" alt="IMG_HOVER_TEXT" src="IMG_URL?w=150&h=112" style="border:2px solid #CFCFCF;">
    </div>
    ...
    </div>
    <br style="clear:both; height:0;">

    It required a bit of tweaking, but it worked perfectly.

    Also, I'm using the latest version of Firefox ... and after checking it in that browser, it looks as though my social icon on the farthest side on the left is still getting cut off. I'm not sure why.

  6. @writtininstone, in FF 31.0 on my Mac, the social icons on your Fanfiction page do not appear cut off. Is that the page you are talking about?

    You can try adding a bit of left padding to #jp-post-flair and see if that will fix the issue, something like this:

    #jp-post-flair {
        padding-left: 5px;
    }
  7. writtininstone
    Member

    That didn't work.

    Gah, I'm really trying not to be difficult but I feel like I being that anyway.

    Here's a picture. I'm not quite sure why this is still happening.:

    https://thinkwellinkwell.files.wordpress.com/2014/08/screen-shot-2014-08-12-at-10-52-04-pm.png

    See what I mean? Now, I'm at the point where it doesn't matter a whole lot, but I'm curious. It doesn't happen in any other browser and I tried to decrease the overall size, but it literally just becomes smaller ... and the end of my deviant art social icon is still cut off.

    Any ideas on what it might be doing that?

  8. Ah, many thanks for the screenshot. Although I'm not seeing that in FF on my Mac, it helped me to see where the issue is. Add the following CSS and see if this doesn't take care of the issue for you.

    #text-21 td {
        padding-right: 0.7rem;
    }

    What is happening is that there is 1rem of right padding on td elements (table cells) and that is pushing the far right icon out of the right side of the text widget. To keep the above change from affecting other tables (such as one in the content area) I've limited this change to this particular text widget only.

  9. That ABSOLUTELY worked.

    Thank you much sir, you are a genius.

    God bless. ^^

  10. Yay! Thanks and you are welcome. :)

Topic Closed

This topic has been closed to new replies.

About this Topic