<img> tag in HTML

AngelaE8654 · #11 (**permalink**) 07-13-09, 08:29 PM

Quote:

Originally Posted by job0107

Your programming style is very sloppy.
Your creating white space.
Get rid of all the blank lines and keep your <td></td>'s grouped together.
Do not break them apart unless you absolutely have to.
Or until you understand what creates white space and what does not.

Also, don't rely on creating white space to work all the time,
as all browsers do not handle white space the same.
Instead, use an HTML element like <br />, <p>, <span> or <div> to create white space.
And/or use CSS to adjust margins and padding to create white space.

Try it like this and see if the results are any better.

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">
<head>
<title>ARBUTUS - Children's Cultural Centre</title>
<!---<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">--->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="education, awareness, training, networking, research, arbutus, sustainable development, personality development, round tables">
<meta name="Description" content=" ARBUTUS, whose main thrust, is on Awareness, Education, and Networking for sustainable development has completed thirty years of fruitful existence. ">
<meta name="robots" content="index all">
<meta name="revisit-after" content="14 days">
<meta name="author" content="Manjusha Wadekar">
<meta name="Language" content="en-us">
<meta name="Alias" content="email2manju@gmail.com">
<meta name="Owner" content="email2manju@gmail.com">
<meta name="rating" content="Education:: Environment:: Training, Research, Networking">
<meta name="copyright" content=" ARBUTUS ">
<meta name="Classification" content="Education:: Environment:: Training, Research, Networking">
<meta name="bulletin-text" content=" ARBUTUS has worked in the fields of Awareness, Education for Sustainable Development for over thirty years now. ">
<meta name="distribution" content="Global">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Script-Type" content="Text/Javascript">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="reply-to" content="email2manju@gmail.com">
<link rel="stylesheet" type="text/css" href="arbutus.css" />
<style type="text/css" media="screen, tv, projection">
    @import "css/Menu.css";
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
    @import "css/Menu4IE.css";
    body { behavior:url("ADxMenu.htc"); }
</style>
<![endif]-->
<style type="text/css">
<!--
.style1 {color: #666666}
-->
</style>
</head>
<body class="leafybackground" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<a name="top">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td align="center" valign="top">
   <table width="781" border="0" cellspacing="0" cellpadding="0">
    <tr><td width="781"><img src="http://www.hotscripts.com/forums/images/arbutus_banner.jpg" alt="" width="781" height="148" border="0"></td></tr>
    <tr>
     <td bgcolor="#FFFFFF">
      <table width="100%" border="0" cellspacing="0" cellpadding="3">
       <tr>
        <td width="100%" valign="top" bgcolor="#000000">
         <div id="menu">
          <ul id="menuList" class="adxm">
           <li><a href="index.html">Home</a></li>
           <li><a href="projects.html">Projects</a>
            <ul id="ProjectsMenu">
             <li style="text-align:left"><a href="project1.html">Involving School Children</a></li>
             <li style="text-align:left"><a href="project2.html">Involving Youth</a></li>
             <li style="text-align:left"><a href="project3.html">Programmes for Educators</a></li>
             <li style="text-align:left"><a href="project4.html">Production of Education Support Material</a></li>
             <li style="text-align:left"><a href="project5.html">ESD Through Performing Art</a></li>
             <li style="text-align:left"><a href="project6.html">Towards Empowerment</a></li>
             <li style="text-align:left"><a href="project7.html">Community Support</a></li>
             <li style="text-align:left"><a href="project8.html">City's Development</a></li>
             <li style="text-align:left"><a href="project9.html">Six Networks</a></li>
            </ul>
           </li>
           <li><a href="international_links.html">International Links</a></li>
           <li><a href="celebrations.html">Celebrations</a></li>
           <li><a href="press_release.php">In Press</a></li>
           <li><a href="events.php">Events Calendar</a></li>
           <li><a href="our_team.html">Our Team</a></li>
           <li><a href="contact.html">Contact Us</a></li>
           <li class="last"><a href="sitemap.html">Sitemap</a></li>
          </ul>
         </div>
        </td>
       </tr>
       <tr>
        <td valign="top">
         <table>
          <tr>
           <td width="1%">&nbsp;</td>
           <td width="98%">
            <p align="left"><span class="redheader"><br><strong>Projects:</strong></span><br><br></p>
            <p align="justify">Arbutus with its wide spectrum of work has done multitude of projects; the list of which appears below. Click on any of the links below to read in detail on these projects.<br></p>
            <hr size="9" color="#000000">
            <p align="left"><a href="project1.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>Involving School Children</strong></a><br><br></p>
            <p align="left"><a href="project2.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>Involving Youth</strong></a><br><br></p>
            <p align="left"><a href="project3.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>Programmes for Educators</strong></a><br><br></p>
            <p align="left"><a href="project4.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>Production of Education Support Material</strong></a><br><br></p>
            <p align="left"><a href="project5.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>ESD Through Performing Art</strong></a><br><br></p>
            <p align="left"><a href="project6.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>Towards Empowerment</strong></a><br><br></p>
            <p align="left"><a href="project7.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>Community Support</strong></a><br><br></p>
            <p align="left"><a href="project8.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>City's Development</strong></a><br><br></p>
            <p align="left"><a href="project9.html"><img src="../images/bullet.JPG" border="0">&nbsp;&nbsp;&nbsp;<strong>Six Networks</strong></a><br><br></p>
            <table width="100%" border="0" cellspacing="5" cellpadding="0">
             <tr>
              <td align="right"><br><a href="#top" class="toplink"><img src="../images/top_arrow.gif" border="0" alt="Top"></a></td>
             </tr>
            </table>
           </td>
           <td width="1%">&nbsp;</td>
          </tr>
         </table>
        </td>
       </tr>
       <tr class="lightbluetable">
        <td height="20" align="center" nowrap class="footer"><i>Registered under Bombay Public Charitable Trusts Act. REG. NO.: E-847 (PUNE)</i><br>Copyright &copy; 2009. ARBUTUS. All rights reserved. Site Designed &amp; Developed By: <a href="mailto:email2manju@gmail.com" target="_blank" class="footer"> Manjusha Wadekar</a>.</td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</a>
</body>
</html>

Thank you. I'm a LOT less "techie" than the OP and I don't know much about CSS and all this stuff, but I notice that I also have white space at the top of my page. I suspect it has something to do with the "table" but it looks funny (especially in IE) and I'd like to get rid of it. My code isn't anywhere near as involved as the one shown by the OP, because if it was, I wouldn't understand it, anyway.

But if you have a "table" and the area above, around, and beneath it is too much white space, how does one get rid of that?

Hi from the Coast of Washington State, BTW.

job0107 · #12 (**permalink**) 05-08-10, 09:15 PM

Quote:

Originally Posted by AngelaE8654

Thank you. I'm a LOT less "techie" than the OP and I don't know much about CSS and all this stuff, but I notice that I also have white space at the top of my page. I suspect it has something to do with the "table" but it looks funny (especially in IE) and I'd like to get rid of it. My code isn't anywhere near as involved as the one shown by the OP, because if it was, I wouldn't understand it, anyway.

But if you have a "table" and the area above, around, and beneath it is too much white space, how does one get rid of that?

Hi from the Coast of Washington State, BTW.

I don't know what your table code looks like, but tables by default have padding and margins added to them.
Also the border by default is generally made up of an inner and outer border.
So some issues can be addressed by adjusting the cellspacing and cellpadding attributes.
While others can be addressed in the CSS with the "border-collapse:collapse;"

An example would be something like this:

HTML Code:

<table border='1' cellspacing='0' cellpadding='0' style='border-collapse:collapse;'>

The above code will remove all cell spacing and padding, and collapse the border to a two pixel wide border.
And if you make the border='0' then the border will be invisible.

Another example would be to declare the border using CSS.
This example will give you a one pixel wide border with no cell spacing or padding.

HTML Code:

<table cellspacing='0' cellpadding='0' style='border:1px solid #000;'>

By using one of the above examples, you can use CSS to add padding to individual cells to get the desired spacing in the cell.
You can also add margins to any element that may be contained in a cell to get the same effect.

Now if you have white space around the outside of your table, then you need to look at what type of container you table is housed in.
If it is in another table, then the parent table must have some cell spacing or padding applied to it.
Other than that, I don't see what could be causing white space unless you are appling some padding to the parent element that the table is housed in.

kenneylee1117 · #13 (**permalink**) 11-25-10, 05:27 PM

For some reason using CSS just seems so dang scary. I don't know why. All of my Blogs use it. But you're right html makes it more sloppy and slow to me. Baby steps is right

Kenney

christine555 · #14 (**permalink**) 06-10-11, 05:30 AM

Quote:

Originally Posted by kenneylee1117

For some reason using CSS just seems so dang scary. I don't know why. All of my Blogs use it. But you're right html makes it more sloppy and slow to me. Baby steps is right

Kenney

Hi Kenney,

That was what I was thinking about when it comes to CSS.

It can be quite complicated at times especially when there are a lot of codes involved.

Regards,
Christine

emtywan · #15 (**permalink**) 08-12-11, 01:12 AM

Quote:

Originally Posted by christine555

Hi Kenney,

That was what I was thinking about when it comes to CSS.

It can be quite complicated at times especially when there are a lot of codes involved.

Regards,
Christine

I think CSS makes things more easier now compared to like when you have to style using HTML tags, it can get very messy and crowded easily. Learning CSS is really easy, getting used to common used codes and looking at others CSS really helped me a lot.

bradly · #16 (**permalink**) 08-21-11, 05:07 PM

Thanks for the HTML and CSS lessons. CSS is very confusing for me at times. So much data to take in all at once.