HORRID Photoshop Slices in IE Explorer, Can't fix! Help!

HTML & CSS
1

Hi,

(I feel like all posts start like this. Here goes…)

I’m relatively new to creating sites, and used photoshop and dreamweaver to get going on building a simple one-pager. The results we’re fantastic on EVERYTHING BUT IE Explorer. Basically, the slices show up and have the paged warped beyond recognition. Can anyone help out with a fix to this? A lot of folks seem to have the issue, but I don’t understand enough code to cross apply their fixes to my particular html code.

Here’s mine for reference:


<html>
<head>
<title>The Round Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#00000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<p></p>
<!-- Save for Web Slices (Round Table Webpage.psd) -->
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" height="1001" width="1401">
<tbody>
<tr>
<td colspan="25"><img src="images/index_01.gif" alt="" height="408" width="1400" /></td>
<td><img src="images/spacer.gif" alt="" height="408" width="1" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/index_02.gif" alt="" height="1" width="485" /></td>
<td colspan="16" rowspan="3"><a href="http://www.theroundtablemixtape.bandcamp.com" target="_new"><img src="images/index_03.gif" alt="" height="170" width="469" /></a></td>
<td colspan="3" rowspan="4"><a href="http://www.seidist.com" target="_new"><img src="images/index_04.gif" alt="" height="178" width="303" /></a></td>
<td rowspan="12"><img src="images/index_05.gif" alt="" height="592" width="143" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="1" /></td>
</tr>
<tr>
<td rowspan="11"><img src="images/index_06.gif" alt="" height="591" width="140" /></td>
<td colspan="4"><a href="http://www.metrodogmedia.com" target="_new"><img src="images/index_07.gif" alt="" height="168" width="345" /></a></td>
<td><img src="images/spacer.gif" alt="" height="168" width="1" /></td>
</tr>
<tr>
<td colspan="4" rowspan="3"><img src="images/index_08.gif" alt="" height="161" width="345" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="1" /></td>
</tr>
<tr>
<td colspan="16" rowspan="2"><img src="images/index_09.gif" alt="" height="160" width="469" /></td>
<td><img src="images/spacer.gif" alt="" height="8" width="1" /></td>
</tr>
<tr>
<td colspan="3"><img src="images/index_10.gif" alt="" height="152" width="303" /></td>
<td><img src="images/spacer.gif" alt="" height="152" width="1" /></td>
</tr>
<tr>
<td rowspan="7"><img src="images/index_11.gif" alt="" height="262" width="58" /></td>
<td rowspan="3"><a href="http://www.dasickidz.com" target="_new"><img src="images/index_12.gif" alt="" height="56" width="234" /></a></td>
<td rowspan="2"><img src="images/index_13.gif" alt="" height="54" width="35" /></td>
<td colspan="5"><a href="mailto:gunnagunnaman@gmail.com"><img src="images/index_14.gif" alt="" height="52" width="149" /></a></td>
<td rowspan="2"><img src="images/index_15.gif" alt="" height="54" width="32" /></td>
<td colspan="8" rowspan="2"><a href="http://www.ianalouis.com" target="_new"><img src="images/index_16.gif" alt="" height="54" width="260" /></a></td>
<td colspan="2"><img src="images/index_17.gif" alt="" height="52" width="37" /></td>
<td colspan="3"><a href="http://www.soundcloud.com/mannie-2" target="_new"><img src="images/index_18.gif" alt="" height="52" width="252" /></a></td>
<td rowspan="7"><img src="images/index_19.gif" alt="" height="262" width="60" /></td>
<td><img src="images/spacer.gif" alt="" height="52" width="1" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/index_20.gif" alt="" height="2" width="149" /></td>
<td colspan="4" rowspan="3"><a href="http://www.seidist.com" target="_new"><img src="images/index_21.gif" alt="" height="47" width="84" /></a></td>
<td rowspan="2"><img src="images/index_22.gif" alt="" height="4" width="205" /></td>
<td><img src="images/spacer.gif" alt="" height="2" width="1" /></td>
</tr>
<tr>
<td colspan="8" rowspan="2"><a href="http://www.mayneevnt.com" target="_new"><img src="images/index_23.gif" alt="" height="45" width="246" /></a></td>
<td colspan="7"><img src="images/index_24.gif" alt="" height="2" width="230" /></td>
<td><img src="images/spacer.gif" alt="" height="2" width="1" /></td>
</tr>
<tr>
<td rowspan="4"><img src="images/index_25.gif" alt="" height="206" width="234" /></td>
<td rowspan="2"><img src="images/index_26.gif" alt="" height="80" width="19" /></td>
<td colspan="5"><a href="http://www.rhymeschemepatternz.com" target="_new"><img src="images/index_27.gif" alt="" height="43" width="171" /></a></td>
<td rowspan="2"><img src="images/index_28.gif" alt="" height="80" width="40" /></td>
<td rowspan="4"><img src="images/index_29.gif" alt="" height="206" width="205" /></td>
<td><img src="images/spacer.gif" alt="" height="43" width="1" /></td>
</tr>
<tr>
<td colspan="8"><img src="images/index_30.gif" alt="" height="37" width="246" /></td>
<td colspan="5"><img src="images/index_31.gif" alt="" height="37" width="171" /></td>
<td colspan="4"><img src="images/index_32.gif" alt="" height="37" width="84" /></td>
<td><img src="images/spacer.gif" alt="" height="37" width="1" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2"><img src="images/index_33.gif" alt="" height="126" width="66" /></td>
<td><a href="http://www.twitter.com/roundtablevol1" target="_new"><img src="images/index_34.gif" alt="" height="83" width="96" /></a></td>
<td rowspan="2"><img src="images/index_35.gif" alt="" height="126" width="20" /></td>
<td colspan="5"><a href="http://www.facebook.com/theroundtablemixtape" target="_new"><img src="images/index_36.gif" alt="" height="83" width="86" /></a></td>
<td rowspan="2"><img src="images/index_37.gif" alt="" height="126" width="20" /></td>
<td><a href="http://www.youtube.com/theroundtablemixtape" target="_new"><img src="images/index_38.gif" alt="" height="83" width="90" /></a></td>
<td rowspan="2"><img src="images/index_39.gif" alt="" height="126" width="13" /></td>
<td colspan="3"><a href="mailto:theroundtablemixtape@gmail.com" target="_new"><img src="images/index_40.gif" alt="" height="83" width="97" /></a></td>
<td colspan="3" rowspan="2"><img src="images/index_41.gif" alt="" height="126" width="72" /></td>
<td><img src="images/spacer.gif" alt="" height="83" width="1" /></td>
</tr>
<tr>
<td><img src="images/index_42.gif" alt="" height="43" width="96" /></td>
<td colspan="5"><img src="images/index_43.gif" alt="" height="43" width="86" /></td>
<td><img src="images/index_44.gif" alt="" height="43" width="90" /></td>
<td colspan="3"><img src="images/index_45.gif" alt="" height="43" width="97" /></td>
<td><img src="images/spacer.gif" alt="" height="43" width="1" /></td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="" height="1" width="140" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="58" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="234" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="35" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="18" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="13" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="96" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="20" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="2" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="32" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="30" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="19" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="3" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="20" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="90" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="13" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="45" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="40" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="12" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="25" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="9" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="38" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="205" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="60" /></td>
<td><img src="images/spacer.gif" alt="" height="1" width="143" /></td>
<td></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
<p></p>
</body>
</html>

Someone out their with more experience, if you have any thoughts on how to go about fixing this, I’d be truly grateful!!

2

I think it’s better if you include a link to that page also.

3

Hi kaisuna2003 and welcome to SitePoint,

First and foremost never used Photoshop as a quick and easy way of getting pre-generated HTML as it will cause more grief than none, I say this because Photoshop generates its HTML before the HTML 4.01 specification which is from the Netscape days and is extremely ugly compared to the nicer <DIV> approach. As @solidcodes; said it would be more helpful if we had a page to look at as we can help you convert your template into a nicer XHTML/HTML5 format.

4

Hi kaisuna2003. Welcome to the forums. :slight_smile:

The first thing you need to do is add a doctype declaration to your page. Otherwise, browsers go into “quirks mode”, treating your site as if it were built in the mid 90s. So, place this at the top of your pages and see if it helps:

<!DOCTYPE html>

Beyond that, as said, we need to see the live page.

5

Sorry for the lack of a site. http://www.theroundtable.info is the site I’m working on (my first actually)

Yeah, I would have no idea what old coding looks like (Netscape era, but I know it’s ugly). I took the diy approach and tried my best to use the Dreamweaver tools…but I think I’m failing (or IExplorer is beating me). The <!DOCTYPE html> didn’t do anything in explorer. Still showing the slices (if you open it in Firefox or Chrome, it looks as intended). A number of people complain about this from what I’ve seen. Sigh…woe is me site.

6

There are quite a few concerns with that page.

First and foremost, IMHO the sooner you get away from using tables for layout the better. It might seem easier to “slice” up images and put them into fixed positions, but I think once you get the hang of semantic / responsive design you’ll be so glad you learned you’ll never look back.

One of the first things you should do with any page is check if it’s valid i.e. http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.theroundtable.info%2F shows a few errors. the most important maybe being

<style type="text/css">
img {
display: block;
}
</style
</head>

it could very well be that the mal-formed closing style tag causes IE to not apply the img style you want it to.

I used IE9 in both Compatibility View and not, and in both cases the rendering is a bit off. So it’s likely that trying

<!DOCTYPE html SYSTEM "about:legacy-compat">

and/or something like

<meta http-equiv="X-UA-Compatible" content="IE=8" />

and/or sending HTTP headers like

"X-UA-Compatible", "IE=edge,chrome=1"

won’t be of much help.

7

Hi To cure the gaps and borders on the images add this:


img{border:none}
td img{display:block}

If you do need some images as “display:inline” then you will need to add classes to target them.

8

Tried something I saw in setting the BORDER=“0” in the tags with images. This worked in fixing the Internet explorer issues. However, there is still the issue of of almost infinite black space/padding that surrounds my site (again, http://www.theroundtable.info). Any fix to getting the boundaries of the site to only adhere to the site itself and not this padding? All thoughts welcome!!!

9

That code is about 15 years out of date, though—which is like a millenium in web years. :slight_smile:

Any fix to getting the boundaries of the site to only adhere to the site itself and not this padding?

If I understand your question (I’m not really clear what you mean), you could try adding this to your style sheet:

#Table_01 {margin: 0 auto;}

Edit: O. you don’t have a style sheet, so you could add that between the <style> tags in the head of your page:

<style type="text/css">
td img {
display:block;
}

[COLOR="#FF0000"]#Table_01 {margin: 0 auto;}[/COLOR]
</style>

Seriously, though, the code you have now is not worth continuing with. It’s terribly out of date and will be a nightmare to maintain.

10

You have not fixed the broken </style tag that @Mittineague pointed out in post #6.

Line 12 contains useless code:


<body [color=red]bgcolor="#00000" leftmargin="none" topmargin="none" marginwidth="none" marginheight="none"[/color]>

Delete ALL of the attributes in the body tag.

Replace them by adding the following styles:


<style type="text/css">
[color=blue]body {margin:0;background-color:#000;}    /* ADD ME */[/color]
td img {display:block;}
#Table_01 {margin: 0 auto;}
</style>

You have applied a black background color to the whole page. That’s OK. But, browsers apply some default margin to pages unless it is defeated with CSS styles, so that black background color is showing around the edge of your page. The above added code will delete the default margin and stop the black area from appearing around your page.