Jump to content

Ie Css Div's Minimum Height


Guimly
 Share

Recommended Posts

Hi folks. Well, the thing is, I'm using IE 6. Recently I decided to try and make a script to get rounded angles for any div I desire. I came up with the formula, prepared the script, and when I got to a stage where I just need to get the variables to be in a function, it all went down. At first I worked with the document.write() function, and I discovered that IE 6 doesn't allow any div's with height below 12px. Found 2 solutions in google, putting a comment inside the div: <div style="height: 1px;"><!-- --></div>, and putting a   inside the div and adding font-size:1px; line-height:0. to its style. The fix worked fine until I switched from document.write() to adding everything in na string variable I would print out later. Now the folowing works fine in Opera 9.51 and Mozilla 3.0.13, however IE 6.0's hack doesn't work and the div's that form the angles are quite bigger than the expected 1px. I've tried whatever I could come up with...Found that if I put a character in the divs of the first div (top right angle), the rest 3 render fine, with just the 1st still being out of order. I really don't understand the problem and I don't think I can solve this myself (or at least not in a way I could understand what I am doing). Any help would be greatly appriciated.Note: Script is in progress, the goal is yet to be achieved, I could say I have complited it for Opera and Mozilla, but I decided to put the lightest code here, so that I can understand the fix, and so that I don't post any code more than the most needed - its easier to find an error in fewer lines imho :) So, thanks in advance...Here goes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<title>Rounded angles on a div</title>	</head>		<body><div id="simple_div"></div>		<script type="text/javascript">	/*____________GLOBAL VARIABLES____________*/ 			var border=1;			//border of the element			var color='green';		//the color of the element			var r=50; 			//radius = jpw big the angle should be			var width=200;			//width of the desired div			var middle_w=width-2*r;		//calculation of the width between 2 angles 			var height=400;			//height of the desired div			var middle_h=height-2*r;	//height of the height between 2 angles (space left for text)			var i=0;			//counter			var html="";			//container for the whole html during it's creation	/*____________THIS IS THE FIRST PART____________*/ 	/*____________Contains 4 divs - left top angle, middle part, right top angle and a div to containt them all____________*/html=html+"<div style='width: "+width+"px; height: "+r+"px;'>";	html=html+"<div style='width: "+r+"px; position: relative; bottom: "+(border-1)+"px; float: left'>";			for(i=r; i>0;i--)				{				x=(r*r - i*i);				x=Math.floor(Math.sqrt(x));				html=html+"<div style='float: right; clear: both;width: "+x+"px; height: 1px; border-left: solid "+border+"px black;  background-color: "+color+";'></div>";				}	html=html+"</div>";	html=html+"<div style='float: left; width: "+middle_w+"px; height: "+r+"px;border-top: "+border+"px solid black; background-color: "+color+";'></div>";	html=html+"<div style='float: left; width: "+r+"px;'>";			for(i=r; i>0;i--)				{				x=(r*r - i*i);				x=Math.floor(Math.sqrt(x));				html=html+"<div style='float: left; clear: both; width: "+x+"px; height: 1px; border-right: solid "+border+"px black;  background-color: "+color+"; '><!-- --></div>";				}	html=html+"</div>";html=html+"</div>";	/* ____________THIS IS THE SECOND PART____________*/ 	/*____________Contains a div - middle space in the element____________ */html=html+"<div style='width: "+width+"px; height: "+height+"px; border-left: "+border+"px solid black; border-right: "+border+"px solid black; background-color: "+color+";'> <!--Any text will go here--> </div>";	/* ____________THIS IS THE THIRD PART____________*/ 	/*____________Contains 4 divs, analogically to the 1st part____________ */html=html+"<div style='width: "+width+"px; height: "+r+"px; '>";	html=html+"<div style='width: "+r+"px; float: left'>";			for(i=1; i<=r;i++)				{				x=(r*r - i*i);				x=Math.floor(Math.sqrt(x)); 				html=html+"<div style='float: right; clear: both; width: "+x+"px; height:1px; border-left: solid "+border+"px black;  background-color: "+color+"; '></div>";				}	html=html+"</div>";		html=html+"<div style='float: left; width: "+middle_w+"px; height: "+r+"px; border-bottom: "+border+"px solid black; background-color: "+color+";'></div>";		html=html+"<div style='float: left; width: "+r+"px;'>";			for(i=1; i<=r;i++)				{				x=(r*r - i*i);				x=Math.floor(Math.sqrt(x));				html=html+"<div style='float: left; clear: both;  width: "+x+"px; height:1px; border-right: solid "+border+"px black; background-color: "+color+";'></div>";				}	html=html+"</div>";html=html+"</div>";//THIS SENDS THE PREPARED HTML FOR OUTPUTdocument.getElementById('simple_div').innerHTML=html;		</script>		</body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...