IE(PC) table layout problem - Please help

[e1ean0rrigby]

Hi,I have created a chart with images, html and css, and it looks great in Firefox (PC and Mac), Safari, and Internet Explorer (Mac). Unfortunately, I can't make it work in Internet Explorer 6 (PC).It is basically a table with an image in the top row, and I need the cell widths below to line up exactly with lines in the image above. (Because of cell border display differences in the browsers, I changed the border of these cells to none, and created small background images for each cell - which created the illusion of borders.)Anyway, I would really appreciate any suggestions of how to make this line up in Explorer!Thanks,Amy

[dorothy]

Hi Amy,Welcome to the forum.Soulution is simple, just replace top image "comparison_category.gif" (which is 686X90) with exactly the small single images you have at the bottom like; <tr><td class="club_name"> <img src="guide_club.gif"></td> <td class="ranking"> <img src="guide_comedians.gif"></td> <td class="ranking"> <img src="guide_ambiance.gif"></td> <td class="ranking"> <img src="guide_service.gif"></td> <td class="ranking"> <img src="guide_food.gif"></td> <td class="ranking"> <img src="guide_seats.gif"></td> <td class="age"> <img src="guide_age.gif"></td> <td class="drink"> <img src="guide_drink.gif"></td> <td class="ticket"> <img src="guide_ticket.gif"></td> <td class="comments"> <img src="guide_comments.gif"> </td></tr>They aligns and looks perfect in IE6(PC) in their place.dorothy

[e1ean0rrigby]

Hi Amy,Welcome to the forum.Soulution is simple, just replace top image "comparison_category.gif" (which is 686X90) with exactly the small single images you have at the bottom like; <tr><td class="club_name"> <img src="guide_club.gif"></td> <td class="ranking"> <img src="guide_comedians.gif"></td> <td class="ranking"> <img src="guide_ambiance.gif"></td> <td class="ranking"> <img src="guide_service.gif"></td> <td class="ranking"> <img src="guide_food.gif"></td> <td class="ranking"> <img src="guide_seats.gif"></td> <td class="age"> <img src="guide_age.gif"></td> <td class="drink"> <img src="guide_drink.gif"></td> <td class="ticket"> <img src="guide_ticket.gif"></td> <td class="comments"> <img src="guide_comments.gif"> </td></tr>They aligns and looks perfect in IE6(PC) in their place.dorothy

[e1ean0rrigby]

Hi Dorothy,Thank you for your suggestion. The only problem with using these individual images as I had at the bottom of the chart and as you suggested, is I can't keep the labels on a diagonal line. (It's only an aesthetic difference, so I may resort to vertically listed categories rather than diagonally listed categories.) Just incase I don't figure out how to use these diagonal lines, I have created a test page with coding like you suggested. If anyone knows how to make the cells line up with the diagonal lines in the "comparison_category.gif" of the first page design, please let me know.Thanks again,Amy

Hi Amy,Welcome to the forum.Soulution is simple, just replace top image "comparison_category.gif" (which is 686X90) with exactly the small single images you have at the bottom like; <tr><td class="club_name"> <img src="guide_club.gif"></td> <td class="ranking"> <img src="guide_comedians.gif"></td> <td class="ranking"> <img src="guide_ambiance.gif"></td> <td class="ranking"> <img src="guide_service.gif"></td> <td class="ranking"> <img src="guide_food.gif"></td> <td class="ranking"> <img src="guide_seats.gif"></td> <td class="age"> <img src="guide_age.gif"></td> <td class="drink"> <img src="guide_drink.gif"></td> <td class="ticket"> <img src="guide_ticket.gif"></td> <td class="comments"> <img src="guide_comments.gif"> </td></tr>They aligns and looks perfect in IE6(PC) in their place.dorothy

[Err]

Based on your code there are a couple of things you can do for this. Firstly lets make one vital correction in your html:

<td class="compare_subjects" colspan="10"><img src="../images/comparison_category.gif"</td></tr>

<img src="../images/comparison_category.gif" doesn't have a ending ">" symbol. Lets add it on there. so that it looks like this:

<td class="compare_subjects" colspan="10"><img src="../images/comparison_category.gif"></td></tr>

Check your page. If that fixed your problem then hurray! If not then try to sneak 1px of padding just for IE.

<!--[if lte IE 6]><style type="text/css">.compare_subjects {padding-left: 1px;}</style><![endif]-->

Stick that in between your <head> and </head> tags. If necessary you can add more pixels just by changing the 1 on 1px to 2 or more. Hoped that helped.