 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
RottedPilot
Joined: 05 Aug 2008
Posts: 1
|
 Posted: Tue Aug 05, 2008 10:54 am HTML Conflict with CurvyCorners? |
 |
|
|
I'm currently using the "CurvyCorners" javascript helper, which works great by itself, however when I input a rollover image in a table above the "CurvyCorners" table, the corners stop working. Does anyone know a fix for this. I realize this might be a simple issue, but I can't seem to figure it out.
Any info would be greatly appreciated. Thanks for your time.
| Code: |
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Hometeam Properties</title>
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
<style>
.myBox
{
margin: 0 auto;
border: 3px solid #993300;
color: #E5DFB9;
width: 765px ;
height: 400px;
padding: 10px;
text-align: left;
background-color: #E5DFB9;
border: 3px solid #993300;
/*
background-image: url();
background-repeat: no-repeat;
*/
}
html,body{
height: 100%;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
background-image: url();
}
.style56 {font-family: Verdana, Arial, Helvetica, sans-serif;
color: #5B5642;
}
.style58 {
color: #5B5642;
font-family: "Copperplate Gothic Light";
}
body {
margin-left: 0px;
margin-right: 0px;
background-color: #000000;
background-image: url();
}
.style73 {font-weight: bold; font-size: large;}
.style76 {font-family: "Copperplate Gothic Light"; color: #5B5642; font-size: medium;}
.style77 {color: #5B5642; font-family: "Copperplate Gothic Light"; font-weight: bold; }
.style79 {color: #993300; font-weight: bold; }
.style81 {font-family: "Copperplate Gothic Light"; color: #5B5942; }
</style>
<script type="text/JavaScript">
<!--
window.onload = function()
{
/*
The new 'validTags' setting is optional and allows
you to specify other HTML elements that curvyCorners
can attempt to round.
The value is comma separated list of html elements
in lowercase.
validTags: ["div", "form"]
The above example would enable curvyCorners on FORM elements.
*/
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}
/*
Usage:
newCornersObj = new curvyCorners(settingsObj, classNameStr);
newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
*/
var myBoxObject = new curvyCorners(settings, "myBox");
myBoxObject.applyCornersToAll();
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body onload="MM_preloadImages('button/amenitiesdark.jpg')">
<br />
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="smhouse.gif" width="65" height="49" /></td>
<td><span class="style81"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','button/amenitiesdark.jpg',1)"><img src="button/amenitieslight.jpg" name="Image12" width="85" height="40" border="0" id="Image12" /></a></span></td>
<td><span class="style81"><img src="testtab.png" width="85" height="40" /></span></td>
<td><span class="style81"><img src="testtab.png" width="85" height="40" /></span></td>
<td><span class="style81"><img src="testtab.png" width="85" height="40" /></span></td>
<td><span class="style81"><img src="testtab.png" width="85" height="40" /></span></td>
<td><span class="style81"><img src="testtab.png" width="85" height="40" /></span></td>
<td><span class="style81"><img src="testtab.png" width="85" height="40" /></span></td>
<td> </td>
</tr>
</table>
<br />
<div class="myBox"><img src="image/Hometeam_Head.gif" width="740" height="47" align="top" /><img src="image/underline.gif" width="738" height="8" align="top" />
<table width="737" height="11" border="0" align="center"><!--DWLayoutTable-->
<tr>
<td width="731"><p align="center" class="style77">Big enough to offer you excellent service - Small enough to personalize it </p></td>
</tr>
</table>
<table width="343" height="287" border="0" align="left" cellpadding="7">
<tr>
<td width="337" align="left" valign="top"><img src="image/animat.gif" width="372" height="279" border="0" align="left" /></td>
</tr>
</table>
<table width="353" height="165" align="left" cellpadding="0" cellspacing="20">
<tr>
<td width="311" height="44" valign="top"><div align="left"> <span class="style58"><span class="style73">Leasing Office:</span><br />
28 East Eleventh Avenue<br />
Columbus, Ohio 43201</span></div></td>
</tr>
<tr>
<td height="59" valign="top"><div align="left"><span class="style56"><span class="style76"><span class="style79">Phone:</span> <br />
(614) 291-2600<br />
<span class="style79"><br />
Fax: </span><br />
(614) 291 2601<br />
<span class="style79"><br />
Emergency Pager:</span> <br />
(614) 849-9870<br />
<span class="style79"><br />
Email: </span>Infoathometeamproperties.net</span></span><br />
</div></td>
</tr>
</table>
<div align="right">
<p><br />
</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
<p> </p>
</div>
</body>
</html> |
|
|
sticks464
Joined: 31 Dec 2006
Posts: 1284
|
| Posted: Wed Aug 06, 2008 9:54 pm |
|
|
|
There should be an ending script tag for the curvey corners script and a beginning script tag for the image swap script.
| Code: |
myBoxObject.applyCornersToAll();
}
</script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
|
|
|
nikki
Joined: 24 Nov 2008
Posts: 61
|
| Posted: Tue Nov 25, 2008 10:28 am |
|
|
|
CSS can be used to make the corners curvy
.curve-corners{
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
} |
|
sticks464
Joined: 31 Dec 2006
Posts: 1284
|
| Posted: Tue Nov 25, 2008 3:15 pm |
|
|
|
nikki says
| Quote: |
CSS can be used to make the corners curvy
.curve-corners{
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
} |
css3 is not fully supported by most browsers.
The above method only works in safari for windows.
For FF to work there must be another rule applied and since all corners will be the same shorthand can be used.
All browsers except Safari and Firefox will get squared corners.
| Code: |
.box{
width: 120px;
height: auto;
border: 1px solid #000;
padding: 5px;
background: red;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
} |
http://www.css3.info/preview/rounded-border/ |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
