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

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
  • 107 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by mprez

Dani AI

Generated

Short summary: the immediate cause turned out to be a markup error, not the positioning method. finally fixed it after isolating the problem (a stray closing tag) and got the relative + absolute overlay working in IE, Firefox and Safari. was right to point out IE-specific styles as a fallback — but the single best habit is to eliminate markup/CSS conflicts first.

Practical troubleshooting (in order): validate the HTML to catch unclosed tags; use the IE dev tools (F12) to inspect the DOM and computed styles; temporarily disable or remove large chunks of CSS to isolate which rule hides the element; check parent elements for display:none, overflow or zero height; confirm the page is in standards mode (correct DOCTYPE). For older IEs remember the “hasLayout” issue — forcing layout (for example with zoom:1) can make an otherwise invisible box render.

Overlay best practices that age well: place the overlay inside a positioned container so it has a positioning context; use an absolutely positioned child or a background image on the container for decorative art; keep z-index values simple and remember z-index only applies to positioned elements; avoid relying on percentage heights for the overlay when the container is height-auto. Use a small normalization/reset stylesheet to reduce cross-browser drift, and reserve conditional IE stylesheets only for genuine IE bugs you can’t otherwise fix.

Quick checklist you can reuse: validate markup, inspect with dev tools, isolate CSS, verify positioning context and z-index, check overflow/parent sizing, and only then add IE-specific rules. Markup errors are surprisingly common causes when something works in Firefox/WebKit but not in IE.

Recommended Answers

All 6 Replies

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.

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.