CSS/Table Problem

[Albatross]

I have a CSS/Table problem, which you can see at www.waveformsoftware.com/sweet/index.htm

Here's the deal. I have a masthead/logo at the top of the page, and below it I have a table with text on the right and a Flash presentation on the left. The Flash presentation is on a beige background that I'm trying to get to be absolutely flush with the top, left, and bottom of the page.

The problem is that being in a table puts a thin white border all around the elements inside the table. I can make the cell that the Flash presentation is in have the beige background I need, but that doesn't get rid of the thin white border. Setting the background of the table itself to beige gets rid of the line, but it then puts the text in the right cell on the beige and I want it on white.

I know one solution would be make the text, the bottom bar, and the Flash presentation all their own absolutely positioned divs. But unless my understanding of div positioning is off, that wouldn't work for another page if the text was longer; I'd have to customize each page. I'm trying to avoid that.

 

[whyme953]

set the border of the table to 0

set the border of the table to 0

 

[Albatross]

Added the border="0" tag to the table, but no visible effect in Safari, Firefox, and IE5 (Mac).

 

[Rowan W]

Or add cellspacing="0" to the main table tag.

 

[AnOmAlY]

Just saw the site

Give the

<table bgcolor="beige">
text
<td bgcolor="000000">

you could also set the background of the flash file beige and
make a white square underneath the animation 2 fix the problem.

 

[Albatross]

Ah, that did it. Thanks.

 

[Rowan W]

Ah, that did it. Thanks.

Mine or AnOmAlY's?

 

[Albatross]

Bleh. Back again.

I did the cellspacing idea, and that works, at least according to Safari and Firefox. IE 6 (Windows) has another idea. It's putting a somewhat thick black line right across the page, apparently where the 'navibar' div ends and the 'maincontentbox' div begins. I thought at first that maybe the black bar was from the navibar image, but I've confirmed that the image's border is set to 0.

I also tried a similar thing, keeping the cellspacing and border to 0 but setting the table's background to beige and the text part of the table's background to white. Looks exactly the same as the other way on Safari and Firefox, but IE 6 still inserts a black bar in the page.

http://www.waveformsoftware.com/sweet/index.htm

 

[Albatross]

Well, I figured this out partially. The problem isn't the table, but rather the navigation bar right above it.

The navigation bar is it's own div. The div gives it positioning information, then on the page itself there's an <img> tag that shows the JPEG that is the navigation bar. The div is really simple:

#navibar {
margin-left:12px;
width:800px;
height:45px;
margin-bottom:0px;
padding-bottom:0px;
}

Then the XHTML on the index page:

<div id = "navibar">
<img src="navibar.jpg" height="45" width="800" border ="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="330,4,433,33" href="http://www.sweetwatercountryhome.com/gallery.htm" />
<area shape="rect" coords="572,3,691,32" href="http://www.sweetwatercountryhome.com/directions.htm" />
</map>
</div>


Apparently though, IE6 automatically inserts space below an image. So the line that appears on the page is the background of the body showing through when IE inserts this extra space. Is there a way to get around this, to keep IE from inserting a space below an image?