Grow your CSS skills. Land your dream job.

CSS ribbons, not lining up in IE

  • # February 15, 2013 at 5:49 am

    Need a little assistance with an issue I am having, got 3 ribbons displaying in-line using CSS, which displays perfectly in Firefox, but when displayed in IE 9 it seems so lose the alignment all together.

    I made a Pen in CodePen, http://codepen.io/theyobstar/pen/alLAC , hoping one of you CSS geniuses could assist.

    Also made a screenshot of the alignment issue in IE 9, http://imgur.com/L4VSQQh

    Many Thanks

    # February 15, 2013 at 7:46 am

    Your Codepen works fine for me in IE9 mode of **IE10**….except the menu placement/margin but that may be unrelated.

    My guess though is that it’s a positioning issue.

    It’s difficult to tell from your image…which element is out of place?

    # February 15, 2013 at 8:09 am

    “block1″ seems to be the problem child, with the class=”ribbon-stitches-top” being thrown out, when display in IE9, unless it could be something to do with my WAMP – apache configuration? I’m just guessing though…

    # February 15, 2013 at 8:32 am

    It’s probably unrelated but you have an unclosed ‘li’ in your Codepen

  • Preparation to trial balance level. (With balance Sheet reconciliations)
# February 15, 2013 at 9:16 am

Looks fine to me in IE9, but then again, I can’t see whats wrong in your IE9 screenshot in the first place….? (unless it’s that one on the top left….which I don’t see in my IE9?)

# February 15, 2013 at 9:48 am

Also you have a lot of unnecessary IDs & CSS in there. It could use a tidy up.

Try using classes instead of IDs: http://codepen.io/Paulie-D/pen/fHhpB

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

You must be logged in to reply to this topic.

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