HTML - Mysterious Spacing Problem

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

Problem fixed

Hi Guys, I searched through older posts but I couldnt find the exact answer I was looking for.


I am redesigning a few things on my website, the page I am referring to can be seen here - http://www.adamhuckle.com/test2.htm - I would like for the two images and their corresponding text to be next to each other (as they are now) but with some spacing between them.

Is it possible to insert colums parhaps? I would like them to be side by side but with some additional spacing in between. Any help is welcome.

Thanks in advance!

ok, the website is http://brett.unixpod.com (its my personal website) i want the top banner to contact with the navigation bar. the problem is when i remove the padding the text goes out of line, but then the menu contacts with the picture. The css stylesheet is he brett.unixpod.com/css/home.css
if you dont understand what i mean by anything, ill try to explain, for heaven sakes, im only 14 years old, im still afraid of the boogie monster!!!

Hi, i've been trying to solve a problem for the last couple of hours and it is driving me mad, I can't find any help anywhere on the web so thought I would give this a whirl!

After placing an image map on my page, I added another image below it, but there is a tiny black vertical gap (black being the bg color) between them.

I have tried changing the location of the <br> tag in the script, have tried aligning and pretty much everything else obvious and I have no idea how to make them touch each other. Any help would be appreciated.

The page can be seen at: http://jask.freehostingcloud.com/contactjask.html

the annoying gap is between the navigation bar and the largest image.

This appears to only be a problem in IE (i'm running version 8 on Vista)

my code (which you can ofcourse view for your selves but i'll save you the time) is -

<body vlink="#ff0000" alink="#ff0000" link="#ff0000" bgcolor="black">
<CENTER>
<br>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90&currency_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" target="-blank">
<img src="http://jask.freehostingcloud.com/jaskgif.gif" width="907" border="0"></a><br>
<img src="http://jask.freehostingcloud.com/gobar.JPG" height="55" border="0" useMap=#purple border=0><MAP name=purple border="0">
<area shape="rect" coords="86,7,210,43" href="http://www.jaskgames.com" alt="Jask!" title="Jask!"/>
<area shape="rect" coords="257,8,381,44" href="http://jask.freehostingcloud.com/aboutjask.html" alt="All about Jask!" title="All about Jask!" />
<area shape="rect" coords="427,9,586,45" href="http://jask.freehostingcloud.com/contactjask.html" alt="Contact us about Jask!" title="Contact us about Jask!" />
<area shape="rect" coords="631,8,806,44" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90&currency_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" alt="Buy your own game!" title="Buy your own game!"/><br>
<TABLE background="http://jask.freehostingcloud.com/mainybar.jpg" valign="top" width="907" height="445" cellpadding="0" cellspacing="0">
<TR><td width="320" valign="top"></td>
<TD valign="top"><br><br>
<font face="arial" color="white"><center>
<form method="post" action="http://www.emailmeform.com/fid.php?formid=706822" enctype="multipart/form-data" accept-charset="UTF-8"><b><font face="arial" color=black></font> <div style="" id="mainmsg"> </div><br><font face="arial" color=black>Your Name: </font><input type="text" name="FieldData0" size="20"><br><br><font face="arial" color=black><b>Your Email Address: </font><input type="text" name="FieldData1" size="20"><br><br></font><textarea name="FieldData2" cols="44" rows="6"></textarea><br><br><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"><br></form>
<b><font face="arial" color=black><b>Thankyou for getting in touch, We will respond to you<br>
shortly. Alternatively, contact us directly by email:<br>
<a href="mailto:info@jaskgames.com">info@jaskgames.com</a>
</b>
</TD></tr>
</TABLE align="left"></map>
</body></html>

Many thanks in advance for any help, i'm totally stuck

Hi,

Thanks in advance for your help. I'm doing a web page that I would like to be viewed on 1024 resolutions without a horizontal scrollbar. It will contain images that are exactly 980px wide. The problem is that with ie7, as soon as it contains a div or a table, no matter what I do to try to remove all padding,margins,etc.. it adds 2px for each element (I guess 1px for each side). Below is some html as an example of my problem, where I've tried to remove everything I can think of... this works fine in firefox 3

<body style="width:998px;margin-top:0;margin-left:0;margin-right:0;padding:0;">

<div style="width:100%;textalign:center"><table border="0" cellspacing="0" cellpadding="0" style="width:998px;border-collapse:collapse;padding:0;margin:0;border:0;"><tr style="padding:0;margin:0;border:0;"><td style="padding:0;margin:0;border:0;">sdfsdfd</tr></td></table><div style="width:100%>
</body>

Just curious if anyone can solve my little problem, as apparently none of my knowledgeable HTML friends can figure it out. There seems to be a red box positioned above the menu bar he

http://www.evogarage.com/

However the problem doesn't lie within Firefox and is only seen while browsing with IE. Any thoughts on how to fix this issue?

Hi-
So i have this problem that i cant find a solution for. i am making a web page and on the web page is an accordian nav menu. i am editing it in dreamweaver. Now, when i look at the page in livewiew it looks fine. BUT when i post the page on the internet there is this bullet next to my nav menu!! I cant find the code for it! all the <ul></ul> start and end when they are supossed to! and <li></li> ends when its supposed to too! im pulling my hair out with this bullet. what do i do?
thanks

when a user clicks a link, a dotted-line box forms around it in many browsers. Code:

a:active{border: 0;}

Normal CSS doesn't seem to get rid of it. Anyone know how to do that?

Can anyone tell my why an extra line is appearing on this site in IE but not Firefox? And what's causing it, how to get rid of it?

http://www.jnsitedesign.com/zenphoto/weddings/

It's the line above the menu. Also why is the menu centering in IE and how do I get it to align to the right?

***nevermind, I figured out the menu. But the line is driving me insane and I can't figure out what's causing it

Thanks for any pointers!

So I have a pretty simple image gallery set up with arrows that go to the next and previous images at www.sailormoonthemovie.com/photos.html. But the arrows and the background seem to be activated as a link somehow to a separate portion of my site (it's using the link in the code right above it). I think I may be missing a tag somewhere? I'm not sure if this post is even in the right forum, if it's not I apologize. Thank you for taking the time to read this

Link

Mysterious yellow dots are appearing through my slideshow images in IE - works fine in all other browsers. Only appearing in darkest blacks - standard jpg saved images.

An ideas gratefully received

Hello HTML Forum community,

I volunteered to work on my organization's website, and it has all been going smoothly until now.

Notice the odd spacing on the following page:
http://gadshillcenter.org/aboutus/aboutus_needs.php

And pretty much any other page in the About Us Section.

But the following, seemingly identical page does not have this spacing:
http://gadshillcenter.org/newsevents...herreading.php

What can I do to remove these stupid breaks/spaces after the header? I compared each .php line per line, and they are both pretty much identical.

I pasted another header (from News and Events) into the About Us, and it still resulted in this spacing, proving that it is an issue with the About Us pages.

What might be causing this? It is driving me nuts!

Sincerely,
Andrew

Hey folks...

I've searched and searched for an answer for this, but with no luck. Probably because I don't know how to exactly describe my problem. Anyway, the issue is my page is displaying differently in IE and Firefox (surprise!). The spacing between the top image and the body divs are different. I'm not sure if it's an HTML issue or a CSS one.

The page in question is: http://www.project-43.com/

The CSS file is he http://project-43.com/images/style.css

It displays the way I want it too in Firefox. If you look at it in IE, you'll see the top image looks short, but that is because the spacing between the left menu area and the body on the right is too big.

I appreciate any pointers that you might be able to offer.

Thanks!

Hello Everyone: I am a novice HTML user - I use it to create a Help file (for an MS/Access database), using HTML Help Workshop. My question concerns line spacing, using the following code:

<b><u>Server:</u></b>
<ul>
<li>First List item...</li>
</ul>

Using this code, there will be a blank line between "Server" and "First List item...". Is it possible to eliminate this line and have the list start in the next line after "Server"?

Thanks. . .

Tony N.