Unknown IE Table Issues

[kfogle]

I cannot figure out why IE is interpreting my code so differently than
FF. In FF, my tables are great! I am using a <td background>
attribute, but that's the only thing I can think of that IE might balk
at... can anyone look at this sample and tell me how to get around
this issue? Thanks in advanced!

<table width="725" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr>

<td height="54" align="center" valign="top"
background="/images/tbl_bkgrd1_01.png" class="menumainheader"
style="background-repeat:no-repeat"><img src="/images/
menudecor_01.png" width="51" height="22" align="absbottom"> Events and
Specials <img src="/images/menudecor_02.png" width="50" height="22"
align="absbottom"></td>
</tr>
<tr>
<td height="100" align="left" valign="top"
background="/images/tbl_bkgrd1_02.png"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr valign="top">
<td align="left" class="menusubheader">Early
Bird Dinner Special - $ 6.95 </td>
<td align="left" class="menusubheader">Friday
and Saturday Nights </td>

</tr>
<tr valign="top">
<td width="50%"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr valign="top">
<td align="left" class="menutext"><br>
5:00-7:00pm Daily<br>
Early Bird Dinner Special <br>
includes salad and a roll </
td>

</tr>
</table></td>
<td width="50%"><table width="100%" border="0"
align="left" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="menutext"><br>
Dance to LIVE cabaret music every Friday
and Saturday night from 6:30-9:30pm on our NEW DANCE FLOOR! </td>
</tr>
</table></td>

</tr>
</table> </td>
</tr>
<tr>
<td height="56" valign="bottom" background="/images/
tbl_bkgrd1_05.png" class="menufooter" style="background-repeat:no-
repeat">1234 Anywhere USA - Phone: 555.555.5555</td>
</tr>
</table>

 

[John Hosking]

I cannot figure out why IE is interpreting my code so differently than
FF. In FF, my tables are great! I am using a <td background>
attribute, but that's the only thing I can think of that IE might balk
at... can anyone look at this sample and tell me how to get around
this issue? Thanks in advanced!

Please post a URL rather than a lot of code. It helps us see exactly
what you've got. You have provided a lot of markup which refers to
styles, but have not provided the CSS. We do not have access to your
images. We don't know what doctype you're using. And it's so much easier
to click a link you provide than for (each and every one of) us to
copy-and-paste, etc.

Anyway, be it good news or bad the code looks the same in both
browsers to me. Yes, I did the copy-and-paste dance for you, but I got
nearly identical-looking results. Certainly there's no difference big
enough to complain about (all the content, except the missing images, is
fully visible). So what was it you didn't like in IE? And BTW: 6 or 7?
And did your code validate for you?

HTH

 

[kfogle]

Thank you, John. I have sent the link to you personally. I
appreciate any advice you can give.

 

[Richard Formby]

Thank you, John. I have sent the link to you personally. I

What about all us other people who my have an interest in the problem? It
might just be something new.

appreciate any advice you can give.

Post to the group, not the individual. Or do you only value John's advice?

 

[John Hosking]

Thank you, John. I have sent the link to you personally. I
appreciate any advice you can give.

I hope you got rid of the DELETE. and .INVALID parts of my address
first. I think you shouldn't expect a NDR because .invalid is actually
invalid. Anyway, it's better that you NOT send me a link personally, for
reasons mentioned by Richard in his post.

 

[John Hosking]

What about all us other people who my have an interest in the problem? It
might just be something new.



Post to the group, not the individual.

Yea, verily.

Or do you only value John's advice?

Ooh, that would be a *bad* idea indeed!

(And if the content is too hyper-secret for the group, he shouldn't
oughta send it to *me*! I have reason to believe the U.S. government is
monitoring my communications...)

 

[kfogle]

I'm fairly new to groups and wasn't sure how often people post their
live sites... just me trying to be careful

Here is the link: www.dadsdining.com/menu.htm

 

[kfogle]

I'm fairly new to groups and wasn't sure how often people post their
live sites... just me trying to be careful

Here is the link: www.dadsdining.com/menu.htm

Correction... www.dadsdining.com/menus.htm

 

[dorayme]

I hope you got rid of the DELETE. and .INVALID parts of my address
first. I think you shouldn't expect a NDR because .invalid is actually
invalid. Anyway, it's better that you NOT send me a link personally, for
reasons mentioned by Richard in his post.

Or what about emailing each one of us?

 

[dorayme]

(And if the content is too hyper-secret for the group, he shouldn't
oughta send it to *me*! I have reason to believe the U.S. government is
monitoring my communications...)

This is your cover story to throw off suspicions that you are a
government spy. It Is not bad actually!

 

[dorayme]

Correction... www.dadsdining.com/menus.htm

You have checked the validation of the html? There is a pointer
to a problem about using backgrounds.

Use css to put in background images, look to see if you cannot
use a strict doctype.

 

[al jones]

This is your cover story to throw off suspicions that you are a
government spy. It Is not bad actually!

Now, when John was working on my problem, he told me specifically that he
wasn't to be considered a government agent out of place.

 

[Andy Dingley]

I cannot figure out why IE is interpreting my code so differently than
FF. In FF, my tables are great!

Your markup looks like it's 10 years old and that style makes it hard
to keep it remotely consistent between browsers. So fix the coding
style issue first, then worry about the presentation details.

Your application is appropriate for a <table>, so your overall code
structure around the inner tables isn't bad. The outer table is a
superfluous layout-only table though, and they're a bad idea. That
should go and be replaced with a simpler <div> and some CSS (possibly
two nested <div>s) to control margins and presentation.

You're also controlling presentation with thousands of attributes on
each table cell (HTML 3.2 style). Remove all the attributes from the
table elements. Replace them with just a few class attributes, and
then attach all the presentation stuff via CSS.

The purists would kill all the tables here, but that's more than is
essential.


This isn't a quick fix, I admit. Possibly there is such a fix -- often
there's one subtle interaction between table attributes that breaks
things in just this manner. However I have no interest in such things
and I certainly don't try to fix them without getting paid! They're
awkward things to track down and rectify because they're simply not
"rational" or obvious. This is why the non-table, presentation-free
approach to HTML wins out -- it's simpler and certainly more
straightforward overall, even if there's some re-learning to do from
the beginning.


(Any tutorial you read in the last 6 years that taught you to code
like this should be thrown away).

 

[kfogle]

Your markup looks like it's 10 years old...

I realize that... I'm certainly not a high-class programmer, I have
learned a little hand-coding along the way but mostly I use
Dreamweaver. I know that is looked down upon by most "real" coders,
but I love what I do and can help people with what I DO know...
However, it is past time that I upgraded as I am still using the MX
2004 version which is probably the source of my problems.

You're also controlling presentation with thousands of attributes on
each table cell (HTML 3.2 style).

Dreamweaver tends to do this automatically, which is why I've fallen
into such a horrible mess. I'm learning more CSS so this will be a
good exercise for me.

Remove all the attributes from the
table elements. Replace them with just a few class attributes, and
then attach all the presentation stuff via CSS.

I modified the top portion of the first table "Events and Specials".
I took out all the <td> attributes and replaced the background using
CSS, but now it isn't showing up at all. In addition, I can't get the
text in that cell to do what I want now. I put in a <span> over the
text but that isn't working, plus I'm pretty sure there is a better
way to do that.

This isn't a quick fix, I admit.

As long as the sites work and I continue to learn and work my way to
coding by hand, then I'm okay with things not being a quick fix. It
will take me some time, like I said, but I want to learn which is why
I am asking the people who know best.

Thanks again.

 

[Jonathan N. Little]

I realize that... I'm certainly not a high-class programmer, I have
learned a little hand-coding along the way but mostly I use
Dreamweaver. I know that is looked down upon by most "real" coders,
but I love what I do and can help people with what I DO know...
However, it is past time that I upgraded as I am still using the MX
2004 version which is probably the source of my problems.

Dump the DW and look at the tutorials at htmldog.com ...

Don't care much for rigid with sites, but I see you're going for the
paper menu effect, so here you go. 3 images and triple-wrapped DIVs,
pretty simple mockup but you can see how it works without tables


http://www.littleworksstudio.com/temp/usenet/alt.html.20070313.html

 

[kfogle]

Your markup looks like it's 10 years old...

I realize that... I'm certainly not a high-class programmer, I have
learned a little hand-coding along the way but mostly I use
Dreamweaver. I know that is looked down upon by most "real" coders,
but I love what I do and can help people with what I DO know...
However, it is past time that I upgraded as I am still using the MX
2004 version which is probably the source of my problems.

You're also controlling presentation with thousands of attributes on
each table cell (HTML 3.2 style).

Dreamweaver tends to do this automatically, which is why I've fallen
into such a horrible mess. I'm learning more CSS so this will be a
good exercise for me.

Remove all the attributes from the
table elements. Replace them with just a few class attributes, and
then attach all the presentation stuff via CSS.

I modified the top portion of the first table "Events and Specials".
I took out all the <td> attributes and replaced the background using
CSS, but now it isn't showing up at all. In addition, I can't get the
text in that cell to do what I want now. I put in a <span> over the
text but that isn't working, plus I'm pretty sure there is a better
way to do that.

This isn't a quick fix, I admit.

As long as the sites work and I continue to learn and work my way to
coding by hand, then I'm okay with things not being a quick fix. It
will take me some time, like I said, but I want to learn which is why
I am asking the people who know best.

Thanks again.

 

[Jonathan N. Little]

Actually, you can do this particular effect without images at all, using
the same 3 divs. Plus make it a flexible design.
http://www.bergamotus.ws/samples/inner-shadow.html

IE6 doesn't understand max-width, of course, but there are ways around that.

Yes but the OP had a graphic background that could not be simulated with
borders and fills. I just used the gradation as a simple way to show
top, middle, and bottom backgrounds without having to fuss too much to
make the images. If OP still had his test page up I would have grabbed
his images.

 

[Bergamot]

Don't care much for rigid with sites, but I see you're going for the
paper menu effect, so here you go. 3 images and triple-wrapped DIVs,
pretty simple mockup but you can see how it works without tables

http://www.littleworksstudio.com/temp/usenet/alt.html.20070313.html

Actually, you can do this particular effect without images at all, using
the same 3 divs. Plus make it a flexible design.
http://www.bergamotus.ws/samples/inner-shadow.html

IE6 doesn't understand max-width, of course, but there are ways around that.

 

[Bergamot]

Yes but the OP had a graphic background that could not be simulated with
borders and fills.

Note that I did say it was specific to the particular effect you were
exhibiting.