Image positioning in IE

Question

Lapixx 2 Junior Poster in Training

15 Years Ago

Hi,

I've been working on a website and when I was nearly finished I tested the design in Internet Explorer. While the problems didn't look that big, I can't figure out how to solve all of them.

This is the website design: (CSS at )

In Safari, FF etc everything works fine. The images are displayed inside the blocks and everything looks cool. In IE7 and IE8 however, there are 2 problems: The blocks don't have the correct height, and the images that are at the right side from the text are displayed outside of the block.

While I'm able to 'solve' the first problem by using the height property instead of min-height (the content in the blocks will probably never change), I don't understand what is happening to the images on the right.

The div that contains the text has a set width, but it seems like the image is still 'pushed out' of the container div.

Any thoughts on this?
Thanks in advance.

user-interface web-design

4 Contributors
8 Replies
131 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by Lapixx

Dani AI

Generated 9 Months Ago

Short summary and what actually caused it:

The symptoms (images that sit “outside” their .block only in IE7/8 while other browsers are fine) point to IE’s rendering mode and its old “hasLayout”/inline-block quirks, not a mysterious image bug. A missing/incorrect DOCTYPE puts IE into quirks mode where inline-block and min-height behave differently. Even in standards mode IE7 treats block elements with display:inline-block differently unless you also trigger its layout behavior.

Practical fixes (safe and maintainable):

Keep a proper standards DOCTYPE as the very first line of the HTML. That fixes a lot of cross‑browser differences (you already saw IE8 improve).
If you must support IE7, avoid one-off star hacks in main CSS. Instead use a small IE7-only stylesheet with a conditional comment. In that file trigger IE7’s layout on the element that needs inline-block support (for example by giving it a layout-triggering property) or provide an IE‑specific fallback.
Consider changing the layout method. A float-based approach (image floated right, text flowed with a right margin equal to the image width) works consistently across all browsers and removes the tricky inline-block/absolute positioning interplay.
For the two-image hover overlay, keep both images inside a single positioned wrapper so both are positioned relative to the same container. Animate the top image’s opacity for the fade effect; this is more robust than relying on stacking quirks.

Other tips and checks:

If z-index or overlaying looks wrong in IE, check the stacking contexts of positioned ancestors — giving the parent a position and an explicit z-index often fixes odd IE stacking.
Validate the HTML and ensure no stray characters before the DOCTYPE (that can force quirks mode).
Use conditional CSS or an IE7 test VM rather than global CSS hacks to keep the stylesheet maintainable.

As suggested, DOCTYPE is the first step; as discovered, an IE7-specific inline-block fallback fixes the rest. The float/wrapper approach avoids those IE7 workarounds entirely and is usually the cleanest long-term solution.

All 8 Replies

vedro-compota 33 Posting Whiz

15 Years Ago

which styles do You use for pictures? (Names from sheet of styles)

ko ko 97 Practically a Master Poster

15 Years Ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Put DTD in your document. IE need DTD to support 'inline-block' property.

Lapixx commented: Really solved my problem. Thanks! +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Lapixx 2 Junior Poster in Training · Answer 1 · 2010-10-19T22:34:08+00:00

.block img{
	margin: 0px;
	padding: 0px;
	position: absolute;
}

(block is the classname of the DIV the image is in)
Some images have a left: 0px; set, while others have right: 0px; (depending where they need to be shown).

Also, one image has a z-index set to 10, this is used so a black/white image will be displayed on top of the original image, and the image can 'fade to colour' using jQuery. Surprisingly, this works fine, the 2 images are displayed on top of each other in every browser. It's just that the one with right: 0px; gets displayed outside of the DIV.

vedro-compota 33 Posting Whiz · Answer 2 · 2010-10-20T15:22:50+00:00

vedro-compota 33 Posting Whiz

15 Years Ago

hm. show the code of your page.

Lapixx 2 Junior Poster in Training · Answer 3 · 2010-10-20T15:29:57+00:00

<html>
<head>
<title>Title</title>
<link href="default.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("img.bw").hover(
		function() {
			$(this).stop().animate({"opacity": "0"}, 400);
		},
		function() {
			$(this).stop().animate({"opacity": "1"}, 400);
		}
	);
});
</script>
</head>

<body>

<div class="navbar">

<div class="wrap">
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
</div>

</div>

<div class="wrap">

<br><br>

<div class="block">
<div>
<b>Header</b><br><br>
(text goes here)
</div>
<img src="onzezorg_bw.png" style="width: 280px; height: 200px; right: 0px" class="bw">
<img src="onzezorg.png" style="width: 280px; height: 200px; right: 0px">
</div>

<div class="block grass" style="margin-top: 50px">
<img src="tuinonderhoud_bw.png" style="width: 280px; height: 200px;" class="bw">
<img src="tuinonderhoud.png" style="width: 280px; height: 200px;">
<div style="left: 280px">
<b>Second header</b><br><br>
(text goes here).
</div>
</div>

</div>

</body>

</html>

And the part of CSS that is applied to the (parents of) the images:

.wrap{
	background-color: #000000;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 800px;
	padding: 0px;
}
.block{
	background-color: #1A1A1A;
	margin: 0px;
	padding: 0px;
	position: relative;
	text-align: justify;
}
.block img{
	margin: 0px;
	padding: 0px;
	position: absolute;
}
.block div{
	margin: 0px;
	padding: 10px;
	padding-left: 20px;
	display: inline-block;
	position: relative;
	width: 480px;
	min-height: 180px;
}

img.bw{
	z-index: 10;
}

Lapixx 2 Junior Poster in Training · Answer 4 · 2010-10-22T06:13:02+00:00

Thanks for your reply :)
The doctype declaration seems to work for IE8, but IE7 doesn't show any improvements whatsoever. What would be the best way to make the inline-block DIV work properly in IE7?

levine 0 Newbie Poster · Answer 5 · 2010-10-22T11:43:54+00:00

I am facing the same issue of inline-block DIV work properly in IE7.looking fir best solution.

Lapixx 2 Junior Poster in Training · Answer 6 · 2010-10-22T18:47:36+00:00

Hmm, after the doctype is declared the inline-block property works fine in both IE8 and IE6, but not in IE7. A quick search got me to the following solution:

zoom:1;
	*display: inline;

The second line changes the display mode to inline, but only in IE7, because of the * in front of it, other browsers won't be affected by this. The first line doesn't change the appearance element, but it triggers some mode that only IE7 seems to have, enabling you to set properties that a normal inline element can't have.

The result is that the element appears to be a inline-block element in IE7. Just add the 2 lines to the existing CSS and it should work.

Thanks for your replies! :)

Image positioning in IE

Dani AI

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers