Help! Problem with Image Margins in IE vs. Firefox

  • Resolved ericakadisco

    (@ericakadisco)


    17 years, 11 months ago

    Hi,

    I add images through the WordPress admin and align them either left or right. I would like padding on the left when they are aligned right and padding on the right when they are aligned left so that the text doesn’t touch the image itself.

    I have had some success. The site looks fine in Firefox but not in Internet Explorer (IE).

    Here is the site: https://approachanxiety.com

    For some reason, adding WordPress’s recommended code for this to my CSS file does not seem to work. Here is the code WordPress recommends:


    img.right { padding: 4px; margin: 0 0 2px 7px;
    display: inline; }
    img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
    .right { float: right; }
    .left { float: left; }

    Here is the relevant code in my CSS file:


    #content .articleimg {
    padding: 0px;
    margin: 3px 3px 1px 10px;
    display: inline;
    border: none;
    }
    #content .articleimgleft {
    padding: 0px;
    margin: 3px 10px 1px 3px;
    display: inline;
    border: none;
    }
    p img {
    padding: 0;
    max-width: 100%;
    }
    .alignright {
    float: right;
    }
    .alignleft {
    float: left;
    }
    img.alignright, img[align="right"] {
    padding: 0px;
    margin: 3px 3px 1px 10px;
    display: inline;
    border: none;
    }
    img.alignleft, img[align="left"] {
    padding: 0px;
    margin: 3px 10px 1px 3px;
    display: inline;
    border: none;
    }

    Yeah, I don’t know exactly what I’m doing, I’m just messing around with a template.

    Here is my CSS file:
    https://approachanxiety.com/wp-content/themes/Approach%20Anxiety/style.css

    Any help would be appreciated.

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

  • When you use the RTE to align something left or right it adds an attribute to the element the aligned text or image resides in. For example:

    <img align="left" src="https://image.com/image.jpg" />

    Your stylesheet is using a selector from the CSS3 specification to achive this:

    img[align=”left”]

    IE does not support CSS3. It only fully supports CSS1 and with minimal support for CSS2.

    In the future, you should instead add the class alignleft (this class is also in your stylesheet) to any image you want to be cross-broser compliant.

    Thread Starter ericakadisco

    (@ericakadisco)

    Ryan,

    Thanks for your help. I put it in my code and it works great!

    In the WordPress admin, there is a drop-down to align the picture left or right, but it does not put in the code for class=”alignleft”. Do you know if there’s any way to change the WordPress admin so that it automatically puts in that code so I don’t have to do it manually every time?

    Eric

    anyone???

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Help! Problem with Image Margins in IE vs. Firefox’ is closed to new replies.