Greetings - - I am new to daniweb and am also am at my wits end with Dreamweaver MX. I converted a Adobe Illustrator file that encompasses jpeg artwork and RGB process colors to a GIF file.

No matter what I do, I get unwanted white space at the top of the main table (above the picture and Sports in a Maximum Security Red Banner). I set all the CSS to 0 for the margins, even getting rid of the borders - - but still get that stubborn white space. The original AI document was set up as a transparency, but I also changed that to artboard, as there is message about colors not working properly if converted to process (which would not use in web anyway?)

Thank you for any insights on this????

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to OakieBrumm.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.style46 {font-size: 14px}
-->
</style>
<link href="Mystylesheets.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="Leonard Oakie Brumm Marquette prison sports The Longest Yard Jerry Burns Yoopers Detroit Redwings hockey" />
<style type="text/css">
<!--
.style53 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
}
.style54 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #80FF00; }
.style55 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
}
.style57 {color: 0}
.style61 {
	color: #0000FF;
	font: bold 10px Arial;
	font-size: 9pt;
	font-family: Arial, Helvetica, sans-serif;
}
.style64 {font-family: Arial, Helvetica, sans-serif}
.style73 {font-size: 18px}
.style94 {font-size: 16px}
.style104 {font-size: 10px}
.style105 {font-family: Arial, Helvetica, sans-serif}
.style106 {font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #FF0000; }
.style109 {font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #0000FF; font-size: 18px; }
.style159 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10pt;
	color: #333333;
}
.style161 {
	font-size: 9pt;
	color: #333333;
}
.style162 {font-size: 24pt}
.style163 {
	font-family: Arial;
	font-weight: bold;
	color: #FFFF00;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.style164 {
	font-size: 24pt;
	font-family: Arial;
	color: #00FFFF;
}
-->
</style>
</head>

<body>
<p>&nbsp;</p>
<table width="755" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td width="156" height="668" align="center" valign="top"><a href="author.html"><br />
      <img src="oakieauthor.jpg" alt="" width="108" height="91" border="0" align="top" /><span class="style159"><br />
      Leonard<br />
&quot;Oakie&quot; Brumm<br />
    </span><span class="style161">(1927-2006 ) </span></a>
      <p align="center" class="style61"><strong><a href="WOPHoBrummPreviewOPT.pdf"><img 
src="button52136660.jpg" alt="" width="100" height="30" border="0" id='button773'
onmouseover = 'document.getElementById("button773").src = "button79153652.jpg"'
onmouseout =  'document.getElementById("button773").src = "button52136660.jpg"' /></a></strong></p>
      <p><a href="howtoorder.html"> <img 
src="button68124503.jpg" alt="" width="100" height="30" border="0" id='button684'
onmouseover = 'document.getElementById("button684").src = "button65444503.jpg"'
onmouseout =  'document.getElementById("button684").src = "button68124503.jpg"' /></a></p>
      <p><a href="medialog.html"><img 
src="button64022762.jpg" alt="" width="100" height="30" border="0" id='button913'
onmouseover = 'document.getElementById("button913").src = "button41302554.jpg"'
onmouseout =  'document.getElementById("button913").src = "button64022762.jpg"' /></a></p>
      <p><a href="testimonials.html"> <img 
src="button25466974.jpg" alt="" width="100" height="30" border="0" id='button922'
onmouseover = 'document.getElementById("button922").src = "button20845523.jpg"'
onmouseout =  'document.getElementById("button922").src = "button25466974.jpg"' /></a></p>
      <p> <img 
src="button13095620.jpg" alt="" width="100" height="30" border="0" id='button389'
onmouseover = 'document.getElementById("button389").src = "button44917015.jpg"'
onmouseout =  'document.getElementById("button389").src = "button13095620.jpg"' /></p>
      <p>&nbsp;<a href="links.html"><img 
src="button35012664.jpg" alt="" width="100" height="30" border="0" id='button133'
onmouseover = 'document.getElementById("button133").src = "button76641767.jpg"'
onmouseout =  'document.getElementById("button133").src = "button35012664.jpg"' /></a></p>
    <p>&nbsp;<a href="howtoorder.html"> <img 
src="button19443985.jpg" alt="" width="100" height="30" border="0" id='button895'
onmouseover = 'document.getElementById("button895").src = "button41150590.jpg"'
onmouseout =  'document.getElementById("button895").src = "button19443985.jpg"' /></a><span class="style10"><strong><span class="style18"><span class="style21"><img src="webtestimonials.gif" alt="Testimonials" name="Quotes" width="146" height="556" id="Quotes" /></span></span></strong></span></p></td>
    <td width="599" align="center" valign="top"><h1 class="style164"><img src="Oakart.gif" width="599" height="793" /></h1>
      <table width="307" border="3" cellpadding="0" cellspacing="0" bgcolor="#FFFF00">
        <tr>
          <td width="299" height="64"><div align="center" class="style162">
              <p class="style163"><a href="boblinglink.pdf">Book Review </a></p>
          </div></td>
        </tr>
      </table>
    <h1 class="style164">
      <embed src="http://video.google.com/googleplayer.swf?docid=-4974913860620471198&hl=en&fs=true" align="middle" style="width:400px;height:326px" id="VideoPlayback" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"> </embed> 
    </h1>
    <p class="style57">Massachusetts School of Law Television <br />
Interviewer - Diane Sullivan<br />
8/29/2005 </p></td>
  </tr>
</table>
<blockquote>
  <blockquote>
    <blockquote>
      <blockquote>
        <p>&nbsp;</p>
        <table width="264" height="126" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
          <tr>
            <th height="114" align="center" valign="middle" bgcolor="#80FF00" scope="col"><p><span class="style35 style105 style46"><span class="style94">Brumm Enterprises LLC<br />
                </span></span><span class="style44 style44 style46"><span class="style44 style44 style104  style105"><span class="style44 style44 style104 ">PO BOX 4172 &middot; RACINE, WI 53404</span></span></span><span class="style33 style44 style44 style105"><span class="style64 style44 style44 style46"><br />
                </span></span><span class="style33"><span class="style104">Phone:</span> 262-939-8075<span class="style104"><br />
        Fax:</span> 414-570-2109<br />
                </span><span class="style10">E-mail:</span> <span class="style44"><span class="style105"><a href="mailto:info@oakiebrumm.com">info@oakiebrumm.com</a></span></span><span class="style105"><br />
                <span class="style10">Webmaster:</span></span> <span class="style33 style44 style105"><a href="mailto:webmaster@oakiebrumm.com" class="style44">webmaster@oakiebrumm.com</a></span></p></th>
          </tr>
        </table>
        <br />
        <table width="436" height="192" border="6" align="center" cellpadding="14" cellspacing="2" bgcolor="#FF0000" id="Index6">
          <tr>
            <th height="180" align="center" valign="baseline" bgcolor="#000000" scope="col"><span class="style4"> <span class="style53">&quot;There may be tough guys in<br />
      the National Football League,<br />
      but they would be second stringers to <br />
      the guys that 'Oakie' had to coach. <br />
            <strong><br />
      My advice: READ THIS BOOK.</strong><br />
      There are stories that will open your eyes </span></span><span class="style37 style53"><br />
      and shake your head - it is OAKIE AT HIS BEST!!!&quot;</span><br />
      <span class="style54"><br />
      JERRY BURNS - Former Head Coach<br />
      Minnesota Vikings</span></th>
          </tr>
        </table>
        </blockquote>
    </blockquote>
  </blockquote>
</blockquote>
<table width="264" height="126" border="6" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
  <tr>
    <th height="114" align="center" valign="middle" bgcolor="#80FF00" scope="col"><p><span class="style35 style105 style46"><span class="style94">Brumm Enterprises LLC<br />
      </span></span><span class="style44 style44 style46"><span class="style44 style44 style104  style105"><span class="style44 style44 style104 ">PO BOX 4172 &middot; RACINE, WI 53404</span></span></span><span class="style33 style44 style44 style105"><span class="style64 style44 style44 style46"><br />
        </span></span><span class="style33"><span class="style104">Phone:</span> 262-939-8075<span class="style104"><br />    
        Fax:</span> 414-570-2109<br />
        </span><span class="style10">E-mail:</span> <span class="style44"><span class="style105"><a href="mailto:info@oakiebrumm.com">info@oakiebrumm.com</a></span></span><span class="style105"><br />      
        <span class="style10">Webmaster:</span></span> <span class="style33 style44 style105"><a href="mailto:webmaster@oakiebrumm.com" class="style44">webmaster@oakiebrumm.com</a></span></p>
    </th>
  </tr>
</table>
<div align="center">
  <p><br />
      <span class="style44"><span class="style45">&copy; 2009 by Brumm Enterprises LLC. All rights reserved. </span><br />
      <br />
  </span><span class="style18 style46">Site Update: 5/09/07</span></p>
</div>
</body>
</html>

Recommended Answers

All 15 Replies

First I would add all of the css to an external style sheet, that will decrease the size of the page and make it more manageable, Second why not just add a <div> to encompass the table and use positioning through that?

I'm not entirely sure what you are asking but the above is a solution that can typically fix most positioning problems.

Thank You Valonesal - I will try this out - - have to better understand the tags by my own admission. Again, appreciate the fast response!

No problem is there a way you can give me the url for your site so I can have a better look and possible show you how I would code it so you can better understand?

That is so nice of you. Unfortunately, it has been offline while I revamp it. I had to wrestle back the domain first. I have the code that you have now - - - still have a fair amount to do, once I get passed this hurdle which you are helping me on. What type of work, areas of interest do you get involved with?

Best, Bill

I do website design of almost any type, for styling I prefer css in most designs as its easier to edit, quicker and easier for cross browser compatibility.

My question for you is that im uncertain as to where the white area is that you want to remove because when I preview your code all I get are grey boxes on my server. So if you could be a bit more specific Ie. third box on the left white area above that, I could easily work this out so you get a live example of how to fix it.

Also check the table code which holds the image for any &nbsp; tags this can also create a white space. :)

Are you sure the image is transparent at the top? Maybe the white strip is in the image.

i said just to check that sometimes can be a common mistake. If there is a transparent image that's causing the problem just delete the image?

Hi Enthused, you may have answered what part of the problem is. I set the artwork up in Adobe Illustrator and erroneously set the art file up as a transparency before converting to "gif". I did try and change file from a transparency to an artboard, but that didn't help -- perhaps the file has to be set up first (not as a transparency) -- otherwise can't revert. But perhaps the transparency setup in the Adobe Illustrator file is causing the problem?

THANKS!

Hi Enthused, you may have answered what part of the problem is. I set the artwork up in Adobe Illustrator and erroneously set the art file up as a transparency before converting to "gif". I did try and change file from a transparency to an artboard, but that didn't help -- perhaps the file has to be set up first (not as a transparency) -- otherwise can't revert. But perhaps the transparency setup in the Adobe Illustrator file is causing the problem?

THANKS!

Im a little unsure to what you are trying to acheive, are you creating a website in illustrator then slicing and exporting to dreamweaver?

If so it should look almost exactly the same as in illustrator as it does in dreamweaver.

If it is just a single file/image your using in dreamweaver then the white space problem is either down to your code in dreamweaver or the image its self.

If you was to show a live example or maybe a screenshot id be able to understand.

Hi Enthused,

sorry for being late to reply. As you suggested, I would like to show you a screenshot of what the page looks like but do not know how to paste a screenshot here. I did check to make sure that the art file, which is Adobe Illustrator (saved as GIF 128-no dither) is not a transparent web file. All of the photos were assembled in Photoshop in different layers but flattened when they were converted to high quality jpeg format.

Thanks again for your interest!

Hi Enthused - - - here is a very simple box where the white space is showing up on top and bottom. I was taking the whole file apart piece by piece and now down to just the photo. There is a 2nd column with nothing in it - - - and the no wrap and header boxes are unchecked. When I started to rebuild the page from scratch, the artwork first fit in fine. Then I fit in another graphic, and dreamweaver added about 20 pixels vertical to that one - saved as a GIF 128. Then I stripped it back to the picture you will see in the code and still have the white space. Don't get . . . .

Thanks again for looking at this!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.Arial14px {
    font-size: 14px;
    font-family: Arial;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    color: #000000;
    position: static;
    top: auto;
    vertical-align: top;
}
.Arial12pxN {
    font-size: 12px;
    font-family: Arial;
    font-style: normal;
    line-height: normal;
    color: #000000;
    vertical-align: top;
}
.Arial14pxB {
    font-family: Arial;
    font-style: normal;
    line-height: normal;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    font-variant: normal;
    vertical-align: top;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<br>
<table width="15%" border="6" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="21"><p align="center"><img src="oakieauthor.jpg" width="132" height="111"> </td>
    <td width="0%"><div align="center"></div></td>
  </tr>
</table>
</body>
</html>

Hi Valonesal, can you see the code I replied to Enthused with? You will see how I retraced my steps, stripping it all the way down to one photo and box. If you or Enthused can advise me on how to put a screenshot here, that will make it easier to show you what is driving me insane. :-)
Thanks again!

You know jpeg does not support transparency, right?

Hi Enthused,

sorry for being late to reply. As you suggested, I would like to show you a screenshot of what the page looks like but do not know how to paste a screenshot here. I did check to make sure that the art file, which is Adobe Illustrator (saved as GIF 128-no dither) is not a transparent web file. All of the photos were assembled in Photoshop in different layers but flattened when they were converted to high quality jpeg format.

Thanks again for your interest!

Are you sure the image is transparent at the top? Maybe the white strip is in the image.

Thank you all - - - I am getting warmer. :-)

I converted to GIF art files to jpeg and the extra space between in the graphics with the quote disappeared. I inserted a few more items from the original file and was working fine until I got to where I am on this file. I still have to work on changing the css to external files but don't know what rocked the boat to get the extra white space at the top. It is not part of any of the photos. I also eliminated "&nbsp;" that was encoded in the table commands with the photos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.Arial14px {
	font-size: 14px;
	font-family: Arial;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	color: #000000;
	position: static;
	top: auto;
	vertical-align: top;
}
.Arial12pxN {
	font-size: 12px;
	font-family: Arial;
	font-style: normal;
	line-height: normal;
	color: #000000;
	vertical-align: top;
}
.Arial14pxB {
	font-family: Arial;
	font-style: normal;
	line-height: normal;
	color: #000000;
	font-size: 14px;
	font-weight: bold;
	font-variant: normal;
	vertical-align: top;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<table border="6" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><p align="center"><a href="author.html"><img src="oakieauthor.jpg" alt="" width="108" height="91" border="0" align="top" /></a></p>
      <p align="center"><a href="author.html"><span class="Arial12pxN">Leonard<br />
&quot;Oakie&quot; Brumm</span><br />
<span class="10ptArial">(1927-2006)</span></a> </p>
      <p align="center"><strong><a href="WOPHoBrummPreviewOPT.pdf"><img 
src="button52136660.jpg" alt="" width="100" height="30" border="0" align="top" id='button773'
onmouseover = 'document.getElementById("button773").src = "button79153652.jpg"'
onmouseout =  'document.getElementById("button773").src = "button52136660.jpg"' /></a></strong></p>
      <p align="center"><a href="howtoorder.html"> <img 
src="button68124503.jpg" alt="" width="100" height="30" border="0" align="top" id='button684'
onmouseover = 'document.getElementById("button684").src = "button65444503.jpg"'
onmouseout =  'document.getElementById("button684").src = "button68124503.jpg"' /></a></p>
    <p align="center"><a href="medialog.html"><img 
src="button64022762.jpg" alt="" width="100" height="30" border="0" align="top" id='button913'
onmouseover = 'document.getElementById("button913").src = "button41302554.jpg"'
onmouseout =  'document.getElementById("button913").src = "button64022762.jpg"' /></a></p>
    <p align="center"><a href="testimonials.html"> <img 
src="button25466974.jpg" alt="" width="100" height="30" border="0" align="top" id='button922'
onmouseover = 'document.getElementById("button922").src = "button20845523.jpg"'
onmouseout =  'document.getElementById("button922").src = "button25466974.jpg"' /><br />
      </a><br />
      <img 
src="button13095620.jpg" alt="" width="100" height="30" border="0" align="top" id='button389'
onmouseover = 'document.getElementById("button389").src = "button44917015.jpg"'
onmouseout =  'document.getElementById("button389").src = "button13095620.jpg"' /></p>
    <p align="center"><a href="links.html"><img 
src="button35012664.jpg" alt="" width="100" height="30" border="0" align="top" id='button133'
onmouseover = 'document.getElementById("button133").src = "button76641767.jpg"'
onmouseout =  'document.getElementById("button133").src = "button35012664.jpg"' /></a></p>
    <p align="center"><a href="howtoorder.html"> <img 
src="button19443985.jpg" alt="" width="100" height="30" border="0" align="top" id='button895'
onmouseover = 'document.getElementById("button895").src = "button41150590.jpg"'
onmouseout =  'document.getElementById("button895").src = "button19443985.jpg"' /></a></p>
    <p><img src="webtestimonialsj.jpg" width="142" height="523" align="top"></p></td>
    <td valign="top"><p><img src="OakieartREVjp.jpg" width="598" align="top"></p>
      <table width="307" border="3" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFF00">
        <tr>
          <td width="299" height="64" valign="middle"><div align="center" class="style162">
              <p class="style163"><a href="boblinglink.pdf">Book Review </a></p>
          </div></td>
        </tr>
      </table>      
      <p align="center"><span class="style164">        </span></p>
    <p align="center"><span class="12ptTimesRom">Massachusetts School of Law Television <br />
Interviewer - Diane Sullivan<br />
8/29/2005</span></p></td>
  </tr>
</table>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.