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

    IE position:fixed 100% width/margin bug

    Hi - I should start by saying that I'm an amateur webmaster; I don't know javascript and my CSS skills are rudimentary. I've been googling around to get the javascript and CSS solutions I've been implementing.

    So I'm retooling a frames-based site to no longer use frames, while keeping the design looking exactly the same to the user by putting the menus in position:fixed divs. And I found a lovely javascript solution elsewhere to make it work just fine in IE.

    All was well until I came to a series of pages that needed a left-hand-side menu bar. In order to compensate for a left-side fixed div with a 194px width, I increased the margin-left to 194px to keep that menu from covering up some of the page's content.

    Unfortunately, IE now draws the top menu bar 194px short.

    Here's the page:

    http://www.sacredfools.org/misc/seri...testserial.htm

    Since there's a lot going on there, I also made a much simpler page that shows the same thing happening even without all the javascript hacks going on, albeit in the reverse direction:

    http://www.sacredfools.org/upcoming-test2.htm

    I have been testing in IE6, IE7, Firefox 3.5.1, Safari 4.0.2 and Opera 9.64. All other browsers besides IE ignore the margin-left when determining the 100% width of the div.

    Any ideas how to fix this? Thanks!

    Screenshots:

    Broken in IE:


    Working in Firefox:


    Broken in IE (simple code):


    Working in Firefox (simple code):


    Code in question (multiple divs & javascript tricks)... in the below code, if margin-left was 0px, all would work perfectly (except for the left-hand fixed position menu covering some of the content, which is why I'm doing this...):

    Code:
    <script type="text/javascript">
    function calculateBgX(oElement) {
    	return document.body.scrollLeft - getOffsetLeft(oElement);
    }
    function calculateBgY(oElement) {
    	return document.body.scrollTop - getOffsetTop(oElement);
    }
    
    function getOffsetTop(oElement) {
    	var iResult= oElement.offsetTop;
    	while (oElement.offsetParent) {
    		oElement = oElement.offsetParent;
    		iResult += oElement.offsetTop;
    	}
    	return iResult;
    }
    function getOffsetLeft(oElement) {
    	var iResult= oElement.offsetLeft;
    	while (oElement.offsetParent) {
    		oElement = oElement.offsetParent;
    		iResult += oElement.offsetLeft;
    	}
    	return iResult;
    }
    </script>
    
    <script type="text/javascript">
    		function setIframeHeight(iframeName) {
    		  //var iframeWin = window.frames[iframeName];
    		  var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
    		  if (iframeEl) {
    		  iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
    		  //var docHt = getDocHeight(iframeWin.document);
    		  // need to add to height to be sure it will all show
    		  var h = alertSize();
    		  var new_h = (h-136);
    		  iframeEl.style.height = new_h + "px";
    		  //alertSize();
    		  }
    		}
    
    		function alertSize() {
    		  var myHeight = 0;
    		  if( typeof( window.innerWidth ) == 'number' ) {
    		    //Non-IE
    		    myHeight = window.innerHeight;
    		  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    		    //IE 6+ in 'standards compliant mode'
    		    myHeight = document.documentElement.clientHeight;
    		  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    		    //IE 4 compatible
    		    myHeight = document.body.clientHeight;
    		  }
    		  //window.alert( 'Height = ' + myHeight );
    		  return myHeight;
    		}
    	</script>
    	
    <body onload="setIframeHeight('ifrm');" onresize="setIframeHeight('ifrm');">
    
    <style>
    
    #sfmenu {
    	position: fixed;
    	position: expression("absolute");
    	left: 0px;
    	padding: 0px;
    	width: 100%;
    	top: 0px;
    	height: 89px;
    	top: expression(eval(document.body.scrollTop));
    }
    
    #sktop {
    	position: fixed;
    	position: expression("absolute");
            background-color:white;
    	left: 0px;
    	padding: 0px;
    	width: 100%;
    	top: 89px;
    	top: expression(eval(document.body.scrollTop)+89);
    
    }
    
    #skarchives {
    	position: fixed;
    	position: expression("absolute");
            background-color:white;
    	left: 0px;
    	padding: 0px;
    	width: 194px;
    	top: 136px;
    	top: expression(eval(document.body.scrollTop)+136);
    
    }
    
    
    body {
    	background: url('x.gif');
    	background-attachment: fixed;
            margin-top:0px;
            margin-left:194px;
            margin-right:0px;
            margin-bottom:0px;
    }
    
    </style>
    
    <div id="sfmenu">
      <iframe src="http://www.sacredfools.org/top-test.htm" frameborder=0 marginheight=0
     marginwidth=0 width="100%" height=89px scrolling="no"></iframe>
     </div>
    <div style="height:89px"></div>
    
    
    <div id="sktop">
      <iframe src="http://www.sacredfools.org/misc/serialkillers/sk_menu_top.htm" frameborder=0 marginheight=0
     marginwidth=0 width="100%" height=47px scrolling="no"></iframe>
     </div>
    <div style="height:47px"></div>
    
    <div id="skarchives">
      <iframe name="ifrm" id="ifrm" src="http://www.sacredfools.org/misc/serialkillers/sk_menu_serials.htm"
     frameborder=0 marginheight=0 marginwidth=0 height=500px width="100%" scrolling="auto"></iframe>
     </div>
    (The second of the two javascripts above doesn't seem to have any bearing on my problem - it has to do with the height of the iframe in the third div - but I've included it anyway for completeness' sake. The first javascript and the CSS are the hack for making position:fixed work in IE.)


    The simple code:

    Code:
    <style>
    
    body {
            margin-left:194px;
            margin-top:0px;
            margin-right:0px;
            margin-bottom:0px;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div style="position:fixed;
    	width:100%;
    	left:0px;
    	top:0px;
    	height:89px;
    	background-color:#000000">
    </div>
    Last edited by CKlemow; 07-20-2009 at 01:14 AM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    Never, ever trust IE to do anything right. You will never get IE to attempt to perform like the other more modern browsers without a proper doctype. Put this on your first line and see where we stand:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    EDIT: I just noticed you are using FrontPage to create this site. Uninstall that program and never use it again.

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately, that doctype ruined all the formatting on the page in every browser, AND killed the position:fixed hack in IE. On the other hand, it did get the 100% width back in IE. I'll leave the doctype in there for now so's you can see what it did.

    Just FYI - I'm a volunteer webmaster for a nonprofit. Frontpage was given to me, gratis, by the old webmaster when I took over; I can't afford to spend a ton on better software. Constructing in FrontPage and then going into the code to take out any stupidities and redundancies will have to suffice for me. Also, this is a gigantic site with 12 years of archival history. Unfortunately, I can't go in and rewrite the whole site line by line to make up for what another doctype might do to the formatting; it's just too time-consuming. I've been avoiding moving away from frames for a long time, just because I knew that putting the includes for the menus on every page was going to be a gargantuan task all by itself. So there may be a point where I have to just throw up my hands and give up.

  • #4
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've removed the doctype (after trying several - every doctype that fixed the width problem also broke the position:fixed hack and messed up the page's formatting, and the rest of them had no effect at all) and applied a bit of a kludge, which might maybe point towards a better solution:

    I found that if I removed the left:0px positioning of the horizontal menu bars, they would align themselves right rather than left. So I created another div with the same color and height of the top menu bar but without the left:0px, gave it a lower z-index, and that filled in the extra space. I did the same for the secondary menu bar, albeit with a complementary color to the page, as if I fill in all-white it becomes obvious that the menu is off-center. I'm filling that color bar with an extra little blurb for the show. These extra divs won't be seen in other browsers, but hedge against IE's screwiness.

    Well, somewhat. If your browser window is too narrow in IE (i.e. less than about 953 pixels wide in this particular case), things get goofy as z-indexes get ignored. So this isn't ideal. But it's at least better than it was.

  • #5
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Without a valid DOCTYPE IE will likely render the page in quirks mode which probably isnt helping your formatting issues.

    Also add the following to the top of your CSS

    Code:
    * {
    	padding:0;
    	margin:0;
    	border:0;
    }
    To be honest unless you are planning to rewrite the code from scratch then you will just have to play around with the CSS until it looks close enough. Its not likely that you will ever get it perfect unless you have a correct DOCTYPE and valid code

  • #6
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's a doctype I found on another part of my site that doesn't fix anything, but doesn't hurt anything either:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    Adding the CSS you suggest didn't do anything, unfortunately, especially since the margin:0 gets immediately overidden later in the CSS by the margin-left:194px. If I could use margin:0 I would have no problems, but I need to make way for the 194px-wide left-hand menu bar.

    Of course, I also just realized a few hours ago that any page with anchors is going to end up jumping to under the fixed divs. And unless there's some magic javascript that says "when you click on anchor, jump to 136 pixels ABOVE it" - and there doesn't seem to be - then all the pages with anchors won't work right. Gaaaaaaaaaaagh.

    Ah well. Thanks for trying!

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Here's a doctype I found on another part of my site that doesn't fix anything, but doesn't hurt anything either:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    See http://www.alistapart.com/articles/doctype/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Got it. Outdated doctype is the same as not having a doctype at all.

    Found this one that again doesn't fix anything, but doesn't break anything:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    Anyway, I think I thought of a way to attack the problem from a different angle. I've gotten rid of the margin-left:194px and gone back to 0. Instead, I'm trying to add an extra left-floating div that's 194px wide, to live under the fixed-position left-hand menu, and displace the page's main content box to the right.

    This has wildly different effects in each browser. Looks like it's time to study up on float positioning, but I feel closer to a solution (perhaps foolishly).

    Thanks!

  • #9
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Holy muck, I'm SUPER-close. I think. Probably.

    Rather than any float stuff, I've styled the main container thusly:

    Code:
     padding-left: 237px;
     padding-right: 43px;
     height: 1%
    The height: 1% is an IE hack; actually, I have the height: 1% in a conditional statement to only be applied to IE.

    (The 237px is the 194px of the menu plus 43px to match the padding on the right, so that the container is centered.)

    Result: almost perfect. But there's an unwanted horizontal scrollbar at the bottom because of four extra pixels trailing off the right side of the screen. Dangit. Almost solved? Or another dead end?

  • #10
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glory hallalujah.

    Code:
    .html, body {
    overflow-x: hidden;
    }
    I'm goin' to bed.


  •  

    Posting Permissions

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