Member Avatar for mprez

I am developing a website which requires some overlapping of divs to achieve the effect of the company mascot hanging off the side of some content. The effect works perfectly in safari and firefox, however IE doesn't show the div's... It won't even put a border around the text it contains. Any help would be great!

I have placed a copy of the file at http://www.buzimarketing.com.au/new

You can view source to see the CSS and HTML used. I just can't understand why IE is not displaying this correctly, as I have used similar methods to display the header fo this site and it works fine!

  • 2 Contributors
  • 6 Replies
  • 93 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by mprez
Member Avatar for MJ Pieterse

you will need to use conditional commenting for your style sheets. make sure that it displayes correctly for webkit and mozilla and then create another style sheet for your ie style. you call it like this then on your page.

<link href="../style/FFStyle.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
  <link href="../style/IEStyle.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
Edited by MJ Pieterse because: n/a
Member Avatar for mprez

Thanks MJ! That sounds like what I will need to do. I have tried to create this effect a number of ways in IE and all have failed. Do you know of a simple way to overlay the image onto the side of the DIV? It just needs to display in all browsers with the single image overlayed on the side of the div. The div will be fixed width and variable height, so I would have thought positioning the image would be quite easy.

Member Avatar for MJ Pieterse

mmm... can you send me some code that you already have?

you will most probably have to say float to the side you want with your z-index adjusted and then have the fixed width in pixels but your height on 100%.

Member Avatar for mprez

Hi MJ,

I found a way to do it using relative + absolute positioning. Got it working fine in both IE and FF and Safari, however when I insert the working items into the existing page they still do not display. I had a feeling there may have been a CSS conflict/error, and while removing individual items to find the problem I found a typo in a div color statement.... All this pain for a misplaced '

Oh well, lesson learnt, I now have 6 different methods for placing the image over the left side of the DIV the most reliable and simple being:

<html>
<head>
<style type="text/css">
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#featurescontain {
	width: 526px;
	height: 400px;
	position: relative;
	
}

#features {
	width: 400px;
	height: 400px;
	border: 2px solid #96cc0d;
	position: absolute;
	top: 0px;
	left: 126px;
	padding: 20px;
}

#featuresimg {
	width: 158px;
	height: 200px;
	background: url("images/features.png");
	background-position: top right;
	background-repeat: no-repeat;
	position: absolute;
	top:0px;
	left: 0px;	
}


</style>
</head>
<body>
<div id="featurescontain">
	<div id="features">
		<p>Test
	</div>
	<div id="featuresimg">
	</div>
</div>
</body>
</html>

I have uploaded the file for those who are interested in seeing the final working version.
http://www.buzimarketing.com.au/new/stripped.php

Member Avatar for MJ Pieterse

okay cool, so problem solved?! :D

Member Avatar for mprez

Yeah all fixed. Thanks MJ!

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.