Help - Search - Members - Calendar
Full Version: An easier question
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Rubbedlung
Hey guys I'm currently using Dreamweaver MX to create a real-estate page. I'm currently trying to change the border colors of some "roundedcorner" images. The initial table looked fine, all four images lined up perfectly, however when I imported four changed color images, all of a sudden the bottom alignment was off. Does anyone know why this would happen? I've posted a picture and code of the effects. If anyone knows whats happening I would be grateful.

Picture of the problem

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hometeam Properties - Northeast Campus</title>
<style type="text/css" title="well rounded classes">
.bord { background-color: #E5DFB9;}
.bord .wr_toprow { background: url(image/roundedcornr_989359_r.gif) repeat-x; }
.bord .wr_toprow div { background: url(image/roundedcornr_989359_tl.gif) no-repeat top left; }
.bord .wr_toprow div div { background: url(image/roundedcornr_989359_tr.gif) no-repeat top right; }

.bord .wr_contentrow { background: url(image/roundedcornr_989359_r.gif) repeat-y; }
.bord .wr_contentrow .wr_content { background: url(image/roundedcornr_989359_r.gif) repeat-y right;}

.bord .wr_botrow { background: url(image/roundedcornr_989359_r.gif) repeat-x; }
.bord .wr_botrow div { background: url(image/roundedcornr_989359_bl.gif) no-repeat top left; }
.bord .wr_botrow div div { background: url(image/roundedcornr_989359_br.gif) no-repeat bottom right; }
.bord .wr_toprow, .bord .wr_toprow div,
.bord .wr_botrow, .bord .wr_botrow div
{ width:100%; height:30px; font-size:1px; }

.bord .wr_content { padding: 1px 2em; margin: 0; }
.bord p { padding: 0; margin: 1em 0 0 0; padding-bottom: 1em; }

#bord {
position: absolute;
left: 77px;
top: 62px;
width: 845px;
padding: 0;
margin: 0;
height: 557px;
}
body {
background-color: #000000;
}
.style1 {
color: #E2DA99;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: x-large;
}
.style3 {color: #5B5642}
.style5 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style6 {color: #5B5642; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('image/OSUCAMPUSdark.png','image/fallrentdark.png','image/featuredark.png','image/aboutdark.png','image/columbusrentdark.png','image/rentalsearchdark.png','image/smhouse.png')"><div id="bord">
<div class="bord"> <div class="wr_toprow"><div><div></div></div></div><div class="wr_contentrow"><div class="wr_content">
<div align="center">
<table width="80%" border="0" cellpadding="0" cellspacing="2" bordercolor="#E2DA99" bgcolor="#5B5642">
<tbody>
<tr>
<td align="center" bgcolor="#336600" height="30"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#E2DA99" bgcolor="5B5642">
<tbody>
<tr>
<td width="606" align="center" valign="middle"><span class="headline style1"> 105 East Woodruff Avenue </span></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<div align="center">
<table border="0" cellpadding="5" cellspacing="0" width="610">
<tbody>
<tr>
<td width="600"><span class="style6">105 East Woodruff is located in a prime location one block east of High Street. Near North Campus and the Fisher College of Business, it is also a very sought after unit.</span></td>
<td width="600"><div align="center"><a href="java script:;" onClick="MM_openBrWindow('image/btn_43%20E%2015th.JPG','','width=450,height=338')"><br>
</a><a href="java script:;" onClick="MM_openBrWindow('image/btn_103%20E%20Woodruff.JPG','','width=450,height=338')"><img src="image/btn_103%20E%20Woodruff.JPG" width="265" height="204" border="0"></a><br>
<br>
</div></td>
</tr>
</tbody>
</table>
<table width="580" height="160" border="0" align="center" cellpadding="0" cellspacing="5">
<tbody>
<tr align="center">
<td width="612"><a href="java script:;" onClick="MM_openBrWindow('image/btn_0103%20E%20Woodruff%20-%2007.JPG','','width=450,height=338')"><img src="image/tn_0103%20E%20Woodruff%20-%2007.JPG" width="150" height="112" border="0"></a> <a href="java script:;" onClick="MM_openBrWindow('image/btn_0103%20E%20Woodruff%20-%2008.JPG','','width=450,height=338')"><img src="image/tn_0103%20E%20Woodruff%20-%2008.JPG" width="150" height="112" border="0"></a></td>
</tr>
</tbody>
</table>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="610">
<tbody>
<tr>
<td width="610" align="center"><div align="center"><span class="headline style5"><span class="style3">For Leasing and Availability Info Contact Us at 614-291-2600 <br>
Or Email Us at</span> <a href="mailto:info@hometeamproperties.net">info@hometeamproperties.net</a></span></div></td>
</tr>
</tbody>
</table>
<br>
</div> </div></div><div class="wr_botrow"><div><div></div>
</div></div></div>
</div>
<p><div style="width:950px"><img src="image/space.gif" name="space" width="94" height="40" id="space"><a href="http://www.hometeamproperties.net/Forms/NorthwestCampus13.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('backbutton','','image/backbuttondark.jpg',1)"><img src="image/backbuttonlight.jpg" name="backbutton" width="28" height="32" border="0"></a><a href="http://www.hometeamproperties.net/Forms/ABOUTUS.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutus','','image/aboutusdark.jpg',1)"><img src="image/aboutuslight.jpg" name="aboutus" width="85" height="40" border="0"></a></a><a href="http://www.hometeamproperties.net/Forms/MAPS.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('campus','','image/Campuspropertiesdark.jpg',1)"><img src="image/Campuspropertieslight.jpg" name="campus" width="85" height="40" border="0"></a><a href="http://www.hometeamproperties.net/Forms/MAPSBIG.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('columbus','','image/columbuspropertiesdark.jpg',1)"><img src="image/columbuspropertieslight.jpg" name="columbus" width="85" height="40" border="0"></a><a href="http://www.hometeamproperties.net/Forms/SEARCH.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('search','','image/searchdark.jpg',1)"><img src="image/searchlight.jpg" name="search" width="85" height="40" border="0"></a><a href="http://www.hometeamproperties.net/Forms/BENEFITS.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('benefits','','image/benefitsdark.jpg',1)"><img src="image/benefitslight.jpg" name="benefits" width="85" height="40" border="0"></a><a href="http://www.hometeamproperties.net/Forms/INTERIORS.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('interiors','','image/interiorsdark.jpg',1)"><img src="image/interiorslight.jpg" name="interiors" width="85" height="40" border="0"></a><a href="http://www.hometeamproperties.net/Forms/RENTALFORMS.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rental','','image/rentalformsdark.jpg',1)"><img src="image/rentalformslight.jpg" name="rental" width="85" height="40" border="0"></a><a href="http://www.hometeamproperties.net/Forms/form.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('maintenance','','image/maintenancedark.jpg',1)"><img src="image/maintenancelight.jpg" name="maintenance" width="85" height="40" border="0"></a><img src="image/space.gif" name="space" width="22" height="40" border="0" id="space"><a href="http://www.hometeamproperties.net"><img src="image/smhouse.gif" width="65" height="49" border="0">
</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<!-- bord -->
</p>
</body>
</html>
Rubbedlung
Anyone?
Darin McGrew
Can you provide the URL (address) of a document that demonstrates the problem?
Rubbedlung
Hey Darin,

Sure..


http://www.hometeamproperties.net/Forms/webshell.htm
pandy
I don't see anything like in your picture. Tried IE6 and FF.
Rubbedlung
QUOTE(pandy @ Aug 25 2008, 12:33 PM) *

I don't see anything like in your picture. Tried IE6 and FF.



You don't see the bottom right hand rounded corner offset?
Darin McGrew
You've set the height of your div elements to 30px. The height of your background images for the rounded corners are 15px. If you make them match, then they'll line up better.

Turning on borders for specific elements can help you see what's going on.
Rubbedlung
Geez man. I can't believe I missed that. You're a life saver. Thanks so much for your help!!

DR

QUOTE(Darin McGrew @ Aug 25 2008, 12:52 PM) *

You've set the height of your div elements to 30px. The height of your background images for the rounded corners are 15px. If you make them match, then they'll line up better.

Turning on borders for specific elements can help you see what's going on.

pandy
QUOTE(Rubbedlung @ Aug 25 2008, 06:41 PM) *

You don't see the bottom right hand rounded corner offset?


I didn't see the mess at the top that your screen cap shows.
Rubbedlung
Thanks for your help.

QUOTE(pandy @ Aug 25 2008, 01:14 PM) *

QUOTE(Rubbedlung @ Aug 25 2008, 06:41 PM) *

You don't see the bottom right hand rounded corner offset?


I didn't see the mess at the top that your screen cap shows.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.