Auto height issues in Explorer

  • chickensalad

    (@chickensalad)


    14 years, 3 months ago

    Hi!

    I got a problem with IE,
    the code looks like this:

    <a href="<?php the_permalink(); ?>" rel="bookmark"> <img style="padding-bottom:20px;" src="<?php echo $postimageurl; ?>" alt="Post Pic" width="300" height="<?php echo get_post_meta($post->ID, "Height", true);?>" /> </a>

    And the problems is the height!
    Ive tried searching the forum and found a couple of threads who dealt with the same issue but found no solution.

    The thing IE does is that it squeezes the images vertically to a height of 1px. The same thing happens if I set the height to “auto”, but if I set the height to a fixed one, say 200px – it “works” just fine.

    The code works well in Firefox.

    Any one got a suggestion for a IE fix of this? (I use IE7)

    Cheers!

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

    (@esmi)

    14 years, 3 months ago

    Can you post a link to a page that uses this code?

    Thread Starter chickensalad

    (@chickensalad)

    14 years, 3 months ago

    Yes, of course!

    http://www.johangustavsson.com/wordpress

    esmi

    (@esmi)

    14 years, 3 months ago

    It’s not an IE-specific issue. There’s nothing in the image’s height attribute in Firefox either but FF appears to be calculating the image height correctly. Looks like your custom meta field is returning an empty string.

    Thread Starter chickensalad

    (@chickensalad)

    14 years, 3 months ago

    Hmm, that sounds bad.

    unfortunately I’m not so good at coding so I dont know what to do. But I guess the problem is more specified and thats good! Thank you very much esmi!

    Do you, or anyone else, have a solution or a hint that will push me in right direction of solving this problem?

    esmi

    (@esmi)

    14 years, 3 months ago

    Maybe if you dropped a copy of the code into WordPress pastebin and post the pastebin url here, someone will be able to spot the problem. Given that there’s nothing obviously wrong with the code you posted above, it could where you’re using it that’s the issue. Are you using a get_posts Loop, by any chance?

    Thread Starter chickensalad

    (@chickensalad)

    14 years, 3 months ago

    Ok, here it is!

    http://wordpress.pastebin.ca/1742087

    Yes, im using a get_posts Loop. I guess Im using three of them.

    (Note: credit for the code should go to neoian2, it’s his from the beginning. Im just trying to make if fit my purpose)

    Thread Starter chickensalad

    (@chickensalad)

    14 years, 3 months ago

    Im starting to think it has something to do with the CSS. So here is the CSS for the affected DIVs

    http://wordpress.pastebin.ca/1742149

    Thread Starter chickensalad

    (@chickensalad)

    14 years, 3 months ago

    Ok, I “solved” the problem.
    I just removed the “height” attribute form the img tag.

    So the code that calls for my post-img and resizing it to 300px width looks lite this:

    <a href="<?php the_permalink(); ?>" rel="bookmark"> <img style="padding-bottom:20px;" src="<?php echo $postimageurl; ?>" alt="<?php the_title(); ?>" width="300" />

    Is this a good solution or should I do something else?

    Cheers

    esmi

    (@esmi)

    14 years, 3 months ago

    It’s a valid solution. The only disadvantage is that the browser then has to download the image before it can correctly calculate the screen estate that the image will occupy – which can result in a very slight increase in the page rendering time and make the layout shift as the various objects are downloaded.

    I think the reason that you’re not picking up the height is that you’re using get_posts for that Loop. Unlike query_posts, you don’t get all of the post-related data unless you add the function setup_postdata() with the $post array as its argument.

    Try changing:

    <?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : start_wp(); ?>

    to

    <?php $posts = get_posts('numberposts=5&offset=0'); foreach ($posts as $post) : setup_postdata($post); ;start_wp(); ?>

    Thread Starter chickensalad

    (@chickensalad)

    14 years, 3 months ago

    I changed all the $post arrays to the one you suggested and kept the code
    height="<?php echo get_post_meta($post->ID, "Height", true);?>" in the IMG tag.

    Unfortunately it didn’t do the trick. The images are still squeezed vertically in IE 🙁

    s_ha_dum

    (@apljdi)

    14 years, 3 months ago

    Which IE on what OS? I don’t see any squeezed images. I should be seeing them here– http://www.johangustavsson.com/wordpress&#8211; right?

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Auto height issues in Explorer’ is closed to new replies.