Gap Between Divs Problem

Can anyone help me figure out why my div named "#indexThmbs" is not sitting flush to the div above it named "#indexHeader1"
The purple body background color is coming through and I dont know why. There are no top/bottom margins on either divs so there should be no gap between the divs...I have no clue why this is happening.
I have posted the links to how the page SHOULD look (my JPG mock up)....
http://vojodesign.com/proofs/ARM/home.html
...and also my HTML file with the problem I'm talking about....
http://vojodesign.com/proofs/ARM
Thanks in advance.
Kit

Hi Kit,
I made a quick look and it's quite messy or at least seems that your css needs to be optimized. Anyway a fast solution would be in #indexThmbsInner with your margin-top:65px change it to 0 like:
#indexThmbsInner {
height:130px;
margin-left:auto;
margin-right:auto;
margin-top:0;
width:900px;
Also you declare many classes that do the same thing, so you can do this:
.indexThmb1, .indexThmb2, .indexThmb3, .indexThmb4 {
float:left;
margin-left:12px;
margin-top:65px; /* Notice I added the margin-top:65px; here */
text-align:center;
width:195px;
.indexThmb1 {
margin-left:12px;
.indexThmb2 {
margin-left:32px;
.indexThmb3 {
margin-left:33px;
.indexThmb4 {
margin-left:31px;
Probably there would be better ways to do it but as I mention it was just a quick look, also I haven't checked in IE just in FF but hope it helps
Cheers

Similar Messages

Gaps between divs tags in IE8

I designed a custom Facebook welcome page in DW and transfered it to FB. According to BrowserLabs, it looks fantastic on every browser and platform except IE8, which shows horizontal gaps between each div. I have tried and tried and can not find a solution. Thank you so much for your help.
http://www.facebook.com/RiverCoyoteDesign
Here is the entirety of the code:
<style type="text/css">
#wrapper {
    margin: 0px auto;
    padding: 0px;
    width: 520px;
    height: 703px;
.like-us {
    height: 112px;
.quote {
    height: 112px;
    width: 157px;
    float: left;
a img {border:none;}
.bot-nav {
.below-like {
    height: 55px;
.clearfloat {
margin: 0px;
clear: both;
height: 0px;
}.web-design {
    height: 171px;
.below-web {
    height: 57px;
.logo-design {
    height: 211px;
.below-logo {
    height: 43px;
.nav {
    background-color: #050c0f;
</style>
<div id="wrapper">
<div>
<div class="like-us"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_01.jpg" width="363" height="112" /><a href="http://www.rivercoyotedesign.com/quote.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_02.jpg" width="157" height="112" /></a></div>
</div>
<div class="below-like"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_03.jpg" width="520" height="55" /></div>
<div class="web-design"><a href="http://www.rivercoyotedesign.com/portfolio.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_04.jpg" width="520" height="171" /></a></div>
<div class="below-web"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_05.jpg" width="520" height="57" /></div>
<div class="logo-design"><a href="http://www.rivercoyotedesign.com/logos.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_06.jpg" width="520" height="211" /></a></div>
<div class="below-logo"><img src="http://rivercoyotedesign.com/fb-graphics/mock1b-rev1-flattened_07.jpg" width="520" height="43" /></div>
<div class="nav">
    <div class="bot-nav"><a href="http://www.rivercoyotedesign.com/portfolio.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat1_01.png" width="162" height="19" /></a><a href="http://www.rivercoyotedesign.com/logos.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_02.png" width="131" height="19" /></a><a href="http://www.rivercoyotedesign.com/enews.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_03.png" width="227" height="19" /></a></div>
<div class="bot-nav2"><a href="http://www.rivercoyotedesign.com/business-cards.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_04.png" width="221" height="37" /></a><a href="http://www.rivercoyotedesign.com/ecommerce.htm" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_05.png" width="124" height="37" /></a><a href="http://www.rivercoyotedesign.com/" target="_blank"><img src="http://rivercoyotedesign.com/fb-graphics/bot-nav-flat_06.png" width="175" height="37" /></a></div></div>
</div>

"BruceCSI2" <[email protected]> wrote in
message
news:fgnj8t$pan$[email protected]..
>I set up this demo page,
http://www.mistchild.com/gruen/index.htm
and there
>are
> gaps between divs when viewed in IE, but not Opera or
FF. The weird thing
> is,
> they show up between the themepic div and the nav div,
and between the
> content
> div and bottom div, but not between the nav div and the
content div. I've
> set
> top margins of 0 for all divs in my stylesheet.
> Can anyone help me figure this one out?
Your construct is really "weird", try this:
#nav,#content,#bottom{float:none}
img{vertical-align:bottom}
If that fixes your problem, then you can simply *remove* the
float
declarations from your sheet.
As a side note, you should try to keep things as simple as
possible. I'm
sure you can safely remove "position:relative" from many
rules. Also, there
is no need to set a width on DIVs that are not floats (their
natural
behavior is to fill the the parent container).
HTH,
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
- divaGPS - Add "you are here" highlighting to virtually any
menu
- divaFAQ - Create FAQ pages that toggle (show/hide) the
answers
- divaPOP - Easy, clean, standards-compliant popup windows.

Gap between divs, but only in IE6

I created a page at
http://www.gruenconstruction.com/gallerycontemporary.htm
with a top, middle and bottom div (mainly). For some reason, in IE6
there's a huge gap between the middle and bottom divs. It looks
perfect in Opera, IE 7 and FF. I can't figure this out.

Here I am at home. Can anyone help me out with this? Also,
does anyone know where I can get the exe file for IE6 so I can test
against it?

Gap between divs issue when switching doc to html5

I have a banner div w/image and a nav bar div immediatly below it, both at 100% of container at 960px. I now have an annoying gap of about 5px between the two. I had switched the doc from xhtml 1.0 transitional to html5. When I switch the doc type back to 1.0, the gap goes away. Does anyone know why this might happen? Could it be because I'm not using the html5 tags, like <nav>? I thought that using an html5 doc type does not replace the option to use the older html tags, but maybe I'm wrong. The code is below. Thank you.
<div id="banner"><img src="images/imageone.jpg" width="959" height="132" alt="alt text"/>
</div>
<div id="navbar">
    <ul id="site_nav" class="MenuBarHorizontal">
      <li><a href="index.php">Main</a></li>
      <li><a href="wp/index.php">Blog</a></li>
      <li><a href="datasources.html">Data</a></li>
<li><a href="about.php">About</a></li>
      <li><a href="contact.php">Contact</a> </li>
    </ul>
</div>

Quahog68 wrote:
Could it be because I'm not using the html5 tags, like <nav>? I thought that using an html5 doc type does not replace the option to use the older html tags, but maybe I'm wrong. The code is below. Thank you.
Yes, you need to add display: block; to the new html5 tags
<nav>
Whatver
</nav>
nav {
display: block
OOps sorry I read it as though you WERE using html5 tags ....... hmmmm you could still try adding display: block; to the banner and navigation <divs>
I'm also not sure why adding a html5 doctype would cause a gap. Maybe the image in the banner needs setting to display block as well.

Gap in between divs in firefox

Hi there.
I'm working on a website and I have tested in both IE 7, and
Firefox v2.
In IE it looks as intended, but in Firefox, there is a gap
between the customer menu (with lime green background), and the Top
Menu bit (above the lime green). The customer menu in the css is
#user_title. The top menu is #topmenu
Similarly, right at the bottom, in between the end of the
content, and the footer, there is a white gap.
I'm not too sure why it is appearing. Below are links to
screenshots of each (sorry I haven't got an upload of the actual
site). Also, i've attached my CSS file to this post.
IE Preview
Firefox
Preview
If anyone can help me get rid of the gaps, that would be
great!
Thanks,
Craig

.oO(craig_shaw)
>I uploaded it to a test server.
>
>The address is
http://www.lindendesign.co.uk/test/templates/header.html
>
>If anyone could help, that would be great.
In your CSS rule for "#user_title h1" change this
margin-left: 10px;
to this
margin: 0 10px;
The gap was caused by the h1 default top margin. Because of a
feature
called collapsing margins it was sticking out of the
#user_title div.
The new declaration takes care of this and sets both the top
and bottom
margin to zero.
BTW: The result in FF was the correct one, IE got it wrong
(as usual).
Micha

DIV and p (Gaps between them).

I'm sure that I'm missing something really obvious here:
I've attached the CSS that I'm using (external).
Using the WYSIWYG view, it's really hard to get it to do what
I want; I seem to have to ensure that I have a space below where I
want to put anything, check that the format is set to "none", then
I can set "start" - & enter my information. Then I can click in
the space, and do the same before entering the contents for "main".
However, if Dreamweaver helpfully adds some paragraph tags,
as it often does, it gives me a gap between "Start" & "main".
I've also found that if I don't have a blank line after the
bit that I'm trying to put in, then I end up with the insertion
point being unable to get "past" the final div tag, so I end up
with a div in a div, which isn't what I want.
I can use the code view to tweak to what I want, but I can't
help feeling that I'm missing something; either that the CSS is
wrong - so I should be able to have two paragraphs in adjoining div
touching each other, or something!
I'd found
http://archivist.incutio.com/viewlist/css-discuss/39227
- which suggested using div > p - but even though I tried with a
line-height of as low as 0.8 it didn't work, so I've obviously got
the wrong end of the stick (wrong stick most likely!)
Emma

Emma,
> I've worked it out! I don't *need* the div tags.
That's right.
> As long as I use p class = and then enter the text, I
can
> then get two different paragraphs to join & look
like a
> single body!
As a matter of fact, you don't even need class="something".
There are
various kinds of CSS selectors. One of them is known as a
class, which
requires the class="" attribute in your HTML and a dot in
front of the class
name in your CSS.
e.g.
.discussMain = { properties here }
Another kind is known as an element selector. That's where
you simply
use the name of an HTML element, such as p, as your selector.
You don't
need a dot, then, in your CSS for that rule.
e.g.
p { properties here }
Keep in mind, if you use an element selector, *all* elements
of that
type will be affected. If you only wanted to affect a dozen
<p> tags, but
not all, you could either give each of them a class attribute
and use a
class selector, *or* you could wrap all those <p> tags
in another tag --
say, a <div> -- then apply your class to the
<div>. This is partly what the
"cascading" means in Cascading Style Sheets.
<div class="something">
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
.something p {
properties here
In the above, the HTML shows a way to corral together a
handful of <p>
tags. The CSS references all <p> tags that exist inside
any element whose
class attribute equals "something".
There are other ways to specify which parts of the HTML
should be
affected. See this Wikipedia entry for a good overview.
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
David
stiller (at) quip (dot) net
Dev essays:
http://www.quip.net/blog/
"Luck is the residue of good design."

Problem: Gap between objects

I've made a logo for a company. I have som issues with gaps between objects. I've googled and tried
several soloutions without any luck. How can I merge the two objects together and still maintain the two
colors? I've recorded a video so you can see the problem by yourself and hopefully help me.
Thanks in advance!
https://dl.dropboxusercontent.com/u/1773236/logo_problem.m4v

DigiEyeZ,
It just occurred to me (rereading about the change in gradient angles and seeing the video) that you may be haunted by the Align to Pixel Grid ghost.
If you go back to the original divided shapes, select all of them, and then look at the Transform palette, is Align to Pixel Grid ticked?
If it is, untick it, and also untick the option Align New Objects to Pixel Grid.
Then retry the different solutions. You may also see what happens with the original divided shapes.
You may also consider adjusting the positions and sizes of the shapes to fit the pixel grid, of course.

Image aligned problem - small gap between images

Can anyone spot what is causing the small gap between the
images in this
page:
http://dwayne.compasslearning.com/index.html
see the top middle image is pushed up to the very top of the
window where it
should have a small space at the top and then it has a gap at
the bottom
where there should be no space or gap?
Any help is appreciated.
Thanks.

Please disregard...I figured it out.
Thanks.
"-D-" <[email protected]> wrote in message
news:f2kqck$qot$[email protected]..
> Can anyone spot what is causing the small gap between
the images in this
> page:
>
>
http://dwayne.compasslearning.com/index.html
>
> see the top middle image is pushed up to the very top of
the window where
> it should have a small space at the top and then it has
a gap at the
> bottom where there should be no space or gap?
>
> Any help is appreciated.
>
> Thanks.
>

Safari 2.0.4 bug : 130x320 px gap with div a object object a div

If you place the below code in a blank HTML page and view it with Safari 2.0.4, you'll see a 130 pixel vertical gap between 1 and 2, and a 320 pixel horizontal gap between 3 and 5.
1
<div>
2
<a>
3
<object>
4
</object>
5
</a>
6
</div>
7

Safari crashed, but we don't know what you were doing at the time, or what Input Managers you're running;
those are the prime cause of crashes. You should also update to 10.4.11 and Safari 3.1.1 by now; that will
alleviate some problems, too.
Go to Users/<username>/Library and create a new folder named InputManagers (Disabled). Then move all
your Input Managers into that folder and try restarting Safari and do the same things you were before the
crash to see if it does it again. Do it several times in the same session; don't rely on just one attempt meaning
that everything is fine. If everything is fine and it doesn't crash, then it's one or more of the Input Managers
that is the likely cause, and you'll have to add them back one at a time and test each time to figure out which
one is the problem.
Mulder

Unwanted gaps between images in Internet Explorer

I have sliced a image web page in Photoshop and exported it
to .html and images. It looks perfect in IE7 and Firefox. Then
brought it into Dreamweaver and deleted the large image in the
content area and inserted a table into the content area. Now when I
preview it in IE7 there is a gap between the top image and the two
images on either side of the content area. Borders for all three
images is set to zero as are cell padding etc. It displays
correctly in Firefox and Dreamweaver but IE7 places a gap between
the images. How do I remove the gap using HTML tables?

>I have sliced a image web page in Photoshop and exported
it to .html and
> images.
That's a bad start. The HTML written by graphics apps (and
indeed by any
'wizard') is fragile, and unsuitable for any use other than
prototyping.
> Now when I preview it in IE7 there is a gap between the
top image
> and the two images on either side of the content area.
This is precisely the symptom of having used a graphics app
to write your
HTML. Why? You have changed the ground rules (i.e., the shape
of the
content) by deleting the large image and replacing it with a
table. When a
wizard writes your HTML, it writes it to EXACTLY reproduce
the shape you
have given it. Change that shape and you change the way the
fragile code
adapts - resulting in a breakage of your layout.
The principal culprit is the use of col- and rowspans by
these wizards -
... colspan="3">
You can read more about this here -
http://apptools.com/rants/spans.php
The solution is to bite the bullet and learn enough HTML that
you can create
your own layouts without relying on a graphics app. Otherwise
you will
have this problem continuously.
1. When I need to merge cells...
a. If they are horizontally adjacent, instead of merging
them, I end
the current table, and 'stack' a new one underneath it with
the desired cell
configuration.
b. If they are vertically adjacent, then I end the current
table at the
row ABOVE the row where the need for merging begins. I then
start a new
table with two cells in one row, and place a properly
structured inner table
in each of those two cells.
2. When I need to split cells, I just insert a nested table
with the proper
cell configuration into the cell I would otherwise split.
The goal here is to completely avoid merging or splitting
cells (i.e., using
col- or rowspan attributes in your table markup), since
that's what makes
Layout mode's tables (and any wizard's tables) so fragile.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Clark9" <[email protected]> wrote in
message
news:[email protected]...
>I have sliced a image web page in Photoshop and exported
it to .html and
> images. It looks perfect in IE7 and Firefox. Then
brought it into
> Dreamweaver
> and deleted the large image in the content area and
inserted a table into
> the
> content area. Now when I preview it in IE7 there is a
gap between the top
> image
> and the two images on either side of the content area.
Borders for all
> three
> images is set to zero as are cell padding etc. It
displays correctly in
> Firefox
> and Dreamweaver but IE7 places a gap between the images.
How do I remove
> the
> gap using HTML tables?
>
> <html>
> <head>
> <title>African Chamber of Commerce of
Texas</title>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
> <style type="text/css">
> 
> <table id="Table_01" width="935" height="810"
border="0" cellpadding="0"
> cellspacing="0">
> <tr>
> <td height="212" colspan="3"><img
src="images/index_01.gif" alt=""
> width="935" height="212" border="0" usemap="#Map">
> <map name="Map">
> <area shape="rect" coords="100,182,157,206"
href="index.html">
> <area shape="rect" coords="188,185,270,207"
> href="about_us.html">
> <area shape="rect" coords="305,183,378,208"
> href="benefits.html">
> <area shape="rect" coords="413,183,486,208"
> href="members.html">
> <area shape="rect" coords="518,184,594,209"
> href="events.html">
> <area shape="rect" coords="618,183,705,208"
> href="application.html">
> <area shape="rect" coords="740,181,832,208"
> href="contact_us.html">
> </map></td>
> </tr>
> <tr>
> <td rowspan="2" align="left" valign="top"><img
src="images/index_02.gif"
> alt="" width="94" height="600" border="0"
align="top"></td>
> <td height="501" valign="top"><table
width="747" height="269" border="0"
> cellpadding="8" cellspacing="0">
> <tr>
> <td width="211" valign="top"><p
class="style1">
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
> Transitional//EN">
> <br>
> <em><strong>United We Stand; Divided We
Fall.</strong></em>
> </p>
> <p class="style1">With your participation in ACCT,
you become
> one
> of the contributors toward the building and advocacy of
the “Trade
> Not
> Aid” movement.</p></td>
> <td width="250" valign="top"><div
align="center">
> <p><span class="style2">
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
> Transitional//EN">
> <br>
> </span><span
class="style2"><strong>What ACCT can do for
> you?</strong></span> </p>
> </div>
> <ul>
> <li> <span class="style1">Networking and
Exposure<br>
> Referrals</span></li>
> <li class="style1">Cultural center</li>
> <li class="style1"> Newsletters</li>
> <li class="style1"> Welcome and orientation
program</li>
> <li class="style1"> Assistance in business
outreach
> programs</li>
> <li class="style1"> Training and continuing
education in
> small business start-up and management</li>
> <li class="style1"> ACCT office
facilities</li>
> <li class="style1"> Legal assistance</li>
> <li class="style1"> ACCT will be there for you,
all the
> way.
> </li>
> </ul></td>
> <td width="238" valign="top" class="style1">
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
> <br>
> <strong>ACCT</strong> believes that lasting,
meaningful
> furtherance of economic development efforts is
predicated on the
> equitable
> sharing of world resources, along with the preservation
and maintenance
> of a
> healthy and fair business environment. Furtherance of
economic
> opportunities
> in a global economy also requires an informed and
involved public where
> everyone participates in decisions which affect the
common good for
> self-reliance, sustainability and prosperity. The
cornerstone of ACCT is
> “<strong>Trade Not
Aid”.</strong></td>
> </tr>
> </table></td>
> <td rowspan="2" align="left" valign="top">
> <img src="images/index_04.gif" alt="" width="94"
height="600" border="0"
> align="texttop"></td>
> </tr>
> <tr>
> <td height="97" valign="top"><img
src="images/index_05.gif" width="747"
> height="97" alt=""></td>
> </tr>
> </table>
> 
> </body>
> </html>
>

Classical music on iTunes: lack of proper gaps between movements

I have the latest generation iPod and am using the latest version of iTunes. I purchase primarily classical music on iTunes and am quite annoyed that the gaps between movements (or "tunes" of an "album") are not reproduced properly the way they are on any CD, including of course the original recordings that the digital tunes derive from. Specifically, one movement runs into the next with little or no silence in between. (I am not talking about crossfade, which I disabled.) I submitted a complaint to iTunes but got no human response, just a free "tune."
Does anyone know of this problem being addressed by the iTunes Store? Alternatively, does anyone know an easy way to add a few seconds of silence to the end of selected tunes?
Many thanks in advance for any help!

I don't know of any scripts that will do that or a program that will do that for you. But if you click on the composer and then hit Cmd i. You can mass change all of the information by that composer. You can do the same thing with Album and Genre.

I need to add a gap between songs when burning a CD

I just upgraded to iTunes 9.2.0.61, hoping that it would solve my problem. I need to add (yes, ADD) a gap between songs. I'm burning a CD to be used during a performance, and there's a reason that I need 10 seconds of silence after the first song. I believe in previous versions I could add a gap between songs...using Get Info, then Options, but now it just gives me a start and end time for songs. How can I add a 10 second gap between the first two songs?

tcoandkiki wrote:
How can I add a 10 second gap between the first two songs?
Add a track consisting of 10 seconds of silence. I made you one in crystal clear MP3 stereo. You can get it here: http://rcpt.yousendit.com/907964971/c4d2c9e22762a8911f4e431a1e2a4e2c
Just put it in the library and then add it to your playlist wherever you need it.
iTunes lets you add a gap between songs, but only up to 5 seconds, and it has to be the same every time.

Gap between two characters in SAP Script Address EndAddress.

Hi Abapers,
I have one query regarding Address - EndAddress in SAPScript.
I am putting the code :
/: ADDRESS TYPE '1' PARAGRAPH ZI PRIORITY 'APL43' LINES 6
/:ADDRESSNUMBER &ZPOLGORT-ADRNR&
/:ENDADDRESS
and I am getting the output in this form
<b><i>ABC Soft c/o JSI Hong Kon g
c/o RS Logistics (Shenzhen) Limited
6/F., DZ Zhong Tian Yuan Logistics Ctr.
126/Xia Road, Futian Free Zone,
Shenzhen
China</i></b>
But the problem is there is a gap between character "n" and 'g" in first line in word Kong.
Can anybody suggest me how to solve this issue. Or is there any other issues to sort it out this problem.

Hi,
Its not the problem with Address / End Address.
It could be probably maintained that way.
Please check the entry in the table where it is maintained.
reagrds,

Remove gaps between objects in Illustrator

Hello. I have made a document with some objects in illustrator. The problem is that there is a white gap between the objects.
I have tried all the advices here on adobe forums and google, but nothing works.
I have uploaded the files to my website, so that you could give it a try if you want to help.
the files you can find here:
http://www.kasperstaal.dk/example.ai
http://www.kasperstaal.dk/example1.ai
- the one file is a CC file and the other one is CS6...
How can i fix this?
Thank you very much in advance..

For the web try and export is as PSD/TIF/whatever and check the antialiasing option "Art optimized"
When printing this shouldn't matter. It doesn't in offset printing, but might matter in other rare cases. Occasionally people pop up in this forum ...
But since you won't be in control of selecting the service bureau and printing process, you might try and create shapes below the actual object that share the same color and hide the gaps.

Gap between objects

I know there are several threads about this but I haven't found a decent answer. I have a logo I'm working on with overlapping shapes, strokes, etc. Everything looks fine in Illustrator but when I export the file to show the client, whether it be a .png, .pdf, .jpg, there is a hairline gap between objects. Is this only a screen issue or will the hairline gap print?

That's right, it's a screen issue. So printing the vector file will be fine.
You have a problem is when you want to show a pixel version to a client.
Place the AI file as a smart object in Photoshop
See my answer here for a solution:
Illustrator divide problem
You can also skip the Photoshop route by using the Rasterise effect in Illustrator and export as .png, jpegs etc.

Gap Between Divs Problem

Similar Messages

Maybe you are looking for