Why converting PSD to HTML adds extra bar in IE8?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dougancil
    Contributor
    • Apr 2010
    • 347
    #1

    Why converting PSD to HTML adds extra bar in IE8?

    I have a web page that I'm converting from a PSD file in Photoshop. When I convert the page, in IE7 it looks fine, but in IE8 there's a black bar across the bottom of the page. I think that this has something to do with the image size but I'm not sure. The image size is 1260 x 1010 (pixels.) There are no borders. The page consists of slices from psd converted to html.

    If necessary I can post the html.

    Thank you

    Doug
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      IE8 does not work like IE7 which doesn't work like IE6 which won't work like IE9 and none of them work like all the other far more modern browsers. You should not be using IE as your test browser. How does it look in Firefox, Chrome, Safari, Opera or anything else?

        Comment

        • dougancil
          Contributor
          • Apr 2010
          • 347
          #3
          It looks fine in Opera, unfortunately because the people that will be viewing this site will primarily be using a version of IE (I assume) this is how I have to test it. I'm assuming if it looks fine in Opera, then it should look fine in most of the other browsers. I suppose we could always put a restriction on the page and tell users that it's only compatible with certain browsers.

            Comment

            • dougancil
              Contributor
              • Apr 2010
              • 347
              #4
              I believe that what's causing this issue is that when I sliced the page from my psd file that for whatever reason, photoshop is putting spacer gifs at the bottom of the page. What I don't know is why? Here is my code for the page:

              Code:
              <html>
<head>
<title>MSB home pageR-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#2F2F2F" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (MSB home pageR-2.psd) -->
<table id="Table_01" width="1267" height="1016" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="45">
			<img src="images/MSB-home-pageR-2_01.jpg" width="1266" height="60" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="60" alt=""></td>
	</tr>
	<tr>
		<td colspan="38" rowspan="2">
			<img src="images/MSB-home-pageR-2_02.jpg" width="1035" height="59" alt=""></td>
		<td colspan="4">
			<img src="images/MSB-home-pageR-2_03.jpg" width="58" height="29" alt=""></td>
		<td colspan="3" rowspan="4">
			<img src="images/MSB-home-pageR-2_04.jpg" width="173" height="67" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="29" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="3">
			<img src="images/MSB-home-pageR-2_05.jpg" width="58" height="38" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="5">
			<img src="images/MSB-home-pageR-2_06.jpg" width="163" height="50" alt=""></td>
		<td colspan="2" rowspan="6">
			<img src="images/MSB-home-pageR-2_07.jpg" width="123" height="51" alt=""></td>
		<td rowspan="5">
			<img src="images/MSB-home-pageR-2_08.jpg" width="17" height="50" alt=""></td>
		<td colspan="6" rowspan="5">
			<img src="images/MSB-home-pageR-2_09.jpg" width="123" height="50" alt=""></td>
		<td colspan="21">
			<img src="images/MSB-home-pageR-2_10.jpg" width="425" height="1" alt=""></td>
		<td colspan="5" rowspan="4">
			<img src="images/MSB-home-pageR-2_11.jpg" width="177" height="49" alt=""></td>
		<td rowspan="4">
			<img src="images/MSB-home-pageR-2_12.jpg" width="7" height="49" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/MSB-home-pageR-2_13.jpg" width="12" height="49" alt=""></td>
		<td colspan="5" rowspan="4">
			<img src="images/MSB-home-pageR-2_14.jpg" width="118" height="49" alt=""></td>
		<td rowspan="4">
			<img src="images/MSB-home-pageR-2_15.jpg" width="21" height="49" alt=""></td>
		<td colspan="5" rowspan="4">
			<img src="images/MSB-home-pageR-2_16.jpg" width="115" height="49" alt=""></td>
		<td colspan="2" rowspan="4">
			<img src="images/MSB-home-pageR-2_17.jpg" width="18" height="49" alt=""></td>
		<td colspan="6" rowspan="3">
			<img src="images/MSB-home-pageR-2_18.jpg" width="119" height="48" alt=""></td>
		<td rowspan="3">
			<img src="images/MSB-home-pageR-2_19.jpg" width="22" height="48" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/MSB-home-pageR-2_20.jpg" width="1" height="41" alt=""></td>
		<td colspan="4">
			<img src="images/MSB-home-pageR-2_21.jpg" width="58" height="25" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/MSB-home-pageR-2_22.jpg" width="172" height="41" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/MSB-home-pageR-2_23.jpg" width="58" height="16" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="19">
			<img src="images/MSB-home-pageR-2_24.jpg" width="406" height="1" alt=""></td>
		<td rowspan="22">
			<img src="images/MSB-home-pageR-2_25.jpg" width="150" height="847" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="21">
			<img src="images/MSB-home-pageR-2_26.jpg" width="150" height="846" alt=""></td>
		<td rowspan="2">
			<img src="images/MSB-home-pageR-2_27.jpg" width="13" height="249" alt=""></td>
		<td colspan="22" rowspan="2">
			<img src="images/MSB-home-pageR-2_28.jpg" width="425" height="249" alt=""></td>
		<td colspan="18" rowspan="2">
			<img src="images/MSB-home-pageR-2_29.jpg" width="405" height="249" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/MSB-home-pageR-2_30.jpg" width="123" height="248" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="248" alt=""></td>
	</tr>
	<tr>
		<td colspan="43">
			<img src="images/MSB-home-pageR-2_31.jpg" width="966" height="97" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="97" alt=""></td>
	</tr>
	<tr>
		<td colspan="34">
			<img src="images/MSB-home-pageR-2_32.jpg" width="774" height="1" alt=""></td>
		<td colspan="5" rowspan="4">
			<img src="images/MSB-home-pageR-2_33.jpg" width="152" height="26" alt=""></td>
		<td colspan="4" rowspan="8">
			<img src="images/MSB-home-pageR-2_34.jpg" width="40" height="115" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="27">
			<img src="images/MSB-home-pageR-2_35.jpg" width="591" height="2" alt=""></td>
		<td colspan="6" rowspan="3">
			<img src="images/MSB-home-pageR-2_36.jpg" width="152" height="25" alt=""></td>
		<td rowspan="7">
			<img src="images/MSB-home-pageR-2_37.jpg" width="31" height="114" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="15">
			<img src="images/MSB-home-pageR-2_38.jpg" width="405" height="1" alt=""></td>
		<td colspan="8" rowspan="2">
			<img src="images/MSB-home-pageR-2_39.jpg" width="152" height="23" alt=""></td>
		<td colspan="4" rowspan="5">
			<img src="images/MSB-home-pageR-2_40.jpg" width="34" height="110" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="images/MSB-home-pageR-2_41.jpg" width="35" height="95" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/MSB-home-pageR-2_42.jpg" width="152" height="25" alt=""></td>
		<td colspan="3" rowspan="3">
			<img src="images/MSB-home-pageR-2_43.jpg" width="33" height="95" alt=""></td>
		<td colspan="5" rowspan="2">
			<img src="images/MSB-home-pageR-2_44.jpg" width="152" height="25" alt=""></td>
		<td colspan="2" rowspan="4">
			<img src="images/MSB-home-pageR-2_45.jpg" width="33" height="109" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="8" rowspan="3">
			<img src="images/MSB-home-pageR-2_46.jpg" width="152" height="87" alt=""></td>
		<td colspan="6" rowspan="3">
			<img src="images/MSB-home-pageR-2_47.jpg" width="152" height="87" alt=""></td>
		<td colspan="5" rowspan="4">
			<img src="images/MSB-home-pageR-2_48.jpg" width="152" height="89" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/MSB-home-pageR-2_49.jpg" width="152" height="70" alt=""></td>
		<td colspan="5" rowspan="2">
			<img src="images/MSB-home-pageR-2_50.jpg" width="152" height="84" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="70" alt=""></td>
	</tr>
	<tr>
		<td rowspan="12">
			<img src="images/MSB-home-pageR-2_51.jpg" width="13" height="401" alt=""></td>
		<td colspan="5" rowspan="4">
			<img src="images/MSB-home-pageR-2_52.jpg" width="189" height="58" alt=""></td>
		<td colspan="2">
			<img src="images/MSB-home-pageR-2_53.jpg" width="18" height="14" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td rowspan="11">
			<img src="images/MSB-home-pageR-2_54.jpg" width="7" height="387" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/MSB-home-pageR-2_55.jpg" width="58" height="25" alt=""></td>
		<td colspan="3" rowspan="11">
			<img src="images/MSB-home-pageR-2_56.jpg" width="92" height="387" alt=""></td>
		<td colspan="16" rowspan="7">
			<img src="images/MSB-home-pageR-2_57.jpg" width="253" height="226" alt=""></td>
		<td colspan="5">
			<img src="images/MSB-home-pageR-2_58.jpg" width="131" height="2" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="2" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="4">
			<img src="images/MSB-home-pageR-2_59.jpg" width="120" height="152" alt=""></td>
		<td colspan="10" rowspan="3">
			<img src="images/MSB-home-pageR-2_60.jpg" width="212" height="111" alt=""></td>
		<td rowspan="4">
			<img src="images/MSB-home-pageR-2_61.jpg" width="22" height="152" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="9">
			<img src="images/MSB-home-pageR-2_62.jpg" width="58" height="362" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="19" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="8">
			<img src="images/MSB-home-pageR-2_63.jpg" width="189" height="343" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="69" alt=""></td>
	</tr>
	<tr>
		<td colspan="10">
			<img src="images/MSB-home-pageR-2_64.jpg" width="212" height="41" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="41" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/MSB-home-pageR-2_65.jpg" width="41" height="233" alt=""></td>
		<td colspan="14">
			<img src="images/MSB-home-pageR-2_66.jpg" width="313" height="71" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="71" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/MSB-home-pageR-2_67.jpg" width="222" height="1" alt=""></td>
		<td colspan="5" rowspan="2">
			<img src="images/MSB-home-pageR-2_68.jpg" width="59" height="23" alt=""></td>
		<td colspan="3">
			<img src="images/MSB-home-pageR-2_69.jpg" width="32" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="16" rowspan="2">
			<img src="images/MSB-home-pageR-2_70.jpg" width="253" height="46" alt=""></td>
		<td colspan="6" rowspan="4">
			<img src="images/MSB-home-pageR-2_71.jpg" width="222" height="161" alt=""></td>
		<td colspan="3" rowspan="4">
			<img src="images/MSB-home-pageR-2_72.jpg" width="32" height="161" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="3">
			<img src="images/MSB-home-pageR-2_73.jpg" width="59" height="139" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="24" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/MSB-home-pageR-2_74.jpg" width="23" height="115" alt=""></td>
		<td colspan="4">
			<img src="images/MSB-home-pageR-2_75.jpg" width="47" height="22" alt=""></td>
		<td rowspan="2">
			<img src="images/MSB-home-pageR-2_76.jpg" width="7" height="115" alt=""></td>
		<td>
			<img src="images/MSB-home-pageR-2_77.jpg" width="81" height="22" alt=""></td>
		<td rowspan="2">
			<img src="images/MSB-home-pageR-2_78.jpg" width="9" height="115" alt=""></td>
		<td colspan="5">
			<img src="images/MSB-home-pageR-2_79.jpg" width="48" height="22" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/MSB-home-pageR-2_80.jpg" width="38" height="115" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/MSB-home-pageR-2_81.jpg" width="47" height="93" alt=""></td>
		<td>
			<img src="images/MSB-home-pageR-2_82.jpg" width="81" height="93" alt=""></td>
		<td colspan="5">
			<img src="images/MSB-home-pageR-2_83.jpg" width="48" height="93" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="93" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="150" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="101" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="47" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="71" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="23" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="81" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="16" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="41" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="101" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="7" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="40" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="9" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="150" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  If it looks good in Opera, it will look good in any modern browser. IE is not a modern browser.

                  You will never get IE to attempt to perform like the others without a doctype. Add this as the first line of your markup and see where we stand:
                  Code:
                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

                    Comment

                    • dougancil
                      Contributor
                      • Apr 2010
                      • 347
                      #6
                      What I have discovered is that the spacer gif's that Photoshop throws into the html puts space at the bottom of the page. By reducing the height of the spacer gif's to 0, this fixes the issue. It would be great if you had the option of turning this feature off and on in Photoshop CS5, evidently you could in CS3.

                        Comment

                        Previous template Next
                        Working...