HTML Help

RottedPilot · Joined: 05 Aug 2008 Posts: 1

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">

</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">
<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: 1283

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: 60

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: 1283

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/