Image positioning in IE

Question

Lapixx 2 Junior Poster in Training

13 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: http://divbyzero.nl/sil/ (CSS at http://divbyzero.nl/sil/default.css)

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.

web-design

4 Contributors
8 Replies
112 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Lapixx

All 8 Replies

vedro-compota 33 Posting Whiz

13 Years Ago

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

ko ko 97 Practically a Master Poster

13 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

13 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

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers