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 5 of 5
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Works in FF but not IE

    Sorry about the title cause I know there must be hundreds of these but I truly am lost hence the title.

    I am trying to create an online demonstration/builder of how to create a pure CSS 3 column layout. Problem is that the builder portion of the demonstration throws a error at me in IE and gives some funny results.

    Here is the demonstration.
    http://www.devinrolsen.com/tools/3column/index.html

    In the header you have a text input that allows you to change the left and right column sizes. In IE you enter in your desired numbers and in fact the sizes do change but you get and error. Also after the error the left column is not properly positioned but if you click the "Add Content" button in any of the columns the new size and left columns position are as desired.

    Here is my functions that preform the resizing of the columns.
    Code:
    function changeWidth()
    {
    	var cssCode = document.getElementById("cssCode");
    	var htmlCode = document.getElementById("htmlCode");
    	
    	cssCode.style.display="none";
    	htmlCode.style.display="none";
    	
    	var wrap = document.getElementById("wrap");
    	var wrapStyle = wrap.getAttribute("style","width");
    	
    	var left = document.getElementById("left");
    	var right = document.getElementById("right");
    	var center = document.getElementById("center");
    
    	function appendCSS()
    	{
    	var width = document.getElementById("columnWidth").value;
    	var centerWidth = parseFloat(wrapStyle)-parseFloat(width)-parseFloat(width);
    
    	center.style.width=centerWidth+"px";	
    	
    	center.style.marginLeft=width+"px";
    	center.style.marginRight=width+"px";
    	
    	left.style.marginLeft="-"+width+"px";
    	right.style.marginRight="-"+width+"px";
    	
    	var colWidth = parseFloat(width)-25+"px";
    	left.style.width=colWidth;
    	right.style.width=colWidth;
    	}
    
    	if (typeof wrapStyle == 'string') { // what Firefox returns
    		wrapStyle = wrapStyle.replace(/px/g,"");
    		wrapStyle = wrapStyle.replace(/width:/g,"");
    		
    		appendCSS();			
    		
    	} 
    	else if (typeof wrapStyle == 'object') { // what IE returns
    		wrapStyle = wrapStyle.cssText;
    		wrapStyle = wrapStyle.replace(/px/g,"");
    		wrapStyle = wrapStyle.replace(/WIDTH: /g,"");
    		appendCSS();
    	} 	
    }
    Any help is appreciated and well credited.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,316
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Probably the usual IE needing a delay problem. Try this:-

    window.setTimeout("appendCSS()", 100);




    Quizmaster: What season is said to start on the longest day in December?
    Contestant: Spring.
    Quizmaster: December, for God's sake!
    Contestant: Summer.

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Hey Philip M,

    That seems to break it even more cause now the value of the input box changes nothing. Still works fine in FF though lol.

    Its just weird.

  • #4
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    I think it might have something to do with IE and parseFloat that turns strings into an integer. I just dont know what it could be, nothing on the net tells me anything. I mean the whole layout adjusting its prior to your desired width is weird but again that might just be related to an IE timing issue but why the error.

    Anyone?

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    w00t got it to work finally.

    Philip M thanks for the lead with the timing issue cause it got me testing a little deeper.

    For what ever reason IE didn't like me to set a value for the widths of the columns to be anything less than an integer length of at least 3.

    I fixed the align problems with an extra function to add and quickly remove an empty paragraph tag in the right column with of course a time out of 1milisec on the remove. Seem to have kicked IE back into gear.

    I love IE and its continuing display of wacky zany fun filled faultiness, its what keep me on a payroll.


  •  

    Posting Permissions

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