display: inline-block problem in IE 8

  • Resolved hb2011

    (@hb2011)


    13 years, 7 months ago

    Hi,

    I’m having trouble with display: inline-block in IE 8.

    I use it to align four pictures in a row and it looks all right in Chrome.

    Now, after googling, I found a piece of code:

    { display:inline-block;
 zoom:1; /* IE 7 Hack starts here*/
 *display:inline;
}

    But, where do I add this code? In one of the (CSS-) files? I tried to use it in the HTML of my post, but there it won’t work.

    Thanks very much for all help! And possibly also for others, because there seems to be a lot for mozilla and joomla users on this subject, but not for wordpress users.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Yes, you’d add it to your CSS file… I can’t tell you what style ID/class it should modify without a link, though.

    Thread Starter hb2011

    (@hb2011)

    Thanks so far!
    It’s bazunder . com

    I looked in Chrome with ‘inspect element’ (I hope that’s the correct English term) and came across “element.style” but this phrase I cannot find in any of my style sheets. So I hope you can have a look.

    A little background info:
    I’m starting an eshop. However, since I’m not the actual seller of the products, I cannot use any of the WP plugins for shops, since I don’t have any use for a shopping cart/basket. It’ll become clear when you click on one of the pictures and then on the ‘meer info…’ button, you’ll see that you’re leaving my domain.

    element.style means the style is applied directly to the HTML tag within the page (<div style="display: inline-block;">) and is not located in the style.css or another external stylesheet.

    It could be hard-coded within the post, in which case you’d edit the HTML of your post and add the fix there.

    Or the code could be generated by a plugin or the theme itself, in which case you’d need to modify the output from the plugin or theme–not generally a good idea.

    If you can copy your code (PHP/HTML) for the problem area and put it over at pastebin, then share the link, I might be able to tell you more!

    Thread Starter hb2011

    (@hb2011)

    Thanks again, I copied it to pastebin: here’s the link

    Thread Starter hb2011

    (@hb2011)

    SOLVED, thanks to Doede.net

    Since that is in dutch here my update in English:
    After reading the valuable CSS basic information, I now fully understood what CSS is and how to use it.

    What I did, is I created the following function and pasted the code:

    .inlinepictures {
 display:inline-block;
 zoom:1; /* IE 7 Hack starts here*/
 *display:inline;
 }

    And, now, for every line where I used to have: <div style="display: inline-block;">, I replaced this with <inlinepictures>.

    Possibly if I give it a good try, I should be able to put more in the CSS for aligning my pictures and size et all, but that’s not the point here. The point is, my pictures now display correctly in IE8!

    …and I learned the basics of CSS, where I just used to google some code and paste it whereever my source said.

    Massive thanks, I hope this helps others as well

    PS. One strange thing is that on one of three pages where I used this, the whole <inlinepictures> has disappeared from the HTML, but it still works – for this reason, I will keep this thread open for a week, to see if problems arise.

    Thread Starter hb2011

    (@hb2011)

    No problems have arisen since.
    But still, the expression <inlinepictures> is now missing from all HTML pages. Still, I put this one on solved, so others can benefit.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘display: inline-block problem in IE 8’ is closed to new replies.