HTML - Very Strange Gaps In Images In Tables

For some reason, in IE8 (or all IE's, for all I know) there is a mysterious little purple line at the bottom left corner of all of my navigation button images, excluding the first one. In FF it works just fine..Chrome, Safari and Opera I don't have, so for all I know it could just be FF that's displaying it correctly.

Here's my code:

HTML
HTML Code:

<a href="index.html" style="margin:0">
	    <img src="images/nav_home.png" alt="HOME" onmouseover="this.src='images/nav_home_hover.png';" onmouseout="this.src='images/nav_home.png';" />
	  </a>
	  
	  <a href="the-author.html">
	    <img src="images/nav_author.png" alt="THE AUTHOR" onmouseover="this.src='images/nav_author_hover.png';" onmouseout="this.src='images/nav_author.png';" />
	  </a>
	  
	  <a href="contact.html">
	    <img src="images/nav_contact.png" alt="CONTACT US" onmouseover="this.src='images/nav_contact_hover.png';" onmouseout="this.src='images/nav_contact.png';" />
	  </a>

CSS
Code:

img 
{ 
border: 0px; 
margin-left: 1.75em; 
}

I also attached a screenshot.

Thanks,
C-Style

Hi everyone, I'm new here and a total newbie - so please bear with me!

I want to create a table with 3 rows x 5 columns:

Row 1: basic text

Row 2: clickable image

Row 3: clckable text

The image in row two would be in the forum gallery, but the destination when the user clicks the image should be to the bands website.

No matter what I do, i can't get a clickable image to sit into the table!

If anyone could help with this simple piece of code I would really appreciate it.

Thanks,

Dave

I have an 8 year old website with 99.9% valid HTML4.01 transitional code. The only problem I'm having is that the attribute "BACKGROUND" in my tables is not recognized as valid. I need to use images as backgrounds in some of my tables. Is there any way I can do this with HTML, or maybe an in line style sheet? I'm not at all familiar with CSS so I'm hoping that there is another way. Thanks.

http://www.shiningstarwebdesign.com/pawcb/coaches.htm

I used the design portion of Dreamweaver to put pictures in to the tables that say Competitor 1, 2, 3, and 4, and when opened in a browser, the pictures did not appear. I checked the HTML and couldn't find the problem. Does anybody know why these pictures are not showing up?

I need my background image in the main table to stretch the entire length of the viewers browser whenever the content of the page is not enough to require the use of the entire page.

Using table height at 100% it will only extend as far as the farthest south piece of content on the page, which might not be the bottom of the browser window.

The site is here, and i'm currently using a table height of 750px to take it off the bottom of the page. However in IE i get an unwanted scrollbar.

Is there an easy workaround of do i just accept the scrollbar is going to be there?

Also, if your bored can you tell me why IE wont valign the td to the top of the cell, whereas FF will, and how i might fix that pls?

Thx!

Please take a look at the image I attached to this post.

If you look closely, you can tell that the bottom half of the lightbulb, the "Imaginit" title, and the yellow bar to the left of that is all one image file.

Above that is a larger image (part of which has the top half of the lightbulb) that spans the whole page. I'm sure you can tell by the break in the lightbulb and the white borders around the image where this question is going...

I'm trying to get rid of those breaks.

Currently, the large image on top is in its own span tag. Below that everything else is organized in a table structure.

I've messed with border-collapse: collapse, tried setting the margins to negative values (of em, px, & pt), set border widths to 0. Nothing gets rid of those spaces.

Setting the background color for the cells I think would work, but the problem there is that the bottom-half-lightbulb/Imaginit image's cell is set to colspan=2, rowspan=2. Is it possible to have the image just be "laid" over four individual cells? Just a thought.

I'm doing this in Visual Studio 2005/ASP.NET if that helps any.

Thanks for anyone's help.

Hello all !

This worked fine on another design I did but now it doesn't seem to want to work today.

Firefox

http://img148.imageshack.us/img148/5349/screen1pe5.gif

Internet Explorer

http://img516.imageshack.us/img516/8704/screen2wl8.gif


To the code:
HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Garcia's Blog</title>
<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="container">
    <div id="banner"></div>
    <div id='navbar'>
                   <ul>
                      <li><a href='/index.html'><img src='images/navb1.gif' width='122' height='40' alt='' /></a></li>
                      <li><img src="images/navspacer.gif" height="42px" width="12px" alt="" /></li>
                      <li><a href='about.html'><img src='images/navb2.gif' width='122' height='40' alt='' /></a></li>
                   </ul>
        <div id='navend'><img src="images/navend.gif" height="51px" width="10px" alt="" /></div>
    </div>
    <br/>
  <div class="contentmargins">
    <div id="leftcontent">
            <div id="leftcontentbg">
            <div id="leftconh"><h2>Welcome to my blog!</h2></div>
            <br/><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus leo neque, facilisis at, nonummy eget, ultricies sed, mi. Nam ac justo id ligula elementum condimentum. Phasellus ante. Nulla justo felis, tincidunt non, dignissim at, tempor non, felis. Suspendisse tincidunt elementum sapien. Nulla in arcu. Vivamus fermentum, mauris cursus consectetuer molestie, nulla diam viverra eros, in commodo mauris sapien et erat. Donec vel leo. Quisque varius, metus ut venenatis convallis, eros lectus blandit nibh, eget viverra dolor metus nec diam. Mauris pellentesque. In hac habitasse platea dictumst. Phasellus sed ante. Fusce tempus. Quisque viverra sapien quis neque.</p>
            </div>
<img src="images/leftend.gif" width="519px" height="3px" alt="" />
            </div>

    <div id="rightcontent">
    <img src="images/navh.gif" width="241px" height="10px" alt="" />
    <br/>
    <div class="rightcategory"><h2>Pages</h2></div>
    <p>We be doing it!</p><br/>
    <div class="rightcategory"><h2>Categories</h2></div>
    <p>We be doing it!</p><br/>
    <div class="rightcategory"><h2>Blogroll</h2></div>
    <p>We be doing it!</p><br/>
    <div class="rightcategory"><h2>Meta</h2></div>
    <p>We be doing it!</p><br/>
    <img src="images/rightcone.gif" height="10px" width="241px" alt="" />
    </div>
  </div>
  <div id="footer"><br/><p><a href="http://garciawebmedia.com"><img src="images/copyright.gif" width="249px" height="20px" alt="" /></a> Proudly Powered by Wordpress</p> </div>
</div>
</body>
</html>

Code:

html, body {
background: #bfe9ff;
color: #57a3c2;
font: 12px verdana;
height: 100%;
margin: 0px;
padding: 0px;
}
a img {
border:0;
}
* {
margin: 0;
padding: 0;
}
div#container {
width: 800px;
background: #dff5fe;
border: 1px solid #46849e;
}
div#banner {
width: 741px;
height: 105px;
background-image: url('images/banner.gif');
}
#navbar {
height:51px;
background-image: url('images/navbg.gif');
width: 540px;
}
#navend {
height: 51px;
width: 10px;
float: right;
}
#navbar ul {
list-style:none;
}
#navbar ul li {
float:left;
margin: 4px 0 0 8px;
}
div#leftcontent {
float: left;
width: 516px;
}
div#leftcontentbg {
background-image: url('images/leftconbg.gif');
width: 516px;
}
div#leftconh {
width: 511px;
height: 37px;
background-image: url('images/leftconh.gif');
margin-left: 4px;
}
div#rightcontent {
background-image: url('images/rightconbg.gif');
width: 241px;
float: right;
}
div#rightconh {
width: 241px;
height: 10px;
background-image: url('images/navh.gif');
}
.rightcategory {
width: 227px;
height: 41px;
background-image: url('images/cate.gif');
margin-left: 10px;
}
div#footer {
display: block;
clear: both;
}
.contentmargins {
margin-left: 10px;
margin-right: 10px;
}
p {
margin-left: 10px;
margin-right: 10px;
}

h2 {
font: 18px verdana;
padding: 8px 0 0 10px;
margin-left: 8px;
margin-right: 8px;
}

Live preview: http://garciawebmedia.com/dev/blog/

Does anyone want to help me please ? If they could explain why Internet Explorer does this? I know my right content is structured differently from my left because I was trying to get the left side fixed first but it didn't work they way I wanted to.

Thanks.

When i look at the website on my computer, no gap, but when i upload it online i get a big gap between the menu bar and the content:

http://boburob.50webs.com/test/index.html

http://boburob.50webs.com/test/testcss.css

Thank you for any help!

PS ignore the content, i need to learn html and css and i suck at coming up with ideas lol

Hi Anyone
I'm a novice at HTML, just beginning and have built a template page for my son, but I have 'gaps' inbetween sections of my layout within the table and cannot work out why. Can anyone help?
You can see this template at the following address:
http://www.private-chef.co.uk/home4.html.

Appreciate any guidance on how I fix this.
THanks

Hi there can anyboy tell me why Firefox renders text in a table differently than IE.
The table is being controlled via css and there is padding to set the text a llittle down and to the right.

In IE the text renders as it should but Firefox leaves a large gap and I just cant get them to render the same.

Any ideas of a working solution to this?

It seems to me like it is mainly the top space which is way too much in FF.

Thanks,

Al.

Hi all, im having a an extremely frustrating time trying to solve this. Basically, i have a series of divs stacked on top of each other, but both FF and IE render these with small one or 2 pixel gaps in between the divs. Ive included code for illustration:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Website</title>
		<link rel="stylesheet" type="text/css" href="styles/main.css"/>
	</head>
	<body>
			<div id="status">
				Hello
			</div>
			<div id="container">
				<div id="hp_large_splash">
					<img src="img/oth.png" alt="splash"/>
				</div>
				<div id="upper_content">
					sdfsdfsdfsdf
				</div>
				<div id="content_footer">
					<img src="img/cont_footer.png" alt="footer"/>
				</div>
				<div id="lower_content">
					
				</div>
				<div id="footer">
					Hello
				</div>
			</div>
			<div id="disclaimer">
				Disc
			</div>
	</body>
</html>

CSS:
Code:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	/*background: white;*/
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


html, body {
	background-color:#505564;
	background-image:url('img/bg.jpg');
	background-repeat:repeat-x;
	padding:0;
	margin:0;
	color:#fff;
	font-family:Arial, sans-serif;
}

#status
{
	width:100%;
	background-color:#3b4152;
	height:18px;
}

#container
{
	width:900px;
	margin-left:auto;
	margin-right:auto;
	color:#333;
}

#container div
{
	margin:0;
	padding:0;
}

#top
{
	margin-top:50px;
	width:900px;
}

#nav
{
	margin-top:20px;
	width:900px;
}

#nav_leftstop, #nav_rightstop
{
	float:left;
}

#upper_content
{
	background-color:#FFF;
}

#hp_large_splash
{
	margin-top:20px;
}

#content_footer
{
	height:10px;
}

#disclaimer
{
	width:100%;
	background-color:#3b4152;
	height:60px;
}

/*Classes*/

.navitem
{
	float:left;
	width:880px;
	background-color:#fff;
	height:50px;
}

.cleardiv
{
	clear:both;
}

Ive included an image he http://www.cumbriawebsolutions.co.uk/untitled2.png
to demonstrate my problem a bit better. Any help would be appreciated.
thanks

Hey guys, im a noob at html, but im a graphic designer so decided to put my own site together.
i used dreamweaver to make the code but have come across a problem.

www.londonjam.co.uk

in firefox, everything is ok, but in explorer there are gaps.
just below the email address and at the bottom of the p on portfilio.

Could someone please help me as i need to promote my site, but want it looking correct before i do
Thanks
Dan

Theres a gap bewtween my flash movie in a td and the td below. Its works perfectly in firefox just not in ie. I hve attached a screen shot of the problem in ie,

thanks

Code:

<html>
<head>
<style type="text/css">
	img
	{	
		border: none;
	}
	.content
	{
		padding: 30px 30px 20px;
	}
	.nav
	{
		padding: 10px 22px 6px;
		font-size: 12px;
	}
	.mnav
	{	
		border: none;
	}
	/* link styles.. */
	a:link
	{
		color: #000000;
		text-decoration: none;
	}
	a:visited
	{
		color: #000000;
		text-decoration: none;
	}
	a:hover
	{
		color: #FFFFFF;
		text-decoration: none;
	}
</style>
<title> Index </title>
</head>
<body background="images/bg.jpg"><table align="center" cellspacing="0" cellpadding="0">

<tr>
<td width="652" height="69"><object width="652" height="69">
<param name="movie" value="images/banner.swf">
<embed src="images/banner.swf" width="652" height="69">
</embed>
</object></td>
</tr>
<tr>
<td class="mnav"><a href="Index.html"><img src="images/eportfolio-v1_04.gif"></a><a href="Publications.html"><img src="images/eportfolio-v1_05.gif"></a><img src="images/eportfolio-v1_06.gif"><a href="Evidence.html"><img src="images/eportfolio-v1_07.gif"></a><a href="Review.html"><img src="images/eportfolio-v1_08.gif"></a></td>
</tr>

<tr>
<td height="35" background="images/eportfolio-v1_09.gif" class="nav">
<!-- -->
</td>
 
</tr>
<tr> <td background="images/eportfolio-v1_10.gif" class="content" size=100% valign="top"> 
  <p><font color="#FFFFFFF">Welcome to my Dance O' Clock Eportfolio! <br>
        <br>
    The Eportfolio is a showcase of all the work I have made throughout the Dance 'O Clock project. <br>
    Evidence of the publications and a review of the whole project is also included in the eportfolio. <br>
  <br>
    The Eportfolio is best viewed in the Firefox browser with a resolution of 1440 * 900!</font></p>
    <hr color="#969696" width="540"> <Br>
  <p><font color="#FFFFFFF"><u>Required Information</u></font></p>
  <font color="#FFFFFFF">Name:  &nbsp; Richard Dyson</font> <Br>
  <font color="#FFFFFF">Age:  &nbsp;14 </font> </br>
  <font color="#FFFFFF">SPB title:  &nbsp;Dance o'Clock Level 2 </font> <Br>
  <font color="#FFFFFF">Registration number: &nbsp; 68751</font> <br>
  <font color="#FFFFFF">Center name: &nbsp; Whitchurch High school</font> <br>
  <font color="#FFFFFF">Center number: .....</font> <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    

    
        </p></td> 
</tr>
</table>
</body>

</html>

Hi, when I create a table and set images as the background in each cell, there is a gap between each cell so the images don't link up. I think this is where the border would be. Can anyone help me get rid of these gaps?

thanks