Member Avatar for Lapixx

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.

  • 4 Contributors
  • 8 Replies
  • 112 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Lapixx
Member Avatar for vedro-compota

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

Member Avatar for Lapixx 
.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.

Member Avatar for vedro-compota

hm. show the code of your page.

Member Avatar for Lapixx 
<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;
}
Member Avatar for Lapixx

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?

Member Avatar for levine

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

Member Avatar for Lapixx

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! :)

commented: ++++++ +1
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.