• Resolved inka-wolfy

    (@inka-wolfy)


    Hi all,
    I have a problem with images in posts that wrap around text. I created a post, inserted an image with align=right, added some text (with tag) and in Firefox everything looks fine.
    The same post however look different in IE. The text area is split in two, above and under the image.
    It seems that when I use ‘carriage return’ or ‘Enter’ in the post editor, the resulting tags are causing the a problem for IE.
    I know I can fix it by using <img class=”right”..> instead of <img “align=right”>, but what can I do without having to change the post html all the time?

    you can see the post here:
    https://journalperu.com/?p=1&#8243;

    help or input VERY MUCH appreciated!
    gracias

Viewing 12 replies - 1 through 12 (of 12 total)
  • I use the Image Manager plugin.
    https://soderlind.no/archives/2006/01/03/imagemanager-20/

    and without the wysiwyg editor. It screws up code.

    Thread Starter inka-wolfy

    (@inka-wolfy)

    samboll,
    thanks for the reply, that IS a handy tool!
    However, it doesn’t solve my problem. The problem is the tag handling in connection with aligned images.
    If there is text embedded in tags AFTER the image, IE shows a BIG white space in my post because it displays the text BELOW the image.
    Firefox handles it differently, the text and pic are displayed just the way I want it.
    I really don’t want to sift though all my posts with images and remove tags. Besides, I need them.

    Other suggestions?
    gracias

    Hmmm… mine renders fine in either. Maybe the difference in the way the theme handles it in the style.css? I use K2 and WP-Andreas09 on a lot of sites. No problems.

    Thread Starter inka-wolfy

    (@inka-wolfy)

    btw, I forgot to put the <p></p> in ‘code’. So whenever you see the word ‘tag’ in my previous entries, imagine the ‘p’ in front of it.
    It’s the ‘p’ tag that screws everything up in IE.

    samboll, do you have an example I can look at somewhere? As you noticed, I am using wp-andreas09 as well, and I’d like to see a post with several text paragraphs which include a floated image.

    OK, I used to have this same problem… here is how i fixed it…

    where ever you skip a line, be sure to place a &nbsp (make sure you end those &nbsp with a semicolon) on those lines, otherwise in IE it will push everything around and won’t look right…I haven’t have a problem yet since I started doing this…

    Thread Starter inka-wolfy

    (@inka-wolfy)

    Kahil,
    sure that will fix it as well. Are you using the new ‘rich text’ editor? If so, it would mean you create a post only to sift through its html before publishing it. Not very user-friendly, especially for those who are not well trained and experienced in writing code…
    This is one example where I give ‘blogger’ the edge, their editor doesn’t use ` tags…

    Nope, I turned that crap off… It was much less frustrating to just learn the basic tags rather than having to keep going back and back to fix things…

    Thread Starter inka-wolfy

    (@inka-wolfy)

    that’s what I thought.
    But even without the rich-text editor I have the SAME problem. Because WordPress by default puts the post text in <p></p> paragraph tags!! If you have floating images within those tags, things look ugly in Internet Explorer.

    Am I the only one with this problem??

    You can make some rules in your css file for this.
    /*————– floating pictures in itembody———— */
    .leftbox {
    float: left;
    margin-right: 10px;
    border: 1px solid #CED4CA;
    padding: 2px;
    text-align: center;
    background-color: #fff;
    }
    .leftbox img {
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #a9a9a9;
    padding: 4px;
    line-height:0px;
    }
    .rightbox {
    float: right;
    margin-left: 10px;

    border: 1px solid #CED4CA;
    padding: 2px;
    text-align: center;
    background-color: #fff;
    }
    .rightbox img {
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #CED4CA;
    padding: 4px;
    line-height:0px;
    }

    Thread Starter inka-wolfy

    (@inka-wolfy)

    well, I found a solution to my problem.
    This was caused by a bug in the stylesheet in the WP-Andreas09 theme.
    It will happen to anyone wo uses this theme.
    Find the following selectors in the style.css file:

    .entry, .entrytext {
    overflow: hidden;
    }

    * html .entry, * html .entrytext {
    overflow: visible;
    height: 1px;
    }

    * html .entry p, * html .entrytext p {
    width: 99%;
    overflow: hidden;
    }

    and then remove the spaces between the html and the class so that it looks
    like this;

    .entry, .entrytext {
    overflow: hidden;
    }

    * html.entry, * html.entrytext {
    overflow: visible;
    height: 1px;
    }

    * html.entry p, * html.entrytext p {
    width: 99%;
    overflow: hidden;
    }

    I was having this very same problem (with Andreas09) and I made the above correction, but now I have the problem in IE that the image from one post overlaps in the next post. I’d like the next post to be pushed down until the image stops, like in Firefox. Any ideas how to fix that?
    Thanks
    PS My site is https://www.uncoolkids.com if you want to see the difference in the two browsers.

    Ok, I tried playing with the above code and changed it to this:

    * html .entry, * html .entrytext {
    overflow: visible;
    height: 1px;
    }

    * html.entry p, * html.entrytext p {
    width: 99%;
    overflow: hidden;
    }

    (fixed it for html.entry p but not for html.entry)

    and now the images look the way I want.

    BUT my title and my borders are doing CRAZY thing in IE. they dissapear until scrolled over, only show up halfway, etc. It’s weird. somebody PLEASE tell me they’ve seen this before and know what to do, because I’m at a complete loss!!!!!

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Images and text in posts, differences in Firefox and IE’ is closed to new replies.