Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Internet Explorer Float Issue?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #40769
    k_mcminn
    Member

    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.

    #114134
    Watson90
    Member

    Maybe try and remove the

    position: relative;
    top: 10;

    And just add;

    margin: 10px 5px 0 0;

    #114136
    k_mcminn
    Member

    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.

    #114137
    Watson90
    Member

    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…

    #114142
    k_mcminn
    Member

    Are you referring to this?


    About the Author

    #114143
    k_mcminn
    Member

    Are you referring to this?


    About the Author

    #114145
    k_mcminn
    Member

    Are you referring to this?


    About the Author

    #114146
    k_mcminn
    Member

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

    #114147
    JoniGiuro
    Participant

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

    #114148
    Watson90
    Member

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

    tag under each

  • with the class of

    .random_articles

#114162
k_mcminn
Member

So, six separate divs, with the same class?

#114150
Watson90
Member

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…

#114153
k_mcminn
Member

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

#114131
k_mcminn
Member

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

#114132
Watson90
Member

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)
  • The forum ‘CSS’ is closed to new topics and replies.