WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Firefox image and post problems (15 posts)

  1. reevo
    Member
    Posted 8 years ago #

    Hi all, I've just been editing my fies to allow me to wrap text around the images and everything is gone well using the Tamba2 guide @ http://www.tamba2.org.uk/wordpress/graphicalcss/align/index.html

    However, it's only working properly in Internet explorer and not Firefox where the posts start and finish at the beginning and end of the text while overlapping the images. Very odd.

    Could any Firefox users spread a little light on what on earth is going on please?!

    I'm guessing I need to add something to reinforce that the post should finish at the end of the image and not the end of the text?

    Here's the code for the latest post if that helps...

    '<span style="float:left;padding:5px;"><img src="http://www.ektopia.co.uk/ektopia/images/vroombox.jpg" width="268" height="190" alt="" title="" /></span> Now this is pretty exciting stuff. The VroomBox (currently in development) "utilizes a powerful microprocessor to digitally recreate the sound of your favourite muscle cars, and syncronize them to the engine in your own car. So when you step on the gas, you get the powerful roar of a '71 Barracuda, a Shelby Mustang, etc. It sounds so realistic, it will blow you (and the guy next to you) away." My 3 cylinder Corsa's gonna sound bitching when I get my hands on one of these! [via] '

    Thanks for looking in

  2. Mark (podz)
    Support Maven
    Posted 8 years ago #

    I just looked in FF and it looks just as it should.
    Tried a hard refresh ? ctrl-f5

  3. Mark (podz)
    Support Maven
    Posted 8 years ago #

    On a couple of posts, you have the image 'breaking through'.
    Try placing the <div id="clearer">&nbsp;</div> at the end of the text.

  4. reevo
    Member
    Posted 8 years ago #

    mmm, already tied ctrl/F5 with no joy. the clearer thing doesn't change it either.

    Maybe it's a FF version thing? I'm using 1.0.1

    Here's a link to what it looks like here...

    'http://www.ektopia.co.uk/ektopia/images/dodgyffpic.jpg' and that certainly ain't the way it should look!!!

    Cheers Podz

  5. Mark (podz)
    Support Maven
    Posted 8 years ago #

    That's breakthrough forcing things out of line.
    In your css, do you have this ?

    div.clearer {
    clear: left;
    line-height: 0;
    height: 0;
    }

  6. reevo
    Member
    Posted 8 years ago #

    I've just added more of the clearer divs to some of the other posts and they do stop the pictures "stacking sideways" like the ones at the bottom of the page. However, the line that goes underneath the whole post to signify its end is cutting through the images above. Very odd.

    I should also mention that it only does it when the page is vied quite wide so you won't see anything wrong if you're looking at it under 800px across; resize it though to make it bigger and all will become clear...nastily clear!

  7. Mark (podz)
    Support Maven
    Posted 8 years ago #

    I'm looking at 1024*768

    The clearer div should solve the problem - it's purpose is literally to clear everything before the next part starts.
    It's a case of trying it in a couple of places:
    Immediately after the image but before the text
    On the same line as the end of the text
    At the end of the text but on the next line.

    'fraid I can't test at higher than 800 width ..... :(

  8. reevo
    Member
    Posted 8 years ago #

    Podz, I do have that including in the CSS, I've just checked to make sure that it was saved and transfered to my theme's folder and it is.

    The altered code is now...

    '<span style="float:left;padding:5px;"><img src="http://www.ektopia.co.uk/ektopia/images/vroombox.jpg" width="268" height="190" alt="" title="" /></span> Now this is pretty exciting stuff. The VroomBox (currently in development) "utilizes a powerful microprocessor to digitally recreate the sound of your favourite muscle cars, and syncronize them to the engine in your own car. So when you step on the gas, you get the powerful roar of a '71 Barracuda, a Shelby Mustang, etc. It sounds so realistic, it will blow you (and the guy next to you) away." My 3 cylinder Corsa's gonna sound bitching when I get my hands on one of these! [via] <div id="clearer"> </div>'

    Have I put the clearer bit in the correct place?

  9. reevo
    Member
    Posted 8 years ago #

    I'll give those placements a try later, gotta go to work. Cheers fella

  10. Mark (podz)
    Support Maven
    Posted 8 years ago #

    Yes .... but why the span ?
    The page at T2 in the section marked "3. On the right with text wrap" has some CSS which is what I used when creating the page. Have you tried using that ?
    The drop shadow is not important and can be removed.

  11. reevo
    Member
    Posted 8 years ago #

    I used the span method becuase I wanted the image on the left. I guess you're saying that I can do the same thing but change 'float:right;' to 'float:left;'

    I'll give that a try. Thanks Podz

  12. Lorelle
    Member
    Posted 8 years ago #

  13. reevo
    Member
    Posted 8 years ago #


  14. reevo
    Member
    Posted 8 years ago #

    Nope, tried that and thought I had it but I was testing in IE which as we know already works!! Doh!

    I think I'll give it a miss for now and maybe try again when I update my theme to the v1.5 styled themes (using 1.2 style theme at the moment).

    Thanks for the input though people. Much appreciated.

  15. reevo
    Member
    Posted 8 years ago #

    Right, spent all evening transferring my old CSS and theme onto the new style 1.5 setup and it all works fine now with the Span thing. So, thanks again for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic