Gaps between images

Link #1 looks good in Safari, Chrome, Firefox and IE.
http://www.milkmoonkids.com/lion_canvas.htm
Link #2 is a similar page, but there are big gaps between the images that show up in Firefox and IE only. They look good in Safari and Chrome.
http://www.milkmoonkids.com/gifts.htm
Any ideas why it gets jacked up in those two browsers and how to fix it?
Thanks,
Rich

Start by adding a valid DOCTYPE to each page (line 1)
Change
<html>
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
and fixing the validation errors. There are only a few.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.milkmoonkids.com%2Fgifts.htm&charset=%2 8detect+automatically%29&doctype=Inline&group=0

Similar Messages

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>
>

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.
>

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.

Adding gaps between images

Hello Dreamweavers.
I have adding 5 images which are thumbnails in my div tag, and because they were all stuck next to one another I created a class css style of the following:
.space_me_out {
padding: 10px;
and then applied it to the 5 thumbails in my Div tag, they all have a nice gap of 10pixles. So my questions is, what it a right method of doing so?by making a class style with padding?
is this the correct method?
thank you.

There is a big difference in semantic class and non-semantic (e.g. style based) class.
Let's say one is .thumb and the other is .space_me_out. Both creates 10px padding around thumbnail images.
Later you need to add a border around thumbnail images. If you're using semantic class, you'd just add a border property to .thumb. If you're using non-semantic class, you'd need to create a new class .border_around_me and add that to all thumbnail images. Not elegant
Kenneth Kawamoto
http://www.materiaprima.co.uk/

Mystery Gap between images

I'm new to dreamweaver, and refreshing myself on programming (haven't done anything in years).
I'm making an ebay template using dreamweaver (limited or no css).
The problem I'm experiencing is a mystery gap that won't disappear. It appears to be highlightable, suggesting it's being read as text. But when I backspace to clear out the empty space, my image map disappears, and the links are no longer clickable.
Here is what I'm seeing:
http://imgur.com/a/Wv32J
And here is a link to the code:
http://pastebin.com/nFA8WBVY
Ignore the multiple paragraphs at the end. They're a place-holder to keep me on task and aren't associated with the problem I'm experiencing.
Any help is appreciated! Thank you!

Why do you have a lot of <pre></pre> tag in your code?
get rid of those and the extra space will most likely disappear.
You have them around you menu:
<pre><map name="MenuBar">
<area shape="rect" coords="-1,1,92,20" href="http://stores.ebay.com/Jasper-Jewelers?_rdc=1" title="Store" alt="Store" />
<area shape="rect" coords="96,1,260,20" href="http://www.youtube.com/" title="AboutUs" alt="About Us" />
<area shape="rect" coords="268,1,426,20" href="http://www.google.com/" title="Appraisal" alt="Appraisal" />
<area shape="rect" coords="432,1,590,20" href="http://www.wikipedia.com/" title="The4cs" alt="The 4 C's" />
<area shape="rect" coords="596,1,803,20" href="http://www.skype.com/" title="ReturnPolicy" alt="Return Policy" />
<area shape="rect" coords="809,1,930,20" href="http://www.yahoo.com/" title="Shipment" alt="Shipment" />
</map>
</pre>
They are also around this image map:
<pre><map name="SaveSign">
<area shape="rect" coords="1,1,103,14" href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=jasperjewelers&ssPageName=STRK:MEFS:ADDSTR&rt=nc" alt="Save Seller" />
<area shape="rect" coords="106,1,293,15" href="http://my.ebay.com/ws/eBayISAPI.dll?AcceptSavedSeller&sellerid=jasperjewelers&ssPageName=STRK:MEFS:ADDSTR&rt=nc" alt="Sign up for Newsletter" /></map></pre>
Plus you have one name fvch-code
<pre id="fvch-code-0">
</pre>
FWIW I havent a clue what they are - have never used them myself, very ocassionally seen then being used. 100% you don't need them.

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.

MSOutlook HTML newsletter issues - large gaps between large images and small gaps...

Please can you help me!
Searched the web & found plently of advice but still getting formatting display issue when viewing HTML newsletter in MS Outlook.
Fully aware on the basics regarding the multiple issues when creating HTML newsletters but this is driving me crazy.
Apparently there is a image height limit within Outlook (can't find out what this is) so I have sliced my larger images into 5/6 parts which solves the display issue in Outlook.
But the gaps between the slices are now being displayed as small blank spaces within Hotmail.
I did use <br> between each slice as without caused the fixed 600px wide containing table to expand due to the slices stacking hoz.
Also still getting small gaps (like <br> spaces) between all images in Outlook when displaying perfectly (no gaps) in a browser.
This is my newsletter displaying correctly via a browser:
http://eu.shorts.tv/site-admin/modules/mod_mail/SHORTSTV_DECEMBER_2012.htm
Using Dreamweaver 4 (do have the latest version via Adobe Creative Cloud Membership but not on this system).
Hope you can help
Many thanks

Many thanks David
I also found this article which is currently sitting on my desk.
Pdf would make perfect sense or even a url link to view via a browser but these guys need it contained within the email.
Thanks again for your kind advice.
Regards
ShortsTV
Date: Fri, 30 Nov 2012 18:05:08 -0700
From: [email protected]
To: [email protected]
Subject: MSOutlook HTML newsletter issues - large gaps between large images and small gaps...
    Re: MSOutlook HTML newsletter issues - large gaps between large images and small gaps...
    created by David__B in Adobe Creative Cloud - View the full discussion
Hey Shortstv, Not something I know much about, searched and found thishttp://robcubbon.com/create-html-email-newsletters-outlook/ Maybe create it as a PDF attachment instead? -Dave
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/4888255#4888255
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4888255#4888255
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4888255#4888255. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Adobe Creative Cloud by email or at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Getting rid of gap between title banner image and Spry Menu bar?

Hi,
Here's what I have so far :
http://www.artbywaqas.com/TEST/index.html
How can I get rid of the gap between the banner image and the menu below it?

Please explain, what is the center element as in line 43 with the closing tag on line 94?
Also, wrapping the banner image in a paragraph element ensures that you will have a margin and/or padding above and below the element unless you specifically change the style rules to eleminate the marging and/or padding.
The quickest solution is to remove the center element (which does not exist) and change the paragraph elemnt to a div element.
Gramps

Gaps between header/footer and main content

I am building upon a website that somebody else previously worked on. When adding to the main content, gaps appear between the header/footer and the content. How can I fix this?
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>stitch by stitch needlepoint</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="sbs_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body bgcolor="#d0e8fb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="732" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td><a href="index.html"><img src="images/logo.gif" alt="stitch by stitch" width="316" height="66" border="0" class="logo" /></a></td></tr></tbody></table>
<table width="732" height="629" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tbody>
<tr>
<td colspan="17"><img src="images/bordertop.gif" width="732" height="31" alt="" /></td></tr>
<tr>
<td rowspan="5"><img src="images/events_borderleft.gif" width="36" height="564" alt="" /></td>
<td><img src="images/nav_spacerleft.gif" width="31" height="19" alt="" /></td>
<td><a href="index.html"><img src="images/nav_home.gif" alt="" name="home" width="47" height="19" border="0" id="home" /></a></td>
<td><img src="images/nav_dot1.gif" width="7" height="19" alt="" /></td>
<td><a href="events.html"><img src="images/nav_upcomingevents.gif" alt="" width="114" height="19" border="0" id="events" /></a></td>
<td><img src="images/nav_dot2.gif" width="11" height="19" alt="" /></td>
<td><a href="classes.html"><img src="images/Nav_classes.gif" alt="" width="57" height="19" border="0" id="classes" /></a></td>
<td><img src="images/nav_dot3.gif" width="12" height="19" alt="" /></td>
<td><a href="directions.html"><img src="images/nav_directions.gif" alt="" width="68" height="19" border="0" id="directions" /></a></td>
<td><img src="images/nav_dot4.gif" width="13" height="19" alt="" /></td>
<td><a href="photogallery.html"><img src="images/nav_photogallery.gif" alt="" width="89" height="19" border="0" id="photogallery" /></a></td>
<td><img src="images/nav_dot5.gif" width="12" height="19" alt="" /></td>
<td><a href="customdesign.html"><img src="images/nav_customdesigns.gif" alt="" width="97" height="19" border="0" id="customdesigns" /></a></td>
<td><img src="images/nav_dot6.gif" width="13" height="19" alt="" /></td>
<td><a href="vendors.html"><img src="images/nav_vendors.gif" alt="" width="67" height="19" border="0" id="vendors" /></a></td>
<td><img src="images/nav_spacerright.gif" width="24" height="19" alt="" /></td>
<td rowspan="5"><img src="images/events_borderright.gif" width="34" height="561" alt="" /></td></tr>
<tr>
<td colspan="15"><img src="images/string.jpg" width="662" height="88" alt="" /></td></tr>
<tr>
<td colspan="15"><img src="images/events_hd_upcomingevents.gif" width="662" height="44" alt="" /></td></tr>
<tr>
<td colspan="15" width="662" height="13" bgcolor="#EBECEC"> </td></tr>
<tr>
<td width="662" height="397" colspan="15" bgcolor="#EBECEC" valign="top">
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="140"><br /></td>
<td align="center"></td></tr></tbody></table>
<p align="left" class="events_boldRed"><span class="style1">Charlie Harper Trunk Show</span></p>
<p align="left"><span class="style2">February 2012</span><span class="events_boldRed"><br />
</span></p>
<p align="left"> </p>
<p align="left"><span class="events_boldRed"><span class="style1">Back to Basics II with Tony Mineri</span></span></p>
<p align="left"><span class="style2">March 12, May 14, June 18 & July 19</span></p>
<p align="left"><span class="style2">9:30-4:00 (lunch will be provided</span></p>
<p align="left"><span class="style2">Space is limited - $350.00</span></p>
<p align="left"> </p>
<p align="left"><span class="events_boldRed style1">Tony Mineri Embellishments</span></p>
<p align="left" class="style2">2012 </p>
<p align="left" class="style2">June 3rd & 4th - Full (waiting list only)</p>
<p align="left" class="style2">November 4th & 5th (limited space available)</p>
<p align="left" class="style2">2013</p>
<p align="left" class="style2">June 9th & 10th </p>
<p align="left" class="style2">October 6th & 7th</p>
<p align="left"><span class="events_boldRed"><br />
</span></p></td>
</tr>
<tr>
<td colspan="17"><img src="images/borderbottom.gif" width="732" height="37" alt="" /></td></tr></tbody></table>
<table width="732" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<p align="center"><span class="bottomnav"><a href="index.html">home</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="events.html">upcoming events</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="classes.html">classes</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="directions.html">directions</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="photogallery.html">photo gallery</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="customdesign.html">custom designs</a> </span><span class="body_bottomlink">|</span><span class="bottomnav"> <a href="vendors.html">vendors </a></span></p></td></tr></tbody></table>
<p> </p>
<p> </p>
<p></p>
<p> </p>
</body>
</html>

This is just a guess, which is what we have to do until we can see the live page, but try changing this -
<p align="left" class="events_boldRed"><span class="style1">Charlie Harper Trunk Show</span></p>
to this -
<p align="left" class="events_boldRed" style="margin-top:0;"><span class="style1">Charlie Harper Trunk Show</span></p>
Does that solve the gap between the header and the main content?
While you're worrying about these gaps, read this -
http://www.apptools.com/rants/spans.php
I see trouble ahead....

Huge gap between icons in menu bar

Lately the menu bar will randomly throw in a huge gap between icons. Initially I thought it was a specific app, but now it's happening with all sorts of random icons there...definitely not the same icon each time.
The icons you see on the left are the ones I launched after the gap appeared.
Restarting my machine seems to be the only solution to removing the gap.
http://share.shpigford.com/images/menubargap-20090323-113604.png
Message was edited by: Josh Pigford

I've tried trashing the prefs for this and have the icons down to just the Apple ones. Then, as I slowly add other menu bar items, they'll start adding the gap directly next to the Apple items.
http://share.shpigford.com/images/menubar-20090507-074520.png
But the thing is, it doesn't matter which items are on the left. Different ones can be next to the gap and it still is there.
Restarting or logging out/in so far has been the only fix (albeit, temporary).

Creating a space between image and text

www.bristolequestrianservices.co.uk
On my index page I have created another social media buttons on my page on my right side. Don't want to confuse people but the #social-media-icons2 are on my right side as I wanted to change the margins.
I want a gap between my h2 tag "view gallery" and then the photo and a gap after the photo and follow us... Thanks Karen
css
#social-media-icons
{ float:right; }
#social-media-icons ul li
{display:inline; }
#social-media-icons ul
{margin-top:40px; }
#social-media-icons2
{ float:left; }
#social-media-icons2 ul li
{display:inline; }
#social-media-icons2 ul
{margin-top:10px; }
<div id="rightside">
                  <h2>Latest News</h2>
            <p><a href="newpictures.html">New Pictures Added</a></p>
            <p><a href="testimonials.html">New Testimonials</a></p>
            <h2>View Gallery</h2><br>
            <img src="images/photos/1a.jpg" /><br>
            <h2>Follow Us</h2><br>
       <div id="social-media-icons2">
                  <ul>
                      <li><a href="https://www.facebook.com/groups/150449201771804/"><img src="images/icons/facebook.jpg" /></a></li>
              <li><a href="£"><img src="images/icons/rss.jpg" /></a></li>
              <li><a href="http://www.twitter.com"><img src="images/icons/twitter.jpg" /></a></li>
              <li><img src="images/icons/youtube.jpg" /></li>
            </ul>
                    </div>

The H2 tag is absorbing a rule applied to many elements on line 10 of styles.css (margin:0;padding:0;).
Being the H2 tag is used in so many contexts you probably don't want to add a concrete padding rule for all H2's. You might want to add a generic utility class to it, e.g.:
h2.padBottom10 {
   padding-bottom: 10px; /* change to desired amount */
The "Follow Us" tag is a good example of this because it would have absorbed that bottom padding if you didn't use a class for it. It also should have a generic class applied to it so other H2's are not affected, same as above but a different utility class:
h2.padTop10 {
     padding-top: 10px;
As always with CSS there's a million ways to do it but on specialized items like this, if it only appears in one place or has a smaller purpose, applying a general utility class can be useful.
Then you'd just add the class to the H2, e.g. <h2 class="padBottom10">View Gallery</h2>, <h2 class="padTop10">Follow Us</h2>.

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

Charts: Gap between Vertical Axis and the chart area

Friends,
I have a really wierd issue and I am sure I am doing
something wrong.
I am trying to align 2 charts that are placed vertically. I
want to align the left vertical axis and the gridlines within them.
Aligning the left vertical axis is easy and done but aligning the
grids is becoming challenging and I have already spent a few hours
on this problem.
Here is a wrong chart image ...
Wrong
chart image
The line of the LineChart (in the top chart) is touching the
left and right edges where as the bottom chart bars do not touch
the left/right edges. Due to this the gridlines are not aligned.
I had managed to solve this problem but I am not sure what
part of the code solved the problem. Here is the right chart image:
Right
chart image
In this chart, the line of the linechart (in the top chart)
is not touching the left and right boundary hence the gridlines are
alignd with each other.
I wonder what property of the chart controls the series
touching the left/right vertical axis or boundary. Your help is
appreciated.
Thanks

here is some more information ...
I started changing some of the properties of the chart which
I mentioned is a RIGHT CHART and this is what I learnt ...
It was a CartesianChart hence it was creating the gap
between the left/right vertical axis and the actual chart area
(refer to the right chart image).
I changed it to a LineChart and it started behaving like the
chart in the WRONG CHART image.
Is there a solution to this problem?

Gap between Navigation area and top banner

I have a small gap between the navigation area and top banner
of my page design and I can't quite figure out what is causing
it... or how to fix it. Here is the page
Moonspinners
Tearoom. I know that this is probably a simple fix but I've
tried a few things and haven't hit on it yet. Thanks for any help
Maureen

Hello,
You are simply missing a closing </div> tag.
Change this:
<div id="banner">
<div align="center"><img
src="images/bannerw_logo.gif" alt="Moonspinners Tearoom"
width="750" height="140" />

</div>
To this:
<div id="banner">
<div align="center"><img
src="images/bannerw_logo.gif" alt="Moonspinners Tearoom"
width="750" height="140" /></div>

</div>
Notice the added </div> tag after "140" /> that was
missing.
-OR-
As you really don't even need the <div> around the
image (the wrapper is 750px and the image is 750px, so it's
centered already) you can:
Change this:
<div id="banner">
<div align="center"><img
src="images/bannerw_logo.gif" alt="Moonspinners Tearoom"
width="750" height="140" />

</div>
To this:
<div id="banner"><img src="images/bannerw_logo.gif"
alt="Moonspinners Tearoom" width="750" height="140" />

</div>
Take care,
Tim

Gaps between images

Similar Messages

Maybe you are looking for