HTML - Spacing

Hello
I have an image in my html page, 'aigned left', and the text is pressed right againt the edge, almost no space at all. Now I have a border on the image, so if I play with "H space" it spaces with the border too, which is a pain.
how can I put a space so the text isn't right against the border? If you say CSS, I know very little about css, so would need some guidance.

Thank you.

I have a problem with my banner. the images have gaps between them, so it looks tacky.

Here is the Site:
http://www.freewebs.com/jaceyanimation/sitetemplate.htm (I don't have any problems with the sidebar)

Here is the code i made for it:
HTML Code:

<a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%201.PNG" border="0" alt="Jacey"></a>
<img src="http://www.freewebs.com/jaceyanimation/Part%202.PNG" border="0" alt=""><br>
<a href="http://www.freewebs.com/jaceyanimation/index.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%203.PNG" border="0" alt="Home"></a>
<a href="http://www.freewebs.com/jaceyanimation/about.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%204.PNG" border="0" alt="About"></a>
<a href="http://www.freewebs.com/jaceyanimation/product.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%205.PNG" border="0" alt="Products"></a>
<a href="http://www.freewebs.com/jaceyanimation/game.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%206.PNG" border="0" alt="Game"></a>
<a href="http://www.freewebs.com/jaceyanimation/animation.htm" target="_blank"><img src="http://www.freewebs.com/jaceyanimation/Part%207.PNG" border="0" alt="Animation"></a><br>
<img src="http://www.freewebs.com/jaceyanimation/Part%208.PNG" border="0" alt="">

Can anyone suggest what i could do, or even better, fix the code?

hey...hope i can sort this out quickly its only a small problem.. but if you look here ...

http://anastaciadreams.com/layouttest/test.html

youll notice on Internet explorer theres a space in the 2 parts of the banner area, how do i remove this?

http://www.mattburnsey.com/test.htm

I'm having trouble getting the tv and the mirror to stay connected. I should have room to widen the tv iframe a little more and I've tried cellspacing and cellpadding. What am I not trying that I should be?

Thanks.

I've got a scanned in document that has been processed by OCR - Omnipage - and saved as html.

The paragraphs often list five or six items.

Most of the paragraphs are single space but some are double spaced. In the original all are single spaced.

I would like them all to be single spaced.

The code seems very complicated with 'spans' and 'divs' and 'box' and 'style' and long lists of parameters repeated frequently. Too frequently I imagine, machine generated stuff, but I'm not an html coder.

The point is I couldn't figure out for the life of me what it was that caused one para to be double spaced and another to be single spaced.

Here's a sample of the code that causes double spacing (hope its okay to put snippets of code in these posts, moderator? )
<p><span
style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">*
To be informed of, and involved in, Centre Management and practices;</span></p>
<p><span
style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">*
To have accessibility to information about the Centre through written
policies and programs; and </span></p>
<p><span
style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">*
To be provided with support and assistance in the parenting role. </span></p>
<p
style="margin: 4.8px 0px 9.6px 9.6px; background-color: rgb(255, 255, 255); text-align: left; text-indent: 0px; line-height: normal;">&nbsp;</p>
</div>
<div class="Box"
style="border: 0pt none rgb(255, 255, 255); background-color: rgb(255, 255, 255); width: 549.65pt; left: 99.15pt; top: 1107px; height: 192px;">
<p

What I'm planning to do now is copy the whole section and paste to notepad to get rid of all html and then pick it up again and put it back into html.

I've tried NVU, Frontpage and Dreamweaver and I can't find a way in any of them to simply strip out all the crap and - obviously - I can't find a way to strip out this double spacing thing.

regards,

ab

Hello all,
I have recently swapped from IE to Firefox, and realised in the process that my navigation bars have excessive spacing when displayed through firefox. The site is http://www.aboutfarthings.co.uk
I have had a try but keep messing up the formatting. The site was created/is edited using Namo Web Editor 6.0 , and the nav bars are Namo standard bars.

Any help/advice appreciated.

Colin G.

Alright, so am finally trying to learn PHP...but I am using

<?php include('header.html'); ?>

For the header/footer...and it seems as if the problem is via html instead of the php...so I hope this posted in the right area...

The code for the header is this (as you can see I sliced in Imageready):

Code:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"  bottommargin="0"  marginwidth="0" marginheight="0">

  <!-- ImageReady Slices (mkdc4header.psd) -->
  <table id="HeaderTable" width="920" height="84" border="0" cellpadding="0" cellspacing="0"   style="padding-left:3px; padding-bottom:0px">
    <tr>
      <td rowspan="4">
        <img src="http://www.webmaster-talk.com/images/header_01.gif" width="70" height="84" alt=""></td>
        <td rowspan="2">
            <img src="http://www.webmaster-talk.com/images/header_02.gif" width="135" height="43" alt=""></td>
        <td colspan="7">
            <img src="http://www.webmaster-talk.com/images/header_03.gif" width="639" height="32" alt=""></td>
        <td rowspan="4">
            <img src="http://www.webmaster-talk.com/images/header_04.gif" width="76" height="84" alt=""></td>
      </tr>
    <tr>
      <td>
        <a href="/index.php"><img src="http://www.webmaster-talk.com/images/header_05.gif" alt="" width="87" height="11" border="0"></a></td>
<td>
            <a href="#"><img src="http://www.webmaster-talk.com/images/header_06.gif" alt="" width="74" height="11" border="0"></a></td>
  <td>
            <a href="http://www.moizkhan.com/blog"><img src="http://www.webmaster-talk.com/images/header_07.gif" alt="" width="80" height="11" border="0"></a></td>
  <td>
            <img src="http://www.webmaster-talk.com/images/header_08.gif" alt="" width="121" height="11" border="0"></td>
        <td>
            <a href="#"><img src="http://www.webmaster-talk.com/images/header_09.gif" alt="" width="87" height="11" border="0"></a></td>
  <td>
            <a href="#"><img src="http://www.webmaster-talk.com/images/header_10.gif" alt="" width="85" height="11" border="0"></a></td>
<td>
            <img src="http://www.webmaster-talk.com/images/header_11.gif" width="105" height="11" alt=""></td>
      </tr>
    <tr>
      <td colspan="8">
        <img src="http://www.webmaster-talk.com/images/header_12.gif" width="774" height="25" alt=""></td>
      </tr>
    <tr>
      <td colspan="8">
        <img src="http://www.webmaster-talk.com/images/header_13.gif" width="774" height="16" alt=""></td>
      </tr>
  </table>

The problem only exists in IE7 (haven't checked IE6...but I have checked in Firefox and Opera and they seem fine...so any ideas?

Live Demo: http://www.moizkhan.com/mkdc4php/

Hey,

How can I get rid of the space in between these 2 tables (see image), I don't know whether it's spacing or padding or something else. I've tried a few things but they didn't work.

Any suggestions?

I've goggled around already and implemented a few solutions, but I can't find anything that will solve it. The page I'm having problems with is he

http://www.team1225.com/bio.php

Towards the bottom there's a member generated bios section. Each of those green boxes should be touching like the two orange boxes are touching. That's what I'm having problems with. Firefox renders the page correctly but Internet Explorer struggles to. I've spent a couple of hours narrowing down the problem. Sorry if the html output is hard to read, its php generated.

Code:

<h3 class="bio" id="1bio"><p class="biot">Brian <img class="rank" src="img/prog.png"/></p></h3>
<div id="biobr" class="content">
     <table border='0' cellspacing='0' cellpadding='0' width='100%'>
     <tr>
             <td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
             <td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
     </tr>
     <tr>
             <td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
             <td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
     </tr>
      <tr>
             <td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
             <td>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</td>
      </tr>
</table>

<hr align='center' style='height: 1px; overflow: hidden; line-height:1px; border-bottom: 0px; width: 80%; color: #808080;'/>

<p align='center' style='color: #808080;'><i>Comment:</i></p>

<p style='color: black; margin: 1em; border: 1px solid #808080;'>Pecion sdejf asdf eeeaw dfalkdfjadsa asfaf cEqasdf.</p>

</div>            
</div>

The css for div.content is:
Code:

div.content {
        margin: 0px auto;
        background-color: white;
        color: black;
        width: 80%;
}

The <div id="biobr" class="content"> part is the div field that opens and closes that holds the bio for the user. This javascript action is not related my problem. If I take out all the p, div, and hr tags in that <div id="biobr" class="content"> tag it works and all the green boxes are touching under Internet Explorer. Firefox keeps working like it always does. I've seen problems discussed like this so I think there's a fix.

Thanks for any help,

Alex

I've set up a <ul> with some breaks between each <li>. The spacing differs between FF and IE. It seems that the first <br> is ignored by IE, but not FF. Anyone know why, or a workaround? Thanks.

I have a couple of really small spacing problems.

my website is www.betdemon.com

you will see from the pic that the spacing 1# on the left hand side is different to the spacing 2# on the right hand side and looks uneven. I want spacing 2# to be the same as 1# - how do i do this?


Also you will see there is a gap between banners (3#) but this doesn't appear when viewing in Firefox - How can I make the gap appear?

Thanks in advance

Hello,

I have a table text spacing problem. I'm trying to have two text elements (p's, spans's, whatever) stacked vertically or as close as possible underneath one of other. I cannot for the life of me remove the gap in between. I've tried margins, padding, cellpadding/cellspacing, border-collapse, and still, nothing works.

I've attached an example using primitive HTML.

Anyone have any ideas?

The code:

Code:

<table width="650" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>TEXT</td>
  </tr>
  <tr>
    <td>TEXT2</td>
  </tr>
</table>

Thanks!


Edit: Line-height did the trick.

Alright, I have a DIV with this as the background image:


I put two textboxes over them, the first one is aligned ok but the second one is too high. How do I space them out?

When I try br it goes down way too far.

Here is what it looks like right now:


Should I use a table? more DIVs? Or, is there a css code I could use to bring it down?

So, I am working on a website for the final project for one of my classes, and while it looks fine in Firefox and Safari, there is some funky spacing in my divs/table set up with my inline frame in IE: (I have IE 7, but I would like this to work in all versions as I'm not sure what browser my professor has)

http://grandmas.host-ed.net/

in IE, you will see there is a space below the top banner and another one between the footer and the border... how can I get rid of these?

Here is my code (image map removed b/c it's long and unneeded for my question)
Code:

<html>
<head>
<title>Grandma Mae's Country Naturals</title>
</head>
<body background="bg.jpg" bgproperties="fixed"> 

<center>

<table Cellpadding="0" Cellspacing="0" border="0">

<tr><td>
<div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-top-width:3px; padding-left:0ex 
padding-right:0ex padding-top:0ex padding-bottom:0ex">
<img src="gcn_nav2.jpg" usemap="#mymap" border="0">
</div></td></tr>

<tr><td>
<div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; padding-left:0ex padding-right:0ex 
padding-top:0ex padding-bottom:0ex">
<IFRAME name="inlineframe" src="home.html" width=854 height=350 frameborder="0"></IFRAME>
</div></td></tr>

<tr><td>
<div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-bottom-width:3px; 
padding-left:0ex padding-right:0ex padding-bottom:0ex padding-top:0ex">
<img src="footer2.jpg">
</div>
</td></tr></table>

<font color="FFCC99" size="1" face="Georgia, Times New Roman, Times, serif"><b>This site is not affiliated with Grandma Mae's County Naturals</b></font>

</center>
</map>
</body>
</html>

It's kind of improvised and I am no html expert so perhaps there is a better way to get the look I was going for? Also, I know there is some extra/unneeded code there, but it's all stuff I added when trying to fix the spacing (and it didn't work) and was too lazy to take away. haha

Thanks a ton,

Nathalie

I'm new to HTML/XHTML, so thanks for helping me understand the spacing rules that are applying he

HTML:

Quote:
<div id="nav">
<ul>
<li><a href="index.html">Main</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact and Networking</a></li>
</ul>
</div>
CSS:

Quote:
#nav
{
height: 37px;
text-align: center;
background-color: #858585;
}

#nav ul
{
margin: 0;
}

#nav li
{
display: inline;
}

#nav a
{
padding: 9px 12px 9px 12px;
line-height: 38px;
border-left: 1px solid black;
}
Between every link in my horizontal navigation menu, there is a space (which I don't want). In order to get rid of this space, I have to change my HTML code to...

Quote:
<div id="nav">
<ul>
<li><a href="index.html">Main</a></li><li><a href="resume.html">Resume</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact and Networking</a></li>
</ul>
</div>
...which in turn sacrifices readability. This all seems very counter-intuitive to me, since I was under the impression that I could format my code readably without having to worry about its presentation. I can only guess that my line breaks (textual line breaks, not actual <br /> tags) are being interpreted as white space within my <ul>. If this is the case, my only other option would be to display my <li>s as block elements with zero margins, float them, and then use margins to push them to the middle (which is all WAY uglier than being able to center them with text-align).

This is how I understand what's going on. If I am correct, does this mean I'm forced to sacrifice readability for functionality?