Forums

k_mcminn

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.

Watson90

Maybe try and remove the

position: relative;
top: 10;

And just add;

margin: 10px 5px 0 0;

k_mcminn

Thank you for the quick response, Watson90!

Unfortunately, that doesn't seem to work.

Image Link

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.

Watson90

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

You also seem to have a

<br>

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

k_mcminn

Are you referring to this?

About the Author

k_mcminn

Are you referring to this?

<br class='clear' />

About the Author

k_mcminn

Are you referring to this?

<br class='clear' />

About the Author

k_mcminn

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

JoniGiuro

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

Watson90

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

<br>

tag under each

<li>

with the class of

.random_articles

k_mcminn

So, six separate divs, with the same class?

Watson90

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...

k_mcminn

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

k_mcminn

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

Watson90

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

k_mcminn

I'll give that a try! Thanks! :)

Senff

It looks bad in IE because your markup is wrong. You have something like this:

  <ul>
     <a href="..."><img src="...."><li class="random_articles"><a href="...">Text</a></li>
     <a href="..."><img src="...."><li class="random_articles"><a href="...">Text</a></li>
     <a href="..."><img src="...."><li class="random_articles"><a href="...">Text</a></li>
     .....
  </ul>

An unordered list (UL) can ONLY contain listitems (LI), and in those listitems you can have a lot of other things. What you have, is anchors in the UL (and they are also not closed properly). So what you probably intended (or what you SHOULD do) is this:

  <ul>
     <li class="random_articles"><a href="..."><img src="....">Text</a></li>
     <li class="random_articles"><a href="..."><img src="....">Text</a></li>
     <li class="random_articles"><a href="..."><img src="....">Text</a></li>
     .....
  </ul>

Yup, IE may be difficult to work with, but in my experience, 9 out of 10 times it's incorrect code. :)

k_mcminn

Thank you very much, Senff!

I have taken your advice, and adjusted a few things, but now it looks great! Will you please look at this link in IE and tell me if everything looks OK? Also, I closed that one anchor. ;)

Example Link for IE9

Watson90

@k_McMinn - looked fine in IE9 to me. However you had 2 rows earlier now you only seem to have 1 row.

Senff

@k_mcminn: you don't need to wrap every single listitem in its own UL. Instead, use ONE UL that contains more listitems.

k_mcminn

Thanks guys!

@Watson, I changed the layout to be 5 wide.

@Senff - Thanks very much! That code is from a block that's using a foreach statement. It looks like I have it all sorted out now. :)

Your text to link here...

k_mcminn

Hmm...interesting.

I've added another row and IE doesn't like it. It still looks great in other Browsers, but IE isn't accepting it.

EDIT: Actually, Chrome isn't liking it, either.

EDIT 2: I think I fixed it?

Watson90

Looks great on my mobile mate.

k_mcminn

Cool! Thanks so much to everyone who provided assistance so promptly.

treehouse : what would you like to learn today?

Forums

[Solved] Internet Explorer Float Issue?

About the Author

About the Author

About the Author