Unwanted white spacing between images

Hi,
I have loaded up roll over images in a side nav and applied 0 to padding and margins as I do not want any space between the images - but when I preview the page in my browser there is large white space between each image. the design view in dreamweaver does not show white spaces but the live view does.
Can someone please tell me what I might be doing wrong?
thanks!

Thanks Lawrence. I have applied what you recommended below and it hasn't fixed it.
This is the first site I've created so my skills are pretty amateur. If it helps the code for my side nav below with CSS code for the table below it:
<div id="sidebar1">
    <table width="252" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="232" height="42" align="left"><p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('lombardvisa','','Images/ih_lombardvisaRO.jpg',1)"><img src="Images/ih_lombardvisa.jpg" name="lombardvisa" width="250" height="45" hspace="0" vspace="0" border="0" align="left" id="lombardvisa" /></a></p></td>
      </tr>
      <tr>
        <td height="41" align="left"><p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Features & Benefits','','Images/ih_features&benefitsRO.jpg',1)"><img src="Images/ih_features&benefits.jpg" name="Features & Benefits" width="250" height="45" hspace="0" vspace="0" border="0" align="left" id="Features & Benefits" /></a></p></td>
      </tr>
      <tr>
        <td height="46" align="left"><p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Apply Now','','Images/ih_applynowRO.jpg',1)"><img src="Images/ih_applynow.jpg" name="Apply Now" width="250" height="45" hspace="0" vspace="0" border="0" align="left" id="Apply Now" /></a></p></td>
      </tr>
      <tr>
        <td height="42" align="left"><p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Activate your card','','Images/ih_activateyourcardRO.jpg',1)"><img src="Images/ih_activateyourcard.jpg" name="Activate your card" width="250" height="45" hspace="0" vspace="0" border="0" align="left" id="Activate your card" /></a></p></td>
      </tr>
      <tr>
        <td height="40" align="left"><p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Internet banking','','Images/ih_internetbankingRO.jpg',1)"><img src="Images/ih_internetbanking.jpg" name="Internet banking" width="250" height="45" hspace="0" vspace="0" border="0" align="left" id="Internet banking" /></a></p></td>
      </tr>
      <tr>
        <td height="43" align="left"><p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Lost or stolen cards','','Images/ih_lostorstolencardsRO.jpg',1)"><img src="Images/ih_lostorstolencards.jpg" name="Lost or stolen cards" width="250" height="45" hspace="0" vspace="0" border="0" align="left" id="Lost or stolen cards" /></a></p></td>
      </tr>
      <tr>
        <td height="56" align="left" valign="middle"><img src="Images/sidenav2.jpg" width="250" height="200" hspace="0" vspace="0" align="left" /></td>
      </tr>
    </table>
    <h3> </h3>
    
</div>
CSS for table
#sidebar1 table tr td strong {
    color: #FFF;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif, Verdana;
    font-style: normal;
    font-weight: 500;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;

Similar Messages

White Spacing between Web Parts

.       How do we increase or decrease the vertical and horizontal white spacing between SharePoint web parts.

http://sharepointdeveloperblog.blogspot.in/2013/10/remove-space-between-web-parts.html
<style
type="text/css">
     .ms-webpartPage-root
         border-spacing:
0px
!important;
       .ms-webpartzone-cell
         margin:
0px
!important;
</style>

White space between images

I have 5 rollover images lined up beside each other in a
table cell. I have reduced their borders to 0, the cell padding and
cell spacing to 0 also. I even tried reducing the images padding
and margin to 0. However, there is still a really thin line between
each of the images that i want to get rid of (it's as if the images
all have a small white border around them, but I've reduced their
borders to 0).
Here is what the code looks like:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="53">
<div id="box">
<p align="right"><img src="banner.jpg"
name="banner" width="536" height="101" border="0" id="banner" />
<a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('home','','Buttons/homebtnover.jpg',1)"><img
src="Buttons/homebtnup.jpg" name="home" width="107" height="36"
border="0" id="home" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('theteam','','Buttons/theteambtnover.jpg',1)"><img
src="Buttons/theteambtnup.jpg" name="theteam" width="107"
height="36" border="0" id="theteam" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('schedule','','Buttons/schedulebtnover.jpg',1)"><img
src="Buttons/schedulebtnup.jpg" name="schedule" width="107"
height="36" border="0" id="schedule" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('gallery','','Buttons/gallerybtnover.jpg',1)"><img
src="Buttons/gallerybtnup.jpg" name="gallery" width="107"
height="36" border="0" id="gallery" /></a><a href="#"
onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('contact','','Buttons/contactbtnover.jpg',1)"><img
src="Buttons/contactbtnup.jpg" name="contact" width="108"
height="36" border="0" id="contact" /></a></p>
</div> </td>

.oO(Twinbird24)
>It still doesn't work. I've even tried to just make a new
document and just
>place the rollover images beside each other in a row
(horizontally). However,
>even with the image's borders, padding, and margin set to
0, there still seems
>to be a really small space between the images.
>
> Here is a link to the rollover images, as you can see,
there is that small
>white space between the images:
>
http://www.arkdesigns.ca/untitled.html
The gap I see is in the images themselves - the outermost
right and
bottom pixels are faded. There's no other gap between the
images in
Opera and IE 6.
Micha

PDF has white gaps between images

Hi,
I'm getting white lines between InDesign rendered images when viewing them in Acrobat.
ie. When I place a .psd file with trasparency onto another image and make a PDF, the area around the psd file has a faint white line.
I've looked into it a bit and seen that these are called atomic gaps or something and will never show on print. Also that I can turn off 'Smooth Line Art' in preferences to remove them (which then screws up other areas).
So the client isnt happy with an explanation of it, and would prefer a fix. One that makes everything look nice on his screen.
Is there fix? A way I can make InDesign or Distiller render the whole image maybe?
Thanks for any suggestions.

If you can't use PDF 1.4 (Acrobat 5) due to your service provider, then this is known as stitching and is only visible on screen. It does not effect final printed output.
In Acrobats preferences turn off smooth line art (Preferences > Page Display > Rendering > Smooth Line Art). This may have a visual on screen effect on type etc.

Unwanted line spacing between rows

Tables have 0 borders, cell spacing and padding. I use DW
MX2004, pc platform xp windows. I have 3 rows, inserted a
navigation bar,. There is extra "spacing" between the rows above
and below my navigation bar. What is the problem??? See page :
www.sodapopscott.com/index2.htm ??octoberben

You need to zero out the cellpading and cellspacing.
Highlight your main
table and make sure you enter 0 in those fields in the
property inspector,
so that you have:
<table width="770" border="0" cellpadding="0"
cellspacing="0">
Leaving those fields blank does not mean they are set to
zero, you need to
implicitly set them to 0..
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
"octobrben" <[email protected]> wrote in
message
news:e6lqos$e8m$[email protected]..
>I use DW MX2004, pc platform xp windows. I have 3 rows,
inserted a
>navigation
> bar,. There is extra "spacing" between the rows above
and below my
> navigation
> bar. What is the problem??? See page :
www.sodapopscott.com/index2.htm
> ??octoberben
>

I can't get rid of white space between images (even when margins are 0)

I'd like the user to be able to add two images that actually touch. I've set up 2 image fields that are touching, and set the margins to 0, but there is still white space in between the user added pictures.
I thought maybe the problem had something to do with borders, but when i click the borders palette, it tells me "these properties are not available for forms that contain background artwork".
Any help is appreciated.

The behavior only appears if you create a static form.
I saw an old thread about it here in the forums, you have commented too.
It probably will never get changed or nobody have ever send a bug report about this to Adobe.
http://forums.adobe.com/message/4927663#4927663
I never had such problem with image fields in dynamic forms.
And I almost never build static forms from existing PDF files, as those forms are too limited in — ahem — everything.

Why are there white spaces between my images when I preview my html design on a web browser?

I am creating an email newsletter with Dreamweaver CC and after being unable to find a way to use layers I opted to create the entire image in Photoshop and then break it into pieces to create the image links. I'm using tables and I have the padding and everything set to "0", but when I view it in the browser there are white spaces between each image. It looks solid in Dreamweaver, but in pieces on web browsers. I do not understand how or why this happened and I cannot figure out how to fix it. If anyone can help, I'd greatly appreciate it. Thanks.

I only used Photoshop for the layout. Then I created web-safe images for everything that I used for Dreamweaver. I uploaded the images to the internet and then image sourced them into the code so that they will be viewed properly in the correct circumstances. I haven't used HTML since about 2004 and I wasn't very good then. I've just been thrown back into it and I'm pretty much learning as I go. This is my second attempt because I wanted to make the newsletter more eye-catching. My first one is very basic and without a background image at all and that looks fine in pretty much all email clients. I tested it with Litmus. All except for Windows Live Mail, where the images didn't act as links but as static images. It works fine with the others I tested manually. Those being Gmail, Yahoo and AOL. I will try the display:block and get back to you. Thanks for your suggestions.

How to remove white space between sliced images ? Please help.

I've created a site by exporting sliced images from Photoshop into Dreamweaver. Some images have a thin white line between them that I can't get rid of. I think it's because they are in a table format. There is no cell padding. Can you help me remove them? (see code below) The images I'm talking about are the horizontal buttons used in the navigation bar. Thank you in advance!
Here is a link to the site: Site Preview
--------------CODE---------------
<table width="1001" height="751" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="17">
        <img src="../Images/Optimized-Header.gif" width="1002" height="188" alt="logo header"></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="194" alt=""></td>
      </tr>
    <tr>
      <td rowspan="2">
        <img src="../images/white-space-top-left.gif" width="44" height="45" alt=""></td>
      <td colspan="16">
        <img src="../images/Creekside-Layout-Final_03.gif" width="956" height="1" alt=""></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="1" alt=""></td>
      </tr>
    <tr>
      <td colspan="3"><a href="../creekside_homepage.html"><img src="../images/about-btn1.gif" width="157" height="44" alt="about"></a></td>
      <td colspan="3"><a href="../steam_and_sauna_page.html"><img src="../images/steam-and-sauna-btn2.gif" width="233" height="44" alt="steam and sauna"></a></td>
      <td colspan="3"><a href="../creekside_hot_tubs_page.html"><img src="../images/hot-tubs-btn3.gif" width="162" height="44" alt="hot tubs"></a></td>
      <td colspan="3"><a href="../creekside_rentals_page2.html"><img src="../images/rentnals-btn4.gif" width="151" height="44" alt="rentals"></a></td>
      <td colspan="3"><a href="../creekside_contact_page.html"><img src="../images/contact-us-btn.gif" width="211" height="44" alt="contact us"></a></td>
      <td>
        <img src="../images/white-space-top-right.gif" width="42" height="44" alt=""></td>
      <td>
        <img src="../images/spacer.gif" width="1" height="44" alt=""></td>
      </tr>
    <tr>

Your slices appear to be a little bit off.
Use Photoshop for images only. Use DW to build your web pages. Exporting HTML from graphics apps is not going to produce good cross-browser results. It's really only for quick prototypes; not real web sites.
See this 3 part tutorial:
Taking a Fireworks (or Photoshop) comp to a CSS Layout in DW
Part 1 - Initial Design
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Part 2 - Markup preparation
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt2.html
Part 3 - Layout and CSS
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt3.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Unwanted spaces between images, fine in browsers spaces appear in email clients

using the help and tips on here i managed to eliminate the gaps between images and the borders around hyperlinked images so that it looks good in browsers unfortunately when i go to view it in outlook it creates spaces, weirdly only between some images and not all. I'm a novice so a step by step guide would be super. Please see the code below. the gaps appear above and below images:
Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-to-cha nge-your-Gateway-Service-Provider_03.jpg
Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-to-chan ge-your-Gateway-Service-Provider_05.jpg
Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-to-chan ge-your-Gateway-Service-Provider_08.jpg
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="1100" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td height="226" colspan="6"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_01.jpg" width="1100" height="226" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td height="161" colspan="6"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_02.jpg" width="1100" height="161" style="margin:0; padding:0;display: block;" /></td></tr>
<tr>
    <td height="552" colspan="3" rowspan="3"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_03.jpg" width="723" height="552" style="margin:0; padding:0;display: block;" /></td>
    <td height="137" colspan="2"><a href="http://www.pcpro.co.uk/reviews/security-appliances/380047/cyberoam-cr35ing#ixzz2MfSGzpIo" style="border: 0"><img class="noBorders" src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_04.jpg" width="348" height="346" style="margin:0; padding:0;display: block;" /></a></td>
    <td width="29" rowspan="12"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_05.jpg" width="29" height="983" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td height="206" colspan="2"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_06.jpg" width="348" height="206" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td height="183" colspan="2" rowspan="5"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_08.jpg" width="348" height="183" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td colspan="3"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_07.jpg" width="723" height="35" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td width="235" rowspan="2"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_09.jpg" width="235" height="81" style="margin:0; padding:0;display: block;" /></td>
    <td width="291" height="26"><a href="http://www.pcpro.co.uk/reviews/security-appliances/362284/sonicwall-nsa-2400mx" style="border: 0"><img class="noBorders" src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_09-10.jpg" width="291" height="26" style="margin:0; padding:0;display: block;" /></a></td>
    <td width="197" rowspan="2"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_11.jpg" width="197" height="81" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td height="55"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_12.jpg" width="291" height="55" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td height="67" colspan="3"><a href="http://www.cyberoam.com/pressrelease_iso20000.html" style="border: 0;"><img class="noBorders" src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_12-13.jpg" width="723" height="67" style="margin:0; padding:0;display: block;" /></a></td>
</tr>
<tr>
    <td colspan="3" rowspan="5"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_14.jpg" width="723" height="248" style="margin:0; padding:0;display: block;" /></td>
    <td height="62" colspan="2"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_15.jpg" width="348" height="62" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td colspan="2"><a href="http://www.cyberoam.com/downloads/Brochure/CyberoamNGSeriesBrochure.pdf" style="border: 0;"><img class="noBorders" src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_15-16.jpg" width="348" height="29" style="margin:0; padding:0;display: block;" /></a></td>
</tr>
<tr>
    <td colspan="2"><a href="http://www.vcwsecurity.com/training/webinars.html" style="border: 0;"><img class="noBorders" src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_16.jpg" width="348" height="27" style="margin:0; padding:0;display: block;" /></a></td>
</tr>
<tr>
    <td colspan="2"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_18.jpg" width="348" height="36" style="margin:0; padding:0;display: block;" /></td>
</tr>
<tr>
    <td width="253" height="25"><img src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_19.jpg" width="253" height="94" style="margin:0; padding:0;display: block;" /></td>
    <td width="95"><a href="http://www.vcwsecurity.com/index.php" style="border: 0;"><img class="noBorders" src="Images/Cyberoam-CR35iNG-raises-the-bar-for-performance---there-is-no-better-reason-t o-change-your-Gateway-Service-Provider_19-20.jpg" width="95" height="94"style="margin:0; padding:0;display: block;" /></a></td>
</tr>
</table>
</body>
</html>
Any help would be great. Thanks

You cannot ever hope to successfully create an html email using one big table. It's bad enough when going down that route for ordinary browser viewing but when it comes to email clients they are a lot less forgiving.
You need to use a series of simple nested tables. No spliting or merging cells, that's suicide.

How do I remove a white line between cells?

I have navigation buttons setting on top of a header image. The nav buttons are in one row and the header image is in the row below it. I have all cell padding and margins set to 0 in CSS, however, I still get the thin white line between the nav buttons and the image. Is this an IE problem? Additionally, I have removed all extra spacing within the pages HTML but still to no avail. Does anyone have any expert advice on how to get rid of this thin white strip so the images will butt up together?

Understood,
Here is my HTML
<table id="outerTable" >
<tr><td valign="bottom" id="mainMenu">
    <div><img src="images/home-current.gif"/>
    <a href="screenshots.htm"><img src="images/screenshots.gif" width="80px" height="105px" border="0"/></a>
    <a href="purchase.htm"><img src="images/purchase.gif" width="80px" height="105px"/></a>
    <a href="mailto:[email protected]"><img src="images/contact.gif" width="80px" height="105px"/></a></div>
</td></tr><tr><td id="topbar"><img src="images/golfSharkTopbar.jpg" width="700" height="70" alt="Welcome to Golf Shark Online"></td>
</tr>
and here is my CSS
/* ===== outer table ===== */
#outerTable {
    margin: 0 0;
    width: 700px;
height: 200px;
background: #fff url(images/golfSharkLogo.jpg) no-repeat;
/* ===== topbar ===== */
td#topbar {
    height: 70px;
cellspacing: 0;
cellpadding: 0;
margin: -5 0 0 0
/* ===== main menu ===== */
td#mainMenu {
    height: 125px;
    vertical-align: bottom;
cellspacing: 0;
cellpadding: 0;
#mainMenu div {
    height: 80px;
    margin-left: 350px;
    padding: 0;
vertical-align: bottom;
#mainMenu img {
    margin: 0 0 -5px 0;
padding: 0;
    border: none;

Thin white line between line art and live paint fill?

I am using live paint to paint cartoon character illustrations. The artwork is brought into Illustrator CS3 and live traced. Then I convert it to a live paint group and use the paint bucket to fill. Everything looks fine no matter how much I zoom in. If I bring the AI file into Photoshop CS6 I can see a thin white line between the black line art and the fill. This is most noticeable where black meets black. I can also see this sometimes in file previews while browsing through files. If the white line cannot be seen in Illustrator is the file ok? I did just upgrade to CS6 if that would make a difference.
Thank you for any help.

If the white line cannot be seen in Illustrator is the file ok?
Without knowing specifics,nobody knows.
"Okay" for what?
If it looks okay to you in Illustrator, then it's okay for viewing in Illustrator.
If the export of it does not look okay in Photoshop at 1:1 or higher zoom, then it's probably not okay for whatever you're going to do with that raster image.
If it's printed to a low-res composite printer, then it may be okay, because the printer may not be able to resolve the whitish pixels.
If it's printed for commercial (color-separated) reproduction, it may not be okay, depending on the scale at which it will be printed, and on other considerations partially described below.
The autotrace routine does not build traps. Typically, when you color-fill cartoon line art manually, you don't make the shapes that define the fills merely "kiss" the black line work, as would the default treatments of a stupid autotrace. The black line work typically overprints the fills, thereby creating printing traps.
Suppose a portion of your cartoon is a hand-drawn closed circle. The black line work is irregular; it varies in width, having been drawn with a marker or a brush. The circle is colored in with a medium green. There are no sloppy gaps in the original between the green and the black.
You scan it and autotrace it. Unless you apply some deliberate care to make it do otherwise, the autotrace is going to create a compound path, filled with black, and with no stroke; and a green simple path which (hopefully) exactly "kisses" (abuts) the black path. Adobe's on-screen antialiasing of the edge where the two colors abut may or may not cause your monitor to display a faint whitish or grayish sliver between the two colors.
Similarly, Photoshop's rasterization of it, or the rasterization of a raster export filter may do the same, and may actually result in some off-color pixels along the edge. (Your description of the scenario kinda raises the question of why you are auto-tracing something that you're then just going to rasterize in Photoshop anyway. Why do that? Why not just work with the scan in Photoshop?.)
So let's leave Photoshop out of the picture and assume you are autotracing it because you want vector artwork. You zoom way in to see if the whitish sliver enlarges. It doesn't, so you assume it's just an aberation of Illustrator's on-screen antialising. And then someone tells you you're in the clear. But are you? Not so fast.
Let's assume the artwork is destined for commercial (color-separated) printing. Further assume the color of the autotraced black is 100% K, and the color of the autotraced green is 100Y 50C. Three inks involved. None of those three inks are shared between the two objects. So even if the paths do, in fact, perfectly abut, there is no "wiggle room" built in for the minor alignment shifts that almost aways do occur on press.
Bottom line: Even if you do determine that the common antialiasing aberations that frequently occur on-screen in Adobe apps is just that—just an onscreen aberation, that does not necessarily mean your file is suitable for commercial color-separated reproduction.
First, you need to understand that autotracing is not the one-click, instant "conversion" of a raster image to vector artwork that far too many think it to be. Just like everything else, you don't just launch a program like Illustrator, start autotracing things willy-nilly without understanding what's really going on. Just like anyting else, you can use an autotrace feature intelligently or...well...not.
You have options. Illustrator provides an auto-trapping feature. Read up on it in the documentation so you understand what it's all about. Alternatively, you can expand the results of your autotrace, select all the black linework and apply a composite color that includes 100% K and reasonable percentages of C, M, and Y (a so-called "rich black"). Or,depending on the artwork and the desired results, you may consider doing the autotrace as centerlines so you have stroked paths, not just filled paths for the linework. That way, using the flood fill (so called LivePaint) will cause the auto-created fill objects to extend to the paths, not just to the edges of their strokes. Then set the linework to overprint.
At any rate, if you are doing this professionally, you need to read up on the principles and practices of trapping and color separation.
JET

Edging problem "thin white line" between paths in Illustrator CS4...

I am making a map of Europe with Illustrator CS4 for a documentary about WWI and how the Versailles Treaty carved up imperial Germany. After having traced imperial Germany before Versailles, I then carve out the territories given to neighboring states. The problem is these very fine white lines that appear between paths.
I have two paths right next to each other. But for some reason I see this very thine white line gap that shows up between them and becomes much more evident when I export into Photoshop. Please notice this very fine white line in the black image. What you see in this image are in fact two paths side by side. There should be no line between them. And I have no idea why this very fine line appears but it gets much worse in Photoshop much more noticeable. Please click on image to see the line more clearly.
Thank you very much in advance for any help or suggestions.
- Nick

Dear Jacob and Peter,
Thank you both very much for your help.
Please see these photos showing my problem more clearly.
I am using Illustrator to draw the regions, Photoshop to consolidate the layers, and Apple Motion 4 to build my animation.
[1] : Imperial Germany in 1914.
[2] : Germany after Versailles.
In Illustrator CS4, the images [1] and [2] have the colored layers in "Multiply" transparency mode. It's how I want the layers to look when I import them into Apple Motion 4.
My idea was to color all the layers black in "Normal" mode and then apply "colorize" filters in Motion 4 and set the transparency to "multiply" in Motion.
Now with Imperial Germany (all layers colored in black with transparency set to "Normal"), when I bring the image into Photoshop, I suddenly get very fine white lines between the layers and these lines show up in Motion which is the big problem. Like I said, when you click on this last photo, and you see the image full size, you can clearly see the problematic lines which appear exactly where the layers touch each other. In the photo below, the territories ceded to Poland (West Prussia) and Lithuania (Memel) are not yet red. They are still black but you can see the lines.
I don't understand because in Illustrator there were no gaps whatsoever between the layers. In Illustrator CS4, I simply cut the "territorial losses" from imperial Germany using the "Trim" function in the Pathfinder Menu. I created the red and yellow layers from the original single "imperial Germany" layer. In Illustrator I can colorize all the layers black and still never see any gaps. The fine white lines, appear in Photoshop and in Motion.
(NOTE: The documentary is being in edited in Final Cut Studio which is why I use Motion for animating.)
Sorry to ramble on. Thank you again for any further help you can give me.
- Nick

Lightbox Slideshow adjust spacing between thumbnails

Hi
This is actually a two part question -
1. I want to give a collage look to my slideshow, without any spacing between thumbnails. How can I remove all the space between thumbnails.
2. For all the thumbnails I want -"Fit the frame proportionally" and for all the big lightbox images I want "Fit Content proportionally" so that vertical and horizontal images are not cropped in the Lightbox view. How can I do that for all the images together rather than going one by one.
Thanks in advance.
-MP

Hi MP,
For your 1st request, the Thumbnails (containers that hold the thumb images) cannot be resized individually and maintain same dimensions for all the thumbnails. For this reason, even though you can remove all spacing between Thumbnails by selecting the Thumbnail Container and specifying H and V Gutter in the Spacing Panel to 0 -- if your slideshow images are of mismatched dimensions and proportions and you have Fit Content Proportionally selected as the Fitting option, then there will be an inevitable space around the thumb images either vertically or horizontally. You can work around that by using the Fill Frame Proportionally option.
For your 2nd request. you can choose the appropriate option in the Flyout menu for "New Hero" and "New Thumbnail" options BEFORE adding the new images to the slideshow. The selection you make here will be applicable for images that you add after setting this option. So the appropriate workflow would be to setup your slideshow the way you want, then choose the appropriate option for New Hero and New Thumbnail and then add all your images to the slideshow.
If you want fine grained control over thumbnail and images, you may look at Composition Widgets which allow you to manually place and size all content individually and still allow you to use the composition as a slideshow upon publishing.
Thanks,
Vikas

White space between header and main content

Hello all! I have a 25-27px white space between my header and
main content. I read through fixes in the forum and took out any
height that would effect this gap. I still can't get rid of this
white space. Your help is greatly appreciated! Here's 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>
</script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="p7hscroller/s7/p7HSM07.css" rel="stylesheet"
type="text/css" media="all" />
<script type="text/javascript"
src="p7hscroller/p7hsmscripts.js"></script>
<style type="text/css">

</style>

<script type="text/javascript"
src="slideshow.js"></script>
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<pre><span
class="style4">US-AsianMates</span><span
class="style6">.com</span> <strong><span
class="style9">JOIN FOR FREE <span
class="style7">OR</span> MEMBER LOG
IN</span></strong>
</pre>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<div align="center"><a href="#"
class="style16">HOME</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">ABOUT US</a></div>
</li>
<li>
<div align="center"><a href="#"
class="style16">WHY JOIN US?</a> </div>
</li>
<li>
<div align="center"><a href="#"
class="style16">VISA SUPPORT</a></div>
</li>
<li>
<div align="center" class="style16"><a
href="#">EVENTS</a></div>
</li>
</ul>
<pre>
</pre>
</div>
<div id="mainContent">
<div id="apDiv1"><img
src="Images/Outdoor_Bride1.jpg" alt="Bride" name="Bride"
width="525" id="Bride" /></div>
<p> </p>
<p><br>
</p>
<pre>
</pre>
<table width="200" border="1" align="left">
<tr>
<td><img src="Romantic_Kiss.jpg" alt="VISA"
name="VISASUPPORT" width="200" id="VISASUPPORT" /></td>
</tr>
<tr>
<td><img src="Surfing_At_Home.jpg" alt="JOIN"
name="WHYJOIN" width="200" id="WHYJOIN" /></td>
</tr>
</table>
<pre></pre>
<div id="apDiv3">
<div align="center">
<div align="left">
<pre class="style14"> <strong>LIVING
PROOF</strong>
<span class="style15">"12 YEARS AGO I WENT TO
THE PHILIPPINES IN HOPES
OF FINDING MY FUTURE WIFE. 11 YEARS LATER,
I AM HAPPILY MARRIED! WE ALSO HAVE AN ENERGETIC
5 YEAR OLD SON! DREAM IT, LIVE IT! IT CAN
HAPPEN TO YOU ON US-ASIANMATES.COM
CHRIS"</span></pre>
</div>
</div>
</div>
<pre> </span>
</pre></pre>
<p>
<br>
<pre>
</pre>
<div id="apDiv7"></div>
<div align="center">
<pre>
<script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'slideshow.swf',w:'580',h:'140',redirect:'',usePreloader:'true', xml:'slideshow_data0.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml% 20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%3Cstyles%3 E%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=% 2270%22%20iconWidth=%2250%22%3E%3C/Preloader%3E%3CPreloaderLabel%20font=%22Verdana%22%20si ze=%2210%22%20color=%22#666666%22%20bold=%22false%22%3E%3C/PreloaderLabel%3E%3CBackground% 20backgroundColor=%22#FFFFFF%22%20backgroundAlpha=%22100%22%20bevelColor=%22#FFFFFF%22%20b evelStrength=%2270%22%20borderWidth=%222%22%20borderColor=%22#000000%22%3E%3C/Background%3 E%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%2 0alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22%3E%3C/LoaderA nimation%3E%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement= %22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22%3E%3C/DataLoader%3 E%3C/styles%3E%3Clocalization%3E%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading% 20Data...%22%3E%3C/text%3E%3C/localization%3E%3Cfonts%3E%3Cfont%20id=%22loader_text%22%20n ame=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22fals e%22%20selectable=%22false%22%20align=%22left%22%3E%3C/font%3E%3C/fonts%3E%3C/slideshow%3E '});
// ]]>
</script>

</pre>
</div>
<pre>
</pre>
<pre> </pre>
<pre> </pre>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

"phillychris" <[email protected]> wrote in
message
news:[email protected]...
> Yep, it was the 1 pre tag creating the gap. So why is
this page a
> disaster, Tim?
Just because something is created in DW CS3 doesn't mean it's
not a
disaster, any more than using DeWalt power tools guarantees
that my
carpentry won't be a complete mess. The software is not a
replacement for
skills. It is a tool; your workflow and understanding of HTML
and CSS is
what allows you to use DW effectively.
So why did I call this page a disaster? When I see all that
extra markup,
spans, and inline tags, I shudder. It's way too hard to
troubleshoot. You're
not doing nearly enough with descendant selectors; instead,
most of your
code is inline, despite a huge CSS file.
Just one example: individual li tags with div align="center"
inside of them.
Way overkill. If you're centering all the li text in a given
list, control
it with CSS and kill all that extra markup.
E.g.
.MenuBarHorizontal li { text-align:center; }
In fact, if all there is in that .MenuBarHorizontal is the
list, you don't
even need to specify the list in the CSS. Just do:
.MenuBarHorizontal { text-align:center; }
Now you don't need div tags inside your li at all.
And if all of those a tags in that menu are going to be
.style16 class,
don't specify it on each link. In fact, don't even have a
.style 16 class.
Heck, since it's just specifying font size, you don't need to
target the a
tag at all. Just add font-size:x-small; to the
.MenuBarHorizontal ruleset I
gave you above.
The above are just examples from a quick glance at your code.
On the whole,
your markup and approach to styles are largely wasting the
power and point
of CSS.
In addition, several styles spanned onto one line of text...
a sure sign
that either you are using far too many styles to make design
sense, or else
you've got styles that overlap each other.
Here's my advice: Until you get a better handle on CSS, don't
style things
as you go. Forget styles altogether at the start. Create a
very clean HTML
markup and put ID and class selectors on things you know will
need them.
Preferably, place the HTML elements in the order you would
want your page
read if styling did not even exist, nesting elements where
necessary.
After you have created all the HTML structure, then go back
and style the
elements via CSS only. You will end up with less page weight
and far cleaner
code to decipher, not simply in terms of length but in terms
of conflicts
and redundancies.
If you're really insistent on styling things as you go, at
least do this:
don't create a new style every time you want to accomplish
something. Create
CSS rules for IDed containers and container classes. Then as
you go along
and are about to create a style, ask yourself where you are
and what all
this new rule needs to apply to. Specify the rule there,
under the selector
you've already created. Then you won't have .style1 -
.style16 like you do
now, and you won't have all that inline mess of code to sort
through.
Finally - as you create your CSS, discipline yourself to
avoid style spans.
They are necessary on the odd occasion, but very rarely.
Think semantically
(i.e. purpose of the style point you're making at a given
time).
For example, if you're tempted to create a span in order to
put something in
bold red, ask yourself: "Why?" Generally, it means you want
to place special
emphasis or strength on that. Well, in that case you don't
need a span. You
need to be using the proper tag, such as <em>
(emphasis) or <strong>. Then
you can style that tag in CSS. That way, what you have in
your page actually
makes sense apart from the style, and as a bonus you can
apply or edit your
style easily.
Tim G.
http://www.pactumweb.com
http://www.shortordersite.com
Be smart:
http://www.pactumweb.com/client/tips.php

White space between tables

Hi,
I am doing an Annual Report and there is a lot of financial tables. I have 60 tables and I need to align the tables vertically so that the white space between each table is exactly the same. Until now I have done this manually. I am sure that there is a better way to do this but I just haven't found the way yet. My first thought was to make a "parent" table with X rows and one column. Then I could put my child tables into the parent table and use a "spacer row" of exactly X mm. I tried this but it really complicates things
Then I tried the "space after" in the table properties but I cant figure out what this attribute does.
In other words I would like to force that the vertical space between tabel 1 and table 2 always is exactly 5mm. How can this be done?
I would appreciate some input/best practice.
/Regards
Thomas Lund

Your table is placed into a paragraph. Create a paragragh style that contains the space after that you want between the tables and then apply that style to all the paragraphs that contain tables. That should give you exact spacing between your tables in the text flow.
This will only work if you are flowing the tables together in one story (which I recommend).

Unwanted white spacing between images

Similar Messages

Maybe you are looking for