IE text overlay on image

  • Resolved studioburst

    (@studioburst)


    12 years, 8 months ago

    I’m getting frustrated with trying to line up an overlay on top of an image in IE, all other major browsers work well.

    Here is what IE is doing:

    https://s8.postimage.org/syh0lmq7p/ieoverlay.jpg

    My HTML:

    <div class="new-wrapper">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'main-image', array( 'class' => 'imagemain' ) ); ?></a>
<span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
</div>

    My CSS:

    .new-wrapper {
	float: left;
	width: 350px;
	height: 320px;
	margin: 0px 0px 0px 0px;
	display: inline;
	position: relative;
	z-index: 5;
	font-size: 20px;
	}

.new-wrapper img {
	border: 0px;
}

.new-wrapper span {
	background: #000000;
	position: absolute;
	top: 50%;
	padding: 20px;
	opacity: 0.9;
	z-index: 2;
	float: left;
	}

    As you can see, IE is not being very nice to me and I’m just so confused now about what to do after reading tons of information and trying all different types of ‘fixes’.

    Would appreciate any help from you experts, where am I going wrong?

    Many thanks.

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

  • If you post a link to your site, someone may be able to help. Pretty impossible to help with something like this without looking at the site live.

    Thread Starter studioburst

    (@studioburst)

    Sorry, I did mean to post the link at the bottom.

    https://dev.mediafap.com/2012jake/

    Hmmm, hard to say — I don’t have IE so have to guess a bit — using float and absolute positioning together does not work — so remove the float — it’s not doing anything. I’d also try changing the top: 50% to a set px. You might also try changing the span tags to p.

    Also try adding a “left: 0px;” to the .new-wrapper span css.

    Thread Starter studioburst

    (@studioburst)

    Dude you’re awesome, I owe you a beer ??

    I had to keep the float’s otherwise the area just moved straight to the bottom on all browsers, but it was the left: 0px that seemed to fix it for IE.

    Thank you so much.

    You’re welcome… Virtual beer accepted!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘IE text overlay on image’ is closed to new replies.