IE7/IE8 problems CSS - Nested DIVs

JA12 · 07-14-2009, 11:32 AM

Why is it, that every time a browser (mozilla) releases an new version, then IE releases a new version, CSS/HTML stops working? A rhetorical question, but IE is

me off!

I have pages with nested DIVS, just standard, not floating. They now/still work perfectly with all the browsers -except- IE.

Code:

HTML:
<body>
<div id=background>
<div id=header>
</div>
<div id=navbar>
</div>
<div id=content>
</div>
<div id=footer>
</div>
</div>
</body>

Code:

CSS:
html {
  height:100%; /* fix height to 100% for IE */
  max-height:100%; /* fix height for other browsers */
  padding:0;
  margin:0;
  border:0;
  overflow:hidden; /*get rid of scroll bars in IE */
}
body {
  height:100%;
  max-height:100%;
  overflow:hidden;
  padding:0;
  margin:0;
  border:0;
}
div#background {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: auto;
}
div#header, div#footer {
  padding: 0px;
  margin: 0px;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}
div#header {
  display: block;
  position: fixed;
  height: 20px;
  font-weight: normal;
  font-size: 4em;
  outline-color: black;
  outline-width: 1px;
  z-index: 99;
  margin-top: -30px;
}
div#navbar {
  display: block;
  position: fixed;
  width: 100%;
  height: 80px;
  font-family: arial;
  white-space: nowrap;
  margin-left: -10px;
  margin-top: 40px;
  margin-bottom: 0px;
  padding-bottom: 5px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  z-index: 98;
}
#content {
  display:block;
  height:80%;
  max-height:80%;
  overflow:auto;
  position:relative;
  z-index:3;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 85px;
}
div#footer {
  height: 25px;
  vertical-align: bottom;
}

(I've stripped out everything that's not to do with positioning)

With all browsers - except IE, this works fine, the "background" manages the height and width of the window and everything else appears as a "child" inside the background, with IE, the "header" and "footer" are pushed outside the "background" box.

How can I force IE to use the "background" div as the parent?

See the attached images for what I'm trying to explain.

Fisher · 07-14-2009, 05:00 PM

Code:

div#header {
  display: block;
  position: fixed;
  height: 20px;
  font-weight: normal;
  font-size: 4em;
  outline-color: black;
  outline-width: 1px;
  z-index: 99;
  margin-top: -30px;
}

Your header doesn't even show if it's 20px high and pushed up 30px.

I think what you want is this:

Code:

div#navbar {
	display: block;
	width: 100%;
	height: 80px;
	font-family: arial;
	white-space: nowrap;
	margin-left: -10px;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-bottom: 5px;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	z-index: 98;
}
#content {
	clear:both;
	display:block;
	height:80%;
	max-height:80%;
	overflow:auto;
	position:relative;
	z-index:3;
	margin-left: 10px;
	margin-right: 10px;
}

Get rid of the fixed positioning on the nav. Remove the top-margin from the content and apply a clear:both to it.

JA12 · 07-14-2009, 05:48 PM

If I remove the top-margin from the content then the content just starts at the top of the screen instead of offsetting below the navbar.

The margin-top: -30px; just forces the <H1> header up by 30px to stop it overlapping the navbar.

If I use

Code:

div#header h1 {
  margin-top: -30px;
}

Then the mozilla browsers just behave the same way as the IE browser and push the header div above the background div.

I tried all your suggestions, but they had the combined effect of stopping the mozilla browsers rendering as I want, with absolutely no change to IE7/IE8.

Thanks anyway.

Fisher · 07-14-2009, 06:08 PM

Here's your code with the changes I said. In Firefox and IE6 it appears the same except for the header because it isn't showing in Firefox at all because of that negative top margin. Then try taking out the header div and you'll see the page now appears EXACTLY the same in Firefox and IE6.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
	height:100%; /* fix height to 100% for IE */
	max-height:100%; /* fix height for other browsers */
	padding:0;
	margin:0;
	border:0;
	overflow:hidden; /*get rid of scroll bars in IE */
}
body {
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
	border:0;
}
div#background {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: auto;
	background:#FF99FF;
}
div#header, div#footer {
	padding: 0px;
	margin: 0px;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}
div#header {
	display: block;
	position: fixed;
	height: 20px;
	font-weight: normal;
	font-size: 4em;
	outline-color: black;
	outline-width: 1px;
	z-index: 99;
	margin-top: -30px;
	background:#FFFF00;
}
div#navbar {
	display: block;
	width: 100%;
	height: 80px;
	font-family: arial;
	white-space: nowrap;
	margin-left: -10px;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-bottom: 5px;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	z-index: 98;
	background:#0000FF;
}
#content {
	display:block;
	height:80%;
	max-height:80%;
	overflow:auto;
	position:relative;
	z-index:3;
	margin-left: 10px;
	margin-right: 10px;
	background:#CC6633;
	clear:both;
}
div#footer {
	height: 25px;
	vertical-align: bottom;
	background:#333333;
}
</style>
</head>
<body>
<div id=background>
  <div id="header"> </div>
  <div id="navbar"> </div>
  <div id="content"> </div>
  <div id="footer"> </div>
</div>
</body>
</html>

JA12 · 07-15-2009, 10:07 AM

I know that worked with IE6 - this site used to work fine in IE.

My problem is with IE7, IE8.

Neither of those versions render properly/the same as IE6.

Something has changed and I, so far, haven't been able to figure out what is stopping the DIV's from nesting properly.

It all works fine in ALL the Mozilla browsers, including all versions of Firefox from 3 onwards, including the header DIV.

NB: If I remove the "position: fixed;" from the navbar div, then the navbar defaults to relative and shifts too high on the window.

kevin85 · 06-27-2010, 09:18 AM

nowadays, some users preferred to use ie7/ie8. i think for 100% internet users there are only 20% who uses ie6. so dont think hard about rendering your design using ie6. focus on higher versions of ie.
___________________________
search engine optimization, web solution

JA12 · 06-27-2010, 10:17 AM

If you actually read my message, I am trying to use IE7/8. It is these versions I'm having the problem with.

SB65 · 06-27-2010, 10:19 AM

Ignore it, it's just a spam post. Already reported...

JA12 · 06-27-2010, 01:42 PM

Thanks.

kevin85 · 06-27-2010, 06:36 PM

i suggest use css hacks. there are specified css hacks for ie6 and higher versions of ie. search on google about css hacks.

kevin85 · 06-27-2010, 06:37 PM

btw, im not spammer im just here to help.

SB65 · 06-27-2010, 08:04 PM

The original post is more than 11 months old, so I imagine it's no longer an issue...

JA12 · 06-27-2010, 10:01 PM

Oh, it's still an issue.

I tend to run dual sites. One for Mozilla browsers and one for IE.

It's a pain keeping the two versions 100% identical, but as I haven't found a reliable solution where IE7/8 is concerned, I just have to keep doing it that way.

Adam Kara · 07-08-2010, 08:50 AM

This would be easier than running two sites

http://css-tricks.com/how-to-create-...ly-stylesheet/

1 site, just two stylesheets which are conditional and the users browers.

xAxKx · 07-08-2011, 10:04 AM

Hi!

I was up all night looking for a solution to the compatibility issue with IE8 and ironically i find this post in the morning. Many thanks to Fisher for this advice!!

Quote:

Originally Posted by Fisher

Here's your code with the changes I said. In Firefox and IE6 it appears the same except for the header because it isn't showing in Firefox at all because of that negative top margin. Then try taking out the header div and you'll see the page now appears EXACTLY the same in Firefox and IE6.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
	height:100%; /* fix height to 100% for IE */
	max-height:100%; /* fix height for other browsers */
	padding:0;
	margin:0;
	border:0;
	overflow:hidden; /*get rid of scroll bars in IE */
}
body {
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
	border:0;
}
div#background {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: auto;
	background:#FF99FF;
}
div#header, div#footer {
	padding: 0px;
	margin: 0px;
	width: 100%;
	text-align: center;
	vertical-align: middle;
}
div#header {
	display: block;
	position: fixed;
	height: 20px;
	font-weight: normal;
	font-size: 4em;
	outline-color: black;
	outline-width: 1px;
	z-index: 99;
	margin-top: -30px;
	background:#FFFF00;
}
div#navbar {
	display: block;
	width: 100%;
	height: 80px;
	font-family: arial;
	white-space: nowrap;
	margin-left: -10px;
	margin-top: 40px;
	margin-bottom: 0px;
	padding-bottom: 5px;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	z-index: 98;
	background:#0000FF;
}
#content {
	display:block;
	height:80%;
	max-height:80%;
	overflow:auto;
	position:relative;
	z-index:3;
	margin-left: 10px;
	margin-right: 10px;
	background:#CC6633;
	clear:both;
}
div#footer {
	height: 25px;
	vertical-align: bottom;
	background:#333333;
}
</style>
</head>
<body>
<div id=background>
  <div id="header"> </div>
  <div id="navbar"> </div>
  <div id="content"> </div>
  <div id="footer"> </div>
</div>
</body>
</html>