HTML - Ul Spacing Issues

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?

Here's a screenshot of what it's doing:



I want to eliminate the spacing all together so my Flash element can sit exactly within the div. If there's a better way of positioning the Flash please tell me!

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?

Hi there,

I'm having a problem with spacing between rows n an html tabel. First let me stress that I am no expert and just know basics to get me by. I have been using this amazing bespoke platform for events websites and adding little bits of html in.

The site in question is http://www.ffrp2.fatsoma.com/home.php. I'm sure that I am probably doing this the hard way but im a designer not a coder. My brother built the site builder but he's away skiing so cant ask him and a client wants his site down asap...



Here's the code I have used

<table width=960px border="0" cellspacing="0" cellpadding="0">

<tr height=332px><td width=960px>
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_55.jpg"/></a>
</td>
</tr>

<tr><td>
<table width=960px border="0" cellspacing="0" cellpadding="0">

<tr height=447px>
<td width=232px>
<table border="0" cellspacing="0" cellpadding="0">
<tr height=232px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_56.jpg"/></a>
</td></tr>

<tr height=101px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_57.jpg"/></a>
</td></tr>

<tr height=90px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_58.jpg"/></a>
</td></tr>
</table>
</td>




<td width=218px>
<table border="0" cellspacing="0" cellpadding="0">
<tr height=175px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_59.jpg"/></a>
</td></tr>

<tr height=101px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_60.jpg"/></a>
</td></tr>

<tr height=171px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_67.jpg"/></a>
</td></tr>
</table>
</td>



<td width=237px>
<table border="0" cellspacing="0" cellpadding="0">
<tr height=90px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_62.jpg"/></a>
</td></tr>

<tr height=101px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_68.jpg"/></a>
</td></tr>

<tr height=85px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_64.jpg"/></a>
</td></tr>

<tr height=171px><td>
<a href="button.php">
<img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_65.jpg"/></a>
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>



</table>


many thansk in advance for any help offerd

Mark

i want to move and image up at least -2px is that possible in html or css?

thanx 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.

I am a flash developer and our client wants this site to be built using mainly html, I am pretty good with html but not even close to an expert.

I have built a site with Flash vertical and horizontal nav bars above and beside my html content. In Firefox and Safari the site looks perfect, however in IE6 & IE7 there is about a 5 pixel gap between my vertical menu bar and the rest of my content. I have tried everything I know to correct this problem...

Any Ideas? They would be greatly appreciated....

Site Link

http://www.sacreative.com/education

how to solve the problem?

I am having 2 issues with html coding,
First off here
****HIT MUTE OR TURN VOLUME DOWN BEFORE CLICKING****

MY tables are too close together and i can not figure out how to space them out.

Secondly on the first table (the hockey playoff bracket) I want to center the text but when i try to use the only align=center(or something like that i have it used in the table below) it clears out the next cell, removing the bracket.

Can you help me fix these 2 issues please.
Thank You
tech-chef

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?

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.

Hi all,

I'm having a problem with trying to get a table to have a tidy border. I want the border around one td cell to join the image in the cell above it, but because there is a border around the cell the border in the cell below isn't joining with the one above, there is a white gap between the two.

This is the relevant code in the html file:
<table class="core">
<tbody>
<!-- menu -->
<tr>
<td width="200px">
<table class="menu">
<tbody>
<tr>
<td><img src="images\menuheading.jpg" alt="Mojo Menu" border="0"></td>
</tr>
<tr>
<td class="menumain">
Link1<br>
Link2<br>
Link3<br>
</td>
</tr>
</tbody>
</table>
</td>
<!-- main body -->
<td valign="top">Test Main</td>
</tr>
</tbody>
</table>

This is the code in the css file

body {
vertical-align: top;
font-weight: normal;
font-size: 12px;
color: #000000;
font-style: normal;
font-family: Verdana;
text-align: left;
margin: 0;
}

table.headerfooter {
background-color: #000066;
vertical-align: top;
text-align: left;
border: #000066 0px solid;
width: 100%;
color: #FFFFFF;
font-size: 10px;
text-align: center;
padding: 10px;
}

table.core {
vertical-align: top;
text-align: left;
border: #000000 0px solid;
background-color: #FFFFFF;
width: 100%;
padding: 10px;
font-size: 12px;
}

table.menu {
vertical-align: top;
text-align: left;
background-color: #FFFFFF;
width: 100%;
margin: 0px;
padding: 0px;
}

td.menumain{
border-left: #000066 1px solid;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-right: #000066 1px solid;
border-bottom: #000066 1px solid;
margin: 0px;
padding-top: 0px;
}

td.headerfooter-left {
text-align: left;
}


td.headerfooter-right {
font-size: 10px;
text-align: right;
}

p.menubody{
color: #FFFFFF;
padding: 4px;
border-left: #000066 1px solid;
border-right: #000066 1px solid;
}


Any help would be appreciated as I'm stumped!

In static FBML (which takes HTML) how do you decrease the spacing after the </p> tag? I have a heading and a subheading that and am separating the two via </p> but the spacing is too much. I can increase, but can't decrease it.

Just learning this stuff. I am having trouble controlling space between lines.
My HTML coding is resulting in too much space between lines. I am afraid I have no idea how to control spacing. I have fiddled with different coding. Here is the current version:
<td class="headerbg" colspan="2" width="600">
<div align="left"><p style="font-family:verdana; color:00bfff; font-size:30px;" >the amazing alexander technique </p><p style="font-family:verdana; color:00bfff; font-size:20px;" >so much more than 'posture' and pain relief </p>
</div>
</td>

Thanks for any help. Pointing me to resource where I can read the solution would be great.

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?