IE6 & IE7 html table problem

[7scout7]

I made this site old fashioned way with tables not CSS.
It needed to be done quick and I thought I will have less issues to resolve with the IE this way.
Ha... was i wrong. The site works in all browsers just not with IE !
I have that line 1 px running right through the page and I have changed all the table attributes I can think of but nothing works.
Please if anyone out there can help me with this I would really appreciate it.
You will need to look at it from a MS based computer (sorry). The problem does not seem to appear in the Mac IE5 only in the newer versions.

Please I am going mad here....

 

[angelwatt]

It actually has that line in Firefox 3 on Mac as well, not just IE. The nature of the problem exist with it being a table layout. I won't bother going into specifics. Here's something you can add to fix it though:

style="position:relative; top:1px;"

Add it to the table tag as an attribute. It's the table that comes shortly after your mainpage_13.jpg image. I don't think it should cause any problems for browsers that currently show it OK, but you'll just have to try it our and find out.

 

[7scout7]

Table Problem

Thanks about the heads up on the Firefox 3 V. now at least I don't have to hunt down a MS computer every time I want to test it.
I put the attribute in which made the one line at the bottom disappear but it reappeared on the top plus the one on the left is still there.

Please check out test site

Is there anywhere I can read up on this problem and find out more on how to find a solution ??

Many Thanks again for your help and your time !

Cheers, Simone

BTW: I can see this top line now on the Flock browser which looked o.k. before I changed it.

 

[SrWebDeveloper]

Your background is showing through in those 1 pixel lines you're seeing.

Can you tell me what graphics program you used when slicing?

I use Adobe PS and it has wonderful slicing tools complete with export as HTML as well as DIV's with CSS. The latter is incredible, I use it all the time - when saving slices choose "custom" and select "slices" in the output settings dialog and select "Generate CSS" and "Referenced by ID". Do this instead of generate table.

It creates DIV's perfectly aligned, a simple CSS you can modify with ease and the code is so streamlined it's silly. No need to worry with table cell heights/widths, spacer.gif and other pixel shims which is old school bloatware. This is the way to do it, no matter the struggle you've had before.

-jim

 

[7scout7]

SrWebDeveloper

Thanks for your reply SrWebDeveloper.

I did kind of solve it by generating a html output with PS again and started all over again.
The Sphinx Site
Never found out why the tables kind of shifted at that spot.

I never actually used the "Generate CSS" with PS always kind of did the CSS from scratch. I heard it can be a bit of a chore working with it that way, is this true ? I though it could be really good for this kind of project. There does not seem to be much discussion, notes, forums or tutorials about that subject out there.

Appreciate your feedback.

Cheers, Simone

 

[SrWebDeveloper]

No, it's not a chore, it's darned easy, less code in your HTML (just img tags inside a few divs you sliced up) and simple to edit CSS styles. Obviously you need to know how CSS works, but we're talking real simple CSS here. It also assigns ID's which you can use later in your JavaScript for replacing one of those image slices with the video you plan on doing.

Bottom line is, I highly, strongly recommend slicing to div's/CSS via Adobe as the first choice - or slicing to HTML as the second as you did it although spacer images (pixel shims) might be created. If I recall there is a way to disable that, but doing so isn't reliable when slicing in a complex manner. On a side note, when slicing, you need to make sure 100% of the image is covered and no gaps between slices. No matter what method you choose, HTML vs. CSS/DIV, do that wrong and you're in for a world of hurt.

-jim

 

[7scout7]

SrWebDeveloper

Thanks for feedback Jim.

Well, I will definitely will try this out next time when I have a similar project coming up.
I have done basic CSS sites before but never used PS to generate it.
...and now that you have given me hope in the fact that it is not as bad to work with as I thought (heard) it was, I will give it a go for sure....

Thanks again for your help !
Simone

 

[SrWebDeveloper]

Here's a quick very simplified of code generated via the DIV/CSS method in Adobe using one of my images I sliced into 3 chunks, 2 of them linked:

The CSS:

#portal-promo-playing-tl {
position:absolute;
left:0px;
top:0px;
width:174px;
height:100px;
}

#portal-promo-playing-dyn {
position:absolute;
left:174px;
top:0px;
width:298px;
height:100px;
}

#portal-promo-b {
position:absolute;
left:0px;
top:100px;
width:472px;
height:34px;

The HTML:

<!-- ImageReady Slices (portal_promo_playing.psd) -->
<DIV ID="portal-promo-playing-tl">
<A HREF="http://www.yourdomain.com" TARGET="_top">
<IMG SRC="images/portal_promo_playing_tl.gif" WIDTH="174" HEIGHT="100" BORDER="0" ALT="Register here..." /></A>
</DIV>
<DIV ID="portal-promo-playing-dyn">
<IMG SRC="images/portal_promo_playing_dyn.gif" WIDTH="298" HEIGHT="100" ALT="" />
</DIV>
<DIV ID="portal-promo-b">
<A HREF="http://www.yourdomain.com" TARGET="_top">
<IMG SRC="images/portal_promo_b.gif" WIDTH="472" HEIGHT="34" BORDER="0" ALT="Register here..." /></A>
</DIV>
<!-- End ImageReady Slices -->

Notes: By default it creates absolute positioning, but this can easily be adapted to relative positioning with float applied - this is a simple example like I said, but honestly once you get familiar with CSS you'll be able to position div's wherever you want plus all you're editing is one CSS file. This separates style from content and as you can see the div ID becomes the slice name.

Okay, you've got it from here and have fun on the next project. Cya!

-jim