Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Jul 2009
    Location
    Ireland
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE7/IE8 problems CSS - Nested DIVs

    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.
    Attached Thumbnails Attached Thumbnails IE7/IE8 problems CSS - Nested DIVs-ie.jpg  

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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.
    Last edited by Fisher; 07-14-2009 at 06:13 PM.

  • #3
    New Coder
    Join Date
    Jul 2009
    Location
    Ireland
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by JA12; 07-14-2009 at 06:56 PM.

  • #4
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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>

  • #5
    New Coder
    Join Date
    Jul 2009
    Location
    Ireland
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by JA12; 07-15-2009 at 11:11 AM.

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Jul 2009
    Location
    Ireland
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you actually read my message, I am trying to use IE7/8. It is these versions I'm having the problem with.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Ignore it, it's just a spam post. Already reported...

  • #9
    New Coder
    Join Date
    Jul 2009
    Location
    Ireland
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks.

  • #10
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i suggest use css hacks. there are specified css hacks for ie6 and higher versions of ie. search on google about css hacks.

  • #11
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    btw, im not spammer im just here to help.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The original post is more than 11 months old, so I imagine it's no longer an issue...

  • #13
    New Coder
    Join Date
    Jul 2009
    Location
    Ireland
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #14
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #15
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 View Post
    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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •