Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

img/html problem

Status
Not open for further replies.
stvchez123

stvchez123

Programmer
Apr 18, 2002
59
US
I'm stumped as to why my image wont butt up against the html table cell. I tried a number of things, but nothing has worked so far.

Here is the problem:

(notice how the globe img doesn't sit tight on the table cell)

Here is the html I have:

<table width="750" border="0" cellspacing="0" cellpadding="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><tr>
<td valign="top"><img src="images/globe_cut.jpg" align="left" border="0"><br>

thanks in advance
 
Sort by date Sort by votes
Try this for your main page (backup your present file!)

Code: 
<html>

<head>
<title>Nicksic-Lampertz and Associates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style/nla_style.css" type="text/css">

<!-- #INCLUDE file = "js/headerJS.shtml" -->

</head>

<body bgcolor="#C0C0C0" text="#000000" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0" ONLOAD="preloadImages();">
<div align="center"><!-- BEGIN OUTSIDE TABLE -->


<table width="750" border="0" cellspacing="0" cellpadding="0" marginwidth="0"
marginheight="0" bgcolor="#FFFFFF">
<tr>
<td width="750" bgcolor="#FFFFFF">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"[/URL]
WIDTH="700" HEIGHT="110" id="title" ALIGN>
<param name="movie" value="flash/title.swf">
<param name="loop" value="false">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF"><embed src="flash/title.swf" loop="false" quality="high" bgcolor="#FFFFFF" WIDTH="700"
HEIGHT="110" NAME="title" ALIGN TYPE="application/x-shockwave-flash"
PLUGINSPAGE="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer">[/URL]
</object>
</td>
</tr>
<tr>
<td height="27" valign="middle" width="750"><div align="center"><!-- NAV BAR -->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"[/URL]
WIDTH="750" HEIGHT="27" id="nav" ALIGN="">
<PARAM NAME=movie VALUE="nav.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFF00> <EMBED src="nav.swf" quality=high bgcolor=#FFFF00 WIDTH="750" HEIGHT="27" NAME="nav" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"></EMBED>[/URL]
</OBJECT>

</div></td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><tr>
<td valign="top" align="left" >
<img src="images/globe_cut.jpg" border="0"></td><td><br>
<br>
<h3>Marketing & Advertising Consulting</h3><br><br>
<p>
NLA strives to keep our overhead low and your price fair.&nbsp; We draw on a pool of
professionals as projects dictate.&nbsp; This results in the most cost effective marketing
programs. <p>NLA Integrates marketing research and planning throughout all aspects of our
approach to the marketing and advertising process.&nbsp; We feel very strongly about this
and we feel our results prove its effectiveness.</p><br>
<p><i><a href="mailto:del@nlainc.com"><b>Contact us today</b></a> to receive a free consultation.</i><br>
<br>
<br>
<br>
</td>
<td valign="bottom" align="right" rowspan="2">
<br>
<br>
<img border="0" src="images/side_main3.jpg"></td>
</tr>
<tr>
<td valign="bottom" colspan="2"><p align="center"><font color="#00827C">4407 Gloster Road - Dallas,
TX&nbsp; 75220<br>
Phone: 214/352-9108&nbsp; Fax: 214/352-8315&nbsp; Email: <a href="mailto:del@nlainc.com">del@nlainc.com</a></font>
</td>
</tr>

<tr>
<td valign="top" colspan="3" bgcolor="#990099"><font color="#FFFFFF">&nbsp;Copyright
2004 NLA, Inc. &nbsp;All Right Reserved</font></td>

</tr>
</table>
</div>
</body>
</html>

Your "Marketing & Advertising Consulting" section is messed up from what it was, but it still works right?
 
Upvote 0 Downvote
align="left" on your image src tag is causing it.

Also, because topmargin; leftmargin is not a w3org compliant tag for the body tag, define the <body> tag in your CSS style sheet:

Code: 
body {
	margin: 0px;
	padding: 0px;
	background-color: #C0C0C0;

}

That way your body tag in your html should only have this now:

Code: 
<body ONLOAD="preloadImages();">

Trying to figure out why the align=left in your image src is causing it to do that
 
Upvote 0 Downvote
Feel free to do what you wish WizyWyg. My code output that I submitted doesn't match stvchez123's output, but it is close enough for his purposes on that page.
 
Upvote 0 Downvote
This is a good time as any to learn how CSS can help you out with layout problems, just like this.

I re-worked your entire page, but hope you can understand it better (in place of your flash i put temporary images that are the same size as your flash files in dimensions, just replace them with your swf files)

Code: 
<html>
<head>
<title>Nicksic-Lampertz and Associates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style/nla_style.css" type="text/css">
<!-- #INCLUDE file = "js/headerJS.shtml" -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body ONLOAD="preloadImages();">
<table width="750" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td bgcolor="#FFFFFF"><img name="blah" src="" width="700" height="110" alt="" style="background-color: #000000"></td>
  </tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" marginwidth="0"
marginheight="0" bgcolor="#000000">
  <tr> 
    <td height="27" valign="middle" width="750"><div align="center"><img name="blah2" src="" width="750" height="27" alt="" style="background-color: #333333"> 
        <!-- NAV BAR -->
      </div></td>
  </tr>
</table>

<table width="750" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td valign="top"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="left" valign="top"><div id="leftcontent"><img src="globe_cut.jpg" width="268" height="246" border="0"></div><div id="rightcontent">
              <h3>Marketing & Advertising Consulting</h3>
            <p>&nbsp;</p>
            <p> NLA strives to keep our overhead low and your price fair.&nbsp; 
              We draw on a pool of professionals as projects dictate.&nbsp; This 
              results in the most cost effective marketing programs. 
            <p>NLA Integrates marketing research and planning throughout all aspects 
              of our approach to the marketing and advertising process.&nbsp; 
              We feel very strongly about this and we feel our results prove its 
              effectiveness.</p>
            <br> <p><i><a href="mailto:del@nlainc.com"><b>Contact us today</b></a> 
              to receive a free consultation.</i></div>            
            <br>
            <br>
            <br>
          </td>
        </tr>
        <tr>
          <td align="center"><font color="#00827C">4407 Gloster Road - Dallas, 
            TX&nbsp; 75220<br>
            Phone: 214/352-9108&nbsp; Fax: 214/352-8315 Email: <a href="mailto:del@nlainc.com">del@nlainc.com</a></font> 
          </td>
        </tr>
      </table>
    </td>
    <td width="121" valign="bottom"><img src="My%20Pictures/side_main3.jpg" width="121" height="361" border="0"></td>
  </tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF">
  <tr> 
    <td valign="top" colspan="2" bgcolor="#990099"><font color="#FFFFFF">&nbsp;Copyright 
      2004 NLA, Inc. &nbsp;All Right Reserved</font></td>
  </tr>
</table>
</body>
</html>

Your CSS style sheet should now contain new elements , redefined body tag, and #leftcontent / #rightcontent divs

Code: 
#leftcontent {
	margin: 0px;
	padding: 0px;
	width: 45%;
	background-color: #fff;
	left: 0px;
	float: left;
	position: relative;
	top: 0px;
}
#rightcontent {
	left: 0px;
	width:330px;
	background-color:#fff;
	position: relative;
	top: 0px;
	height: 275px;


}
td {
	font-family: verdana, sans-serif;
	font-size: 10px;
	font-weight:normal;
	line-height: 13px;
	display: block;
	margin: 0px;
	padding: 0px;


		}
		

		p { 
			font-family: verdana, sans-serif;
			font-size: 11px;
			font-weight:normal;
			color:000000;
			line-height: 16px;	
			display: block;
			margin: 0px 10px 5px 10px;
		}
		
		h3 { 
			font-family: helvetica, sans-serif;
			font-size: 14px;
			font-weight:bold;
			color:000000;
			line-height: 0px;	
			margin: 20px 20px 0px 10px;
		}
		
		a { 

			text-decoration: none;
		}
		a:hover { 
			color: 9E0AA4; 

		}

		a.blue { 
			color: 2849EF;
			text-decoration: none;
		}		 

		a.blue:hover { 
			color: 9E0AA4; 

		}
		
		.note { 
			font-family: verdana, sans-serif;
			font-size: 9px;
			font-weight:normal;
			color:FFFFFF;
			line-height: 12px;	
			display: block;
			margin: 0px 10px 5px 10px;
		}
body {
	margin: 0px;
	padding: 0px;
	background-color: #C0C0C0;
	text-align: center;


}

Feel free to ask questions about any code you see here that you do not understand.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
233
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
703
PeDa
PeDa
SitesMasstec
  • Locked
  • Question
How to have an HTML opened automatically in an e-mail
Replies
3
Views
253
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top