Grow your CSS skills. Land your dream job.

Internet Explorer Float Issue?

  • # November 13, 2012 at 2:33 am

    Hello, CSS-Tricks! I’m sure many here can agree that Internet Explorer (IE 9 in my case) , in general, is pretty difficult to work with when it comes to CSS.

    I have, what appears to be, a float issue happening and I’m really not quite sure how to fix it. I’ve tried a variety of different properties/ values, but can’t seem to get it straightened out.

    The link to the issue is:
    http://www.nintendonerds.com/categories/wii-u/wii-u-gamepad-battery-replacement-is-easy-r678

    The bottom portion under the share links, there’s a section called “Other Articles.” In IE9, it looks like this:
    http://i.imgur.com/HdhD7.png

    In all other Browsers, it looks perfectly fine, like this:
    http://i.imgur.com/au6P8.jpg

    Any help is getting IE9 to obey like the other Browsers would be greatly appreciated.

    # November 13, 2012 at 4:22 am

    Maybe try and remove the

    position: relative;
    top: 10;

    And just add;

    margin: 10px 5px 0 0;

    # November 13, 2012 at 4:49 am

    Thank you for the quick response, Watson90!

    Unfortunately, that doesn’t seem to work.

    [Image Link](http://i192.photobucket.com/albums/z133/nintendonerds/ie9_a.png “”)

    This is what I have for the CSS:
    .random_articles_image {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 1px grey;
    float: left;
    height: 55px;
    margin: 10px 5px 0 0;
    /* margin-right: 5px; */
    /* position: relative; */
    /* top: 10px; */
    width: 100px;
    }

    EDIT: I apologize for the code formatting above. I couldn’t get the proper formatting.

    # November 13, 2012 at 5:11 am

    Yeah, I did a quick Inpect Element on Firefox & Chrome

    You also seem to have a

    Is this necessary? Maybe this could be breaking your layout…

    # November 13, 2012 at 5:19 am

    Are you referring to this?


    About the Author

    # November 13, 2012 at 5:19 am

    Are you referring to this?


    About the Author

    # November 13, 2012 at 5:20 am

    Are you referring to this?


    About the Author

    # November 13, 2012 at 5:21 am

    Man, I’m having a heck of a time with the formatting for this software, sorry about that.

    # November 13, 2012 at 5:21 am

    I would place each image and description in a div and float those

    # November 13, 2012 at 5:22 am

    No, that is fine, it looks like there is an empty

    tag under each

  • with the class of

    .random_articles

# November 13, 2012 at 5:23 am

So, six separate divs, with the same class?

# November 13, 2012 at 5:27 am

Maybe like a div with a class of box or something similar, make it a specific width and height and float it to the left, then on the inside float your image to the left and your description to the right and it should work fine…

# November 13, 2012 at 5:31 am

I removed that {br} you were talking about. I think it was unnecessary. I’ll try and do what you and Joni suggested.

# November 13, 2012 at 6:02 am

This is driving me wild, fellas. Could one of you perhaps, set something up for me to use?

# November 13, 2012 at 6:26 am

Maybe something like this? Obviously you’d need to change it to your code but you’ll get the general idea…

http://codepen.io/anon/pen/dKBAn

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".