Support » Fixing WordPress » IE Image display problems

Viewing 15 replies - 1 through 15 (of 16 total)
  • I’m sorry to say but your code is just nasty. What do you use to write the post?

    Anyhow, the following could be the culprit.
    <p><center><a href="http://www.mattjonesblog.com/img/cubans.jpg"><img src="http://www.mattjonesblog.com/img/cubanssm.jpg" alt="Cubans"/></a><br />
    Dan, Sean, Greg, Chad, and I enjoying some fine Cubans and some fine company.</p>
    <p>
    </center></p>

    You have an error similar (not exactly this) to the following
    <p><center></p></center> WRONG

    The correct one would be
    <p><center></center></p>

    —-signature—
    Support my campaign
    http://wordpress.org/support/topic/22918

    Thread Starter matt510

    (@matt510)

    Heh, I am not surprised the code is messy, I am pretty new to all this. That being said, it isn’t the “center” align that is causing the problems, it is the “left” align. Even after fixing that, the problem remains.

    Hi
    your html code is a very very old one

    if you want to style ie h2 do this like this one:
    ‘<h2 style=”font-size:1.2em; text-align:center;”>’
    and every tag is like a box or a russian puppet you can’t close the biggest box and then close the little one in it 😉
    ‘<h2>(big box) <b>(little box) </b>(close the little box)</h2>(close the big box)’

    if you write
    ‘<h2><b> </h2></b>’
    you try to close the little after the big ..

    Monika

    Thread Starter matt510

    (@matt510)

    Thanks, but I cannot actually see where I have done that, I am usually pretty sure to close things in the correct order. the <h2> tag is used for headings (like the date) and are closed pretty quickely.

    Or are you suggesting making a new tag in CSS to use?

    And again, it isn’t the “center” image that is having problems, it is the “left” (or “right”) aligned images.

    I’m not saying that the “center” image that’s having problem; I’m saying that the way you code “center” may have caused the problem.

    Anyhow, the ill-formed code I mentioned is just the first, immediate one I saw; I haven’t look further.

    By the way, let me try one thing. If you delete the pair of <center> and </center> which center the first one, will the second image appear?

    —-signature—
    Support my campaign
    http://wordpress.org/support/topic/22918

    First, I think you need to resize your images. See this thread:
    http://wordpress.org/support/topic/32404

    Thread Starter matt510

    (@matt510)

    How would I center without using <center></center>?

    When they are removed, the image still does not appear.

    I am not too worried about an image resize. Anyone viewing 800×600 or higher wouldn’t get any overlap.

    Well, it was because the html validator says that center tags within p tags are illegal. Anyhow, the html validator reports a lot more invalidity, and because of my believe that invalid html could cause undesired page rendering, I have to stop helping you until you validate your html.

    Good luck

    —-signature—
    Support my campaign
    http://wordpress.org/support/topic/22918

    Thread Starter matt510

    (@matt510)

    I did validated the html (for the first time obviously!) and the only errors left are small things that I will have to weed out (my bad use of blockquote for example or external links that have odd strings) – EXCEPT for my “center” issue. What seems to be happening (maybe it is more) is when I write the post in wordpress it automatically inserts a “p” at the beginning of the post which means that the first lines ends up <center> which isn’t good. Any thoughs on that one?

    That being said, even if it is bad HTML, it still works and my main problem is still the issue that the “left”aligned image still does not show up in IE, regardless of what I do to <center>.

    try follow:
    ‘<span style=”text-align:center;”>’your image'</span>’

    or if you would like to have that the text “float” left or right next to your image
    ‘<span style=”float:left;”>’your image</span>

    Monika

    Thread Starter matt510

    (@matt510)

    Thanks for the suggestion! It worked in Firefox, but still will not show up in IE (it has a space for the image on the left, but it is not visible).

    take a look at your sourcecode
    in the near of
    ‘<h2>Saturday, May 28th, 2005</h2><div class=”centreblock”>
    ———————

    <div class=”storyContent”>
    ————> p center br /
    <img src=”http://www.mattjonesblog.com/img/cubanssm.jpg&#8221; alt=”Cubans”/>
    Dan, Sean, Greg, Chad, and I enjoying some fine Cubans and some fine company.
    ————-> /p /center&
    <span style=”float:left………..’

    repair this and then try it again…
    😉

    Monika

    Thread Starter matt510

    (@matt510)

    The problem is that first < p >, it is automatically put there by WordPress. Even when I write in < center > < p > and end it < /p > < center > WordPress forces an initial < p >: making it look like < p > < center > < p > – No idea how to deal with that.

    I really appreciate all your help!

    This is what I see as source code:
    <div class=”storyContent”>
    <center><img src=”http://www.mattjonesblog.com/img/cubanssm.jpg&#8221; alt=”Cubans”/>
    Dan, Sean, Greg, Chad, and I enjoying some fine Cubans and some fine company.
    </center>
    <span style=”float:left;”><img src=”http://www.mattjonesblog.com/img/dancubansm.jpg&#8221; alt=”Dan”/></span>

    Thread Starter matt510

    (@matt510)

    I figured it out (I think)! In css my main block used a “position: relative;” call and that was (in IE) causing the post to sit on top of the image. So by adding that to img in css, it fixed the problem!

    img {
    border-style: none;
    padding: 4px;
    position: relative;
    }

    Now I just have to work on cleaning up my coding! 😉

    Thanks for everyone’s help!

    This problem was driving me crazy until I figured a workaround. In IE 7 beta, the image would begin to load but then stop at some point. The top part was there but nothing below the break point. This occurred only when the image was aligned left or right, and text was running around it. Here’s what was going on

    A phrase that was in italics, or sometimes in bold, that fell across two lines was choking the sensitive little beta. I’ll give you an example. I will use the handy * to signal italics.

    Here is what the two lines would look like in the browser:

    Fido was a *very
    funny dog* that way.

    The code reads like this. I will spell out the code rather than risking having it display and be no help

    Fido was a [em-bracket]very funny dog[close em-bracket] that way.

    The image would stop displaying on the line that ended in “very.” This turns out to be helpful because if you’re managing a large site like I am, you can quickly go to the line that’s causing the problem. So here is how the code was corrected and the full image displayed:

    Fido was a [em-bracket]very[close em-bracket] [em-bracket]funny dog[close em-bracket] that way.

    Another thing that makes IE 7 choke is if the code runs against the word. So in places where I had a closing span or div or [/a], I would put a space. This isn’t always a problem but if the picture has stopped displaying and you’re not splitting a format command across two lines, check and see if that fixes the display.

    This took one sleepless night but it was worth it. I don’t think this is a problem limited to WordPress. It seems too generic. Microsoft will have to correct it if they want to compete with our beloved Firefox.

    Hope this helps someone.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘IE Image display problems’ is closed to new replies.