Member Avatar for maxelcat

Please refer to the code attached. I am wanting to alter the right hand box contact information. It is a table cell, and I have set up two css classes to define it. ONe is .infobox and the other is .infoheader.

I am happy with the way it appears except I would like a small margin around the LHS of the gray area. When I use padding or margins in the .infobox it moves the blue heading over too. I expected this so I made the header relative and moved it back by the same number of pixels. I then get a gap on the right, so I made the header width:200px; and then the width of the whole cell started to change.

I have been messing with this now for some time and am getting a little frustrated.

Any ideas please

Many thanks

Edward

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>Ian Smith</title>
		
		<script language="JavaScript" type="text/javascript">
			var objNavMenu = null;
			var prevObjNavMenu = null;
			var prevObjDropMenu = null;
			var numDropMenu = 3;
			////// link styles
			var bgLinkColor = '#616161';
			var bgLinkHover = '#045396'
			var bgLinkActive = '#000000'
			var linkColor = '#ffffff'
			var linkHover = '#ffffff'
			var linkActive = '#616161'
			
			var isIE = null;
			if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) isIE=1;

			function initDropMenu () {
				document.onclick = hideDropMenu;
				for (i=1; i<=numDropMenu; i++) {
					menuName = 'dropMenu' + i;
					navName = 'navMenu' + i;
					objDropMenu = document.getElementById(menuName);
					objNavMenu = document.getElementById(navName);
					objDropMenu.style.visibility = 'hidden';
					objNavMenu.onmouseover =  menuHover;
					objNavMenu.onmouseout = menuOut;
					objNavMenu.onclick = showDropMenu;
				}
				objNavMenu = null;
				return;
			}

			function  menuHover(e) {
				document.onclick = null;
				hoverObjNavMenu = document.getElementById(this.id);
				if (hoverObjNavMenu != objNavMenu) {
					hoverObjNavMenu.style.color = linkHover;
					hoverObjNavMenu.style.backgroundColor = bgLinkHover;
				}		
			}
			
			function menuOut (e) {
				document.onclick = hideDropMenu;
				outObjNavMenu = document.getElementById(this.id);
				if (outObjNavMenu != objNavMenu) {
					outObjNavMenu.style.color = linkColor;
					outObjNavMenu.style.backgroundColor = bgLinkColor;
				}
			}
			
			function showDropMenu(e) {
				menuName = 'drop' + this.id.substring(3,this.id.length);
				objDropMenu = document.getElementById(menuName);
				if (prevObjDropMenu == objDropMenu) {
						hideDropMenu();
					return;
				}
				if (prevObjDropMenu != null) hideDropMenu();
				objNavMenu = document.getElementById(this.id);
				if ((prevObjNavMenu != objNavMenu ) || (prevObjDropMenu == null)) {
					objNavMenu.style.color = linkActive;
					objNavMenu.style.backgroundColor = bgLinkActive;
				}
				
				if (objDropMenu) {
					xPos = objNavMenu.offsetParent.offsetLeft + objNavMenu.offsetLeft;
					yPos = objNavMenu.offsetParent.offsetTop + objNavMenu.offsetParent.offsetHeight;
					if (isIE) {
						yPos -= 1;
						xPos -= 0;
					}
					objDropMenu.style.left = xPos + 'px';
					objDropMenu.style.top = yPos + 'px';
					objDropMenu.style.visibility = 'visible';
					prevObjDropMenu = objDropMenu;
					prevObjNavMenu = objNavMenu;
				}
			
			}
			
			function hideDropMenu() {
				document.onclick = null;
				if (prevObjDropMenu) {
					prevObjDropMenu.style.visibility = 'hidden';
					prevObjDropMenu = null;
					prevObjNavMenu.style.color = linkColor;
					prevObjNavMenu.style.backgroundColor = bgLinkColor;
				}
				objNavMenu = null;
			}
			
		</script>
		<style type="text/css" media="screen"><!--
body {
	margin: 0px;
	padding: 0px;
}

#page {
	margin: 10px;
}

#menuBar {
	color: #999999;
	font-size: 10px;
	font-family: arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	text-transform: capitalize;
	display: block;
	margin-bottom: 5px;
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 99%;
	overflow: hidden;
	vertical-align: middle;
	border: solid 0px #000000;
	background-color: #616161;
	}

.menuHeader {
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	padding: 5px;
	margin: 0px;
	padding-right: 15px;
	display: inline;
	position: relative;
	border: 0px;
	}

a.menuLink {
	display: block;
	padding: 2px 5px;
	border-top: 1px solid #cccccc
	}

a.menuLink:link {
	color: #000000;
	text-decoration: none
	}

a.menuLink:visited {
	color: #000000;
	text-decoration: none
	}

a.menuLink:hover {
	color: #ffffff;
	background-color: #000000;
	text-decoration: none
	}

a.menuLink:active {
	color: #ffffff;
	text-decoration: none;
	background-color: #cc0000;
	}

.menuDrop {
	color: #999999;
	font-size: 10px;
	font-family: arial, Helvetica, sans-serif;
	background-color: #ffffff;
	background-repeat: repeat;
	visibility: hidden;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 1000;
	top: 60px;
	left: 0;
	width: 175px;
	height: auto;
	border-style: solid;
	border-width: 0 1px 1px;
	border-color: #003365
	}




.infobox {
	background-color: #e8eaec;
	font-size: 10px;
	font-family: arial, Helvetica, sans-serif; 
	margin-left: 10px;
	}


.infoheader {
	background-color: #336699;
	color:#FFFFFF;
	font-size: 12px;
	font-family: arial, Helvetica, sans-serif;
	position:relative;
	left:0px; 
	height:20px;
	width:200px;
	}





--></style>
	</head>

	<body bgcolor="#ffffff" onload="initDropMenu()">
	





<table width="758" border="0" cellspacing="0" cellpadding="0" align="center">
	<tr>
	<td width="233"><img src="logo.jpg" width="233" height="73" border="0"></td>
        <td width="121" background="centro.jpg">&nbsp;</td>
        <td width="404"><img src="fascia.jpg" width="404" height="73" border="0"></a></td>
        </tr>




<tr>
<td bgcolor=#616161 colspan="3">
<div id="menuBar">
	<div id="navMenu1" class="menuHeader">Menu 1</div>
	<div id="navMenu2" class="menuHeader">Menu 2</div>
	<div id="navMenu3" class="menuHeader">Menu 3</div>
</div>
		

<div id="dropMenu1" class="menuDrop"> 
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 1</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 2</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 3</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 4</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 5</a>
</div>


<div id="dropMenu2" class="menuDrop"> 
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 1</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 2</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 3</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 4</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 5</a>
</div>


<div id="dropMenu3" class="menuDrop"> 
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 1</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 2</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 3</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 4</a>
	<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">Link 5</a>
</div>
</td>
</tr>

<tr><td colspan="3"><img src="spacer.jpg" width="1" height="5" border="0"></td></tr>



	<table width="758" border="0" cellspacing="0" cellpadding="0" align="center">
	<TR><TD width="100%"><img src="ura.jpg"></td></tr>
	</table>


</table>






<table width="758" border="0" cellspacing="0" cellpadding="0" align="center">


<tr><td bgcolor="#ff00ff" colspan="5" border="0"><img src="spacer.jpg" width="1px" height="5px" border="0"></td></tr>



<tr>
	<td bgcolor="#ffffff" width="200px">&nbsp;</td>
	<td bgcolor="#ffff6f" width="29px">&nbsp;</td>
	<td bgcolor="#ffffff" width="300px" align="center"><img src="pavimenti_tim_GB.jpg"></td>
	<td bgcolor="#ffffff" width="29px">&nbsp;</td>
	<td width="200px" class="infobox" valign="top"><div class="infoheader">Contact Information</div>I think you are very 		good and I know that you will do well. Its a wonder to me that you haven't been promoted</P></td>
</tr>



<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td bgcolor="#ffffff" width="300px" align="center"><img src="cipriani_gb.jpg" width="300px" height="120px" border="0"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<tr>

</table>





</body>

</html>
  • 1 Contributor
  • 1 Reply
  • 107 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by maxelcat
Member Avatar for maxelcat

sorted it - moved both classes out of teh <td>!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.