Table problem in IE

[tfloyd]

Hello,

A couple days ago I prepared a new index page for my web site. I blissfully thought all was great until I viewed it in IE 6:

http://www.pilatesconnections.com/

The image is a table composite of slices. Functionality is fine, and it looks correct in Firefox, Netscape, and Safari. But in IE6, each row is divided by a white line, even though I set border="0".

I know table formatting is not recommended, but given the graphical rollovers on top of the image, I did not know how I could pull it off with CSS.

So, is there a quick fix for my page as is? How could that page be duplicated (using graphic rollovers) without tables?

Thanks!

[Centauri]

That page would be VERY easy to set up without any tables OR javascript... do you have a copy of the original unsliced graphic (photoshop format with text overlays in separate layers would be nice)?

Cheers
Graeme

[Annaccond]

First go here:
http://validator.w3.org/
and here:
http://jigsaw.w3.org/css-validator/
and fix errors.

If it will not help than we'll search for problem because it's in your rollovers or css.

How could that page be duplicated (using graphic rollovers) without tables?
CSS positioning :cool:

[Fang]

img {display: block;}http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

[Centauri]

Thanks Fang .... now the OP probably wouldn't be bothered to persue a non-tables solution... :rolleyes:

[Fang]

Thanks Fang .... now the OP probably wouldn't be bothered to persue a non-tables solution... :rolleyes:It's the solution to a problem, with or without tables

[tfloyd]

Thanks, everyone...

That page would be VERY easy to set up without any tables OR javascript... do you have a copy of the original unsliced graphic (photoshop format with text overlays in separate layers would be nice)?

Yes, I have the image as an unsliced original with the text in separate layers. The text has been graphically modified with the emboss effect.

[tfloyd]

Thanks again, everyone. I finally implemented a quick fix that works. Fang, I couldn't get the image:block code to work. But from the article you linked to, I added the following to my style sheet:

td img{vertical-align: bottom}

No adjustments needed on the affected page. It now displays fine in IE6.

I'm still not perfectly happy, though. I want to find a non-tables solution that preserves the current design in all its details. But for now, I can relax...

[Centauri]

want to find a non-tables solution that preserves the current design in all its details.

As tfloyd supplied the original graphic to play with, here is that table-less example - a working copy can be seen here (http://www.tchc48-78.com/pilatestest/index.html) for a little while.

In order to get away from tables, one has to think content instead of presentation. The original site is typical of what results from slicing and exporting graphics from ImageReady - it used some 18 graphics stitched together in a 3x5 table, with javascript to handle image rollovers and preload. This is very inflexible as it does not allow alterations to layout or graphic elements without going right back to the master graphic and reslicing. The example site shown here uses 5 graphics, one div, one list, and a couple of paragraphs - NO tables, NO javascript, NO image preload.

Instead of slicing the original graphic, I separated elements to produce a background, transparent logo, and transparent link images. The link images are actually double the required size and contain both normal and rollover images in one - this technique is discussed here (http://wellstyled.com/css-nopreload-rollovers.html).

The one div contains everything and is styled to center the site and holds the background image. The site title text h1 element is styled to display the logo background and hide the text - margins place this in the desired position. The navigation is a simple unordered list - the a tags are styled as block elements the required size for the graphics, the li elements are floated left with the appropriate margins to position them on the page, the ul element clears the floated contents and sets the spacing to the text paragraphs. On hover, the backround image of the a elements is moved to show the rollover. You may notice an extra empty li element in the navigation list - unfortunately, this is a cheat for positioning purposes to get enough spacing between left and right links without going too wide for the wrapper.

Coding follows in next post
Cheers
Graeme

[Centauri]

The coding for the example : html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pilates Connections - Pilates in Austin, Texas</title>
<link href="pilates.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="frontWrap">
<h1>Pilates Connections</h1>
<ul>
<li><a href="studio.php" style="background-image:url(images/studio.gif)">studio</a></li>
<li></li>
<li><a href="http://www.forums.pilatesconnections.com" style="background-image:url(images/discussion.gif)">discussion</a></li>
<li><a href="downloads.html" style="background-image:url(images/downloads.gif)">downloads</a></li>
</ul>
<p>Pilates Connections is a full-service, full-apparatus studio, offering private and group classes at all ability levels. Click on the &quot;studio&quot; link above for more information about our studio, for an interactive survey to see whether Pilates is for you, and for descriptions and prices of our various programs. For the most active and informative public Pilates discussion board on the Internet, click the &quot;discussion&quot; link. For a growing selection of training manuals and videos, click the &quot;downloads&quot; link.</p>
<p>12129 RR 620 N. Suite 401<br>
Austin, Texas 78750<br>
(1/2 mile west of Lakeline Mall, at the intersection of Hwy. 620 and Lake Creek Parkway)<br>
<br>
(512) 249-5390<br>
<a href="mailto:pilatesconnections@gmail.com">pilatesconnections@gmail.com</a></p>
</div>
</body>
</html>
and the css : * {
border: 0;
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#frontWrap {
width: 750px;
margin: 0 auto;
background-image: url(images/pilatesback.jpg);
border-top: 1px solid #58504D;
background-position: center top;
background-repeat: no-repeat;
}
#frontWrap h1 {
width: 460px;
height: 130px;
display: block;
background-image: url(images/pilates.gif);
font-size: 1px;
color: #58504D;
margin: 28px 0 0 182px;
}
#frontWrap ul {
list-style: none;
margin-bottom: 60px;
display: block;
overflow: hidden;
}
#frontWrap li {
float: left;
display: inline;
margin: 40px 52px 118px 38px;
}
#frontWrap ul a {
display: block;
width: 220px;
height: 40px;
font-size: 1px;
text-decoration: none;
color: #574D4B;
background-position: top left;
}
#frontWrap ul a:hover {
background-position: bottom left;
}
#frontWrap p {
margin-bottom: 1em;
text-align: center;
font-size: 16px;
clear: both;
}


Hope this makes a bit of sense
Cheers
Graeme

[tfloyd]

Thanks, Graeme!

I will play with the code and hopefully implement it shortly.

One question: on the test site you provided, I see tiny white lines (a couple pixels long) above each graphical text area.

What's that about?

Keep up the great work!

Tom

[Centauri]

Have looked at it with FF 1.5 and IE6 and cannot see lines - what browser are you using, and can you post a screenshot?

Thanks
Graeme

[wamboid]

Centauri's version downloaded way faster than the original - another huge benefit. Could just be a better host, but I doubt it.

[tfloyd]

Attached is a screenshot I took from my Mac, viewed in Firefox 2. Notice the horizontal hairlines to the upper left of each slice.

[Centauri]

Tom,
very interesting - those lines look like the actual text, which is reduced to 1px high in the css, but they are supposed to be coloured to match the background so they cannot be seen .... possibly a Mac/FF bug?

Anyway, add the following text-indent: -1000px; css to both the #frontWrap h1 and #frontWrap ul a sections. This effectively shoves the text way off the left of the page, and should cure this problem.

Cheers
Graeme

PS: The reason for still having the actual text is for the benefit of non-css, non-graphic devices such as screen readers, search engine indexers etc. I have seen other solutions like enclosing the text in a span and hiding it, but then it is apparently also invisible to some screen readers.

[tfloyd]

Yep, that takes care of it! And a very elegant solution overall.

I'll try to go live with the new code and graphics tomorrow...

Thanks...

Tom