SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: IE dispaly bugs

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE dispaly bugs

    Roughing out the following layout and having some problems with IE (whats new, eh). When the browser window is small all the bg images line up and everything is good. But when I maximize the browser I get a 1 pixel shift in IE that screws up the layout. Works fine in firefox.

    Had some difficulty with this layout so if anyone sees a more effiecient way to structure this fire away.

    here's a link to a sample page:
    http://64.169.231.10/structure/structure.htm

    here's the code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Untitled Document
     <style type="text/css">
     <!--
     body {
     background: #F4F4F4 url(images/bg.gif) top center repeat-y;
     margin: 0;
     padding: 0;
     }
     
     #container {
     background: url(images/bg2.gif) repeat-x;
     }
     
     #wrap {
     margin: 0 auto;
     width: 760px;
     }
     
     #header {
     background: url(images/header_bg.gif) top center no-repeat;
     width: 760px;
     margin: 0 auto;
     text-align: right;
     font: 9px Verdana, Arial, Helvetica, sans-serif;
     height: 25px;
     }
     
     #main {
     background: url(images/main_bg.gif) top center no-repeat;
     margin-top: 50px;
     padding: 25px 40px 0 40px;
     font: 9px Verdana, Arial, Helvetica, sans-serif;
     height: 166px;
     }
     
     #content {
     margin-top: 0;
     padding: 0 40px 5px 40px;
     font: 9px Verdana, Arial, Helvetica, sans-serif;
     }
     
     #footer {
     background: url(images/footer.gif) top center no-repeat;
     margin: 0 auto;
     padding-top: 8px;
     position: relative;  /* Needed for Safari */
     width: 760px;
     text-align: center;
     font: 9px Verdana, Arial, Helvetica, sans-serif;
     height: 25px;
     }
     -->
     </style>
     
     <!-- position footer at bottom of viewport -->
     <script type="text/javascript">
     		<!--
     		function getWindowHeight() {
     			var windowHeight = 0;
     			if (typeof(window.innerHeight) == 'number') {
     				windowHeight = window.innerHeight;
     			}
     			else {
     			if (document.documentElement && document.documentElement.clientHeight) {
     		 	windowHeight = document.documentElement.clientHeight;
     				}
     				else {
     		 	if (document.body && document.body.clientHeight) {
     	 		 	windowHeight = document.body.clientHeight;
     					}
     				}
     			}
     			return windowHeight;
     		}
     		function setFooter() {
     			if (document.getElementById) {
     				var windowHeight = getWindowHeight();
     				if (windowHeight > 0) {
     		 	var contentHeight = document.getElementById('container').offsetHeight;
     		 	var footerElement = document.getElementById('footer');
         		    	var footerHeight  = footerElement.offsetHeight;
     		 	if (windowHeight - (contentHeight + footerHeight) >= 0) {
     		 		 footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
     					}
     					else {
     		 		footerElement.style.top = '0px';
     					}
     				}
     			}
     		}
     		window.onload = function() {
     			setFooter();
     		}
     		window.onresize = function() {
     			setFooter();
     		}
     		//-->
     		</script>
     </head>
     
     <body>
     <div id="container">
     <div id="header">header txt
     <div id="wrap">
     <div id="main">this is a txt for id main
     <div id="content">this is body txt
     </div> 
     <div id="footer">footer txt
     </div> 
     </body>
     </html>

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a quick glance but i noticed you have a width set for all your divs except #main ...... might want to put a width on it of 760px also.

    Again just a quick look .... Ill check back later but try that first

  3. #3
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had to tweak a few things, added text align center to the body tag, adjusted a few rules.

    Worked on the background properties.

    Moved the JavaScript from the head to the body, put </div> tags on some of the divs.

    Put a </title> on the title, and a few other minor things.

    I'd explain further, but it's late, and I'm tired.

    Here's what I came up with, it seems to work in IE and FF, haven't tested it in the others, but I think it should look pretty much the same as FF.

    P.S.: Remember to put the path to your images back in the url( 's .

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <title>Centered Layout</title>
    <style type="text/css">
    * html, body{overflow:auto;}
    	body{background:url(bg.gif);
    background-position:top center;
    margin:0;
    padding:0;
    text-align:center;}
     
    #container {background: url(bg2.gif);
    	 background-position:top center;
    	 background-repeat:no-repeat; }
     
    #header {background: url(header_bg.gif);
    background-repeat:no-repeat; 
    	background-position:top center;
    	width: 760px;
    		 margin: 0 auto 0 auto;
    		 font: 9px Verdana, Arial, Helvetica, sans-serif;
    		 height: 25px;}
     
    #wrap{width:760px;
    	 margin-right:auto;
    	 margin-left:auto;}
    #main {background:url(main_bg.gif);
    		background-position:top center;
    margin-top:50px;
    padding: 25px 40px 0 40px;
    font: 9px Verdana, Arial, Helvetica, sans-serif;
    height: 166px;
    }
     
     
    #content {padding: 0 40px 5px 40px;
    	margin:0 auto 0 auto;
    	 font: 9px Verdana, Arial, Helvetica, sans-serif;
    	}
     
    #footer {background: url(footer.gif) top center no-repeat;
    	margin: 0 auto 0 auto;
    	padding-top: 8px;
    	position: relative; /* Needed for Safari */
    	width: 760px;
    	text-align: center;
    	font: 9px Verdana, Arial, Helvetica, sans-serif;
    	height: 25px;}
    </style>
    </head> 
    <body>
    <!-- position footer at bottom of viewport -->
    <script type="text/javascript">
    <!--
    function getWindowHeight() {
    	var windowHeight = 0;
    	if (typeof(window.innerHeight) == 'number') {
    	 windowHeight = window.innerHeight;
    	}
    	else {
    	if (document.documentElement && document.documentElement.clientHeight) {
    	 windowHeight = document.documentElement.clientHeight;
    	 }
    	 else {
    	 if (document.body && document.body.clientHeight) {
    	 windowHeight = document.body.clientHeight;
    	 }
    	 }
    	}
    	return windowHeight;
    }
    function setFooter() {
    	if (document.getElementById) {
    	 var windowHeight = getWindowHeight();
    	 if (windowHeight > 0) {
    	 var contentHeight = document.getElementById('container').offsetHeight;
    	 var footerElement = document.getElementById('footer');
    			var footerHeight = footerElement.offsetHeight;
    	 if (windowHeight - (contentHeight + footerHeight) >= 0) {
    	 footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
    	 }
    	 else {
    	 footerElement.style.top = '0px';
    	 }
    	 }
    	}
    }
    window.onload = function() {
    	setFooter();
    }
    window.onresize = function() {
    	setFooter();
    }
    //-->
    </script>
     
    <div id="container">
    <div id="header">
    	header txt
    </div>
    <div id="wrap">
    <div id="main">
    this is a txt for id main
    </div> 
    <div id="content">
    this is body txt
    </div>
    </div>
    </div> 
    <div id="footer">footer txt
    </div>
     
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm...for some reason some of my closing tags didn't paste into the code block. The page I put up on the server does have them though.

    I put up your version here:

    http://64.169.231.10/structure/structure2.htm

    I see the overflow and removal of the short hand tags. I added back in the repeat-x for the container and repeat-y for the body.

    I'm still seeing that damn 1 pixel shift in IE when I size the browser. Sometimes I have to adjust its size a few times but it always shows up. Here's a link to a screenshot of your tweaked version so you can see what I mean.

    http://64.169.231.10/structure/screenshot.gif

    Thanks for the help.

  5. #5
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not getting the 1px shift in any browser.

    What I was seeing when I first loaded your code, was more like 25 or 30 pixel shifts that caused your bg images to stagger all over the screen (IE 5.5, and FF 1.0.1)

    Does adding the repeat-x cause the shift? I can't see why you would need repeat-x, since your images cover the width of the divisions.

    The only difference I see when you add repeat-y is you have a little more of one background below the gray section.

    To be honest with you, it looks better without the repeat, not to mention the shift.

    On a side note: When I view the your page in IE one of the backgrounds is a shade of green, and when I view it in FF, the same background is a shade of red/orange.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I see when I load your revised version as is in FF:

    http://64.169.231.10/structure/screenshot2.gif

    note that the top header doesn't extend across the width of the viewport and the body bg image is starting to tile again causing what looks like two columns on the outside of the content area.

    here's a link to your version on my server:

    http://64.169.231.10/structure/structure3.htm

    I don't know why we aren't seeing the same thing even in FF!

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you view the first link you posted of my version http://64.169.231.10/structure/structure2.htm, the header extends the full width of the div.

    The only reason their would be a difference in the way they display is if you changed something in the second version you posted. http://64.169.231.10/structure/structure3.htm

    Or your editor is changing something when you save the file, because you changed your settings after you posted the first link.

    The first link to my version, In FF one of the center backgrounds appears to be tiling further down the page.

    I changed the height of the div and it seems to be doing O.K., with the exception of the color different.

    Code:
     
    #main {background:url(main_bg.gif);
    		background-position:top center;
    margin-top:50px;
    padding: 25px 40px 0 40px;
    font: 9px Verdana, Arial, Helvetica, sans-serif;
    height:140px;
    }
    Last edited by DocType; Mar 27, 2005 at 16:04.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL...this is getting confusing, eh.

    Structure2.htm was your version with my edits to it (see my post above).

    Structure3.htm is your version exactly as you posted it. I just copied and pasted and added "images" to the path name. You can check the source if you'd like.

    I do appreciate your effort.

    I'm playing with another way to structure it now. The problem as I see it is that the center bg image has to be applied to the body so it tiles vertically (always 100% of the viewports height). Then the header spans horizontally accross the width of the viewport so it needs to be in a div that expands 100% of the width. Thats all fine, but I have those damn stripes with bevels on the side. When I put them (the stripes) in a fixed width container div, IE 6 misaligns them slightly. It doesn't seem to accurately center a fixed width element with a centered body element. Actually, its only off by 1 pixel occassionally but it's noticeable with this layout. I think if I don't mix the two (centering a fixed width bg and a full width bg) I'm hoping it will solve my problem.
    Last edited by rpratt; Mar 27, 2005 at 17:27.

  9. #9
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm viewing it with IE 5.5 so theirs probably a difference.

    It seems that you could put the image you're using on the body in a 100% width container, and nest the rest inside that container.

    The lack of a defined layout(height or width on the element you have set as the body background might account for the 1px difference in IE.

    IE has a property called hasLayOut(read only) that has a value of false when no width or height is defined on an element, and value of true when one, or more, of these values is defined.

    A value of false forces buggy behavior, which might possibly be causing the problem.

    Defining a height or width on the body might do the trick.
    Last edited by DocType; Mar 27, 2005 at 20:14.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting, I didn't know that about IE. I'll look into that. thanks.

    Here's what I came up with:

    http://64.169.231.10/structure/final/structure4.htm

    You might have to clear your cache as I reworked some of the images.

    Much less code and it seems to work in everything I tested it in (FF, IE6, N7, opera). I'll fire up browsercam tomorrow and see what it looks like in IE 5.5.


Bookmarks

Posting Permissions

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