Guimly Posted August 22, 2009 Share Posted August 22, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.