Space between images

When placing images on a website, I get smal spaces between the images. They are only visible in Safari, not in Firefox. What am I doing wrong?
www.conceptualz.nl

I went looking, didn't see any images with space problems
But one thing you can do in your style sheet is the following:
img {
     border: 0;
     padding: 0;
     margin: 0;
That will remove any space between images.
If the images are links, then you would:
img a link {
     border: 0;
     padding: 0;
     margin: 0;

Similar Messages

How to adjust the space between images in a carousel or images with horizontal scroll

I use the next steps to create a carousel or horizontal scroll of images:
Webcenter portal: Spaces
Spaces
Manage Settings
Pages
Create page
Content management
Content presenter
Add images with Plus Icon
It works, but between every image has a lot of space, can you tell me how to reduce the space between every image.
My Oracle Version 11gR1 (11.1.1.3.0)
Regards
Tomas Reyes

Remove line 234 in your HTML code.
<p>& n b s p</p>
This is a redundant line of code. Your spacing should get resolved.
PS: I've given spaces between the tag because otherwise this forum would not display the line correctly.

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

Spaces between images on header - please help!

I’m having an issue with a layout that I can’t seem to figure out. Here’s the website where the layout looks fine: www.sincityknitshop.com All I did was add an additional navigation link (testimonials) and it started leaving a space between each image on the header ONLY when I added the rollover navigation buttons. It was fine if I just inserted the navigation buttons as an image and not a rollover. http://www.sincityknitshop.com/test2.htm If I just insert the “off” button as a regular image (no rollover) it looks fine: http://www.sincityknitshop.com/test3.htm In case it looks fine on your pc, here is a snippet image: http://www.sincityknitshop.com/images/mess.jpg Does anyone know why it’s doing this??? I’m not doing anything different than what I did on the original layout that is now on her website www.sincityknitshop.com that looks fine. What's weird is it looks fine on my ipad. Thanks!! Any help would be greatly appreciated.

Nancy O. wrote:
I think you would be so much better off using CSS styled text links for your rollover menus. Plus, you could get rid of that awful MM rollover code which clearly isn't working correctly when you mouse over test2.
I agree with that 100%. In my experience, I've twice been forced to use images in place of text for navigation menus, simply to keep the original design of the site intact. I made my own way around it, and it was "bulky" from a CSS standpoint, but it did have the advantage of the menu still looking like text to search engine crawlers.
First thing I did was apply a text-indent property of -10000px to my navigation menu list items (#navmenu ul li a{ text-indent:-10000px;}). This keeps the text links off the page when viewed in a browser. Next, I applied a different ID to each <li> in my nav menu list, and applied a normal state (#navmenu ul li a#home) and a hover state (#navmenu ul li a#home:hover) using the image link as a background image with an "on" and an "off" version of each image for each state. Then I built my navigation menu in a <ul> just as I normally would with the proper ID for each <a> list item. It reads just like a regular text menu in the HTML. If you have a lot of items in your menu it can get a little long in the CSS, but it works without "that awful MM rollover code" as Nancy so accurately puts it.

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.

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.

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

Have more space between images used as buttons

Hi again,
Would like to see if there's some html properties to have more space beetwen buttons based on image:
i've used: save.gif and del.gif instead of the standard template buttons.
Would be nice to have the 2 images not so near.
thanx a lot

Hi,
You could go to Edit Button Item and insert some HTML white spaces as Post Element Text. For example, if you have 2 buttons, do it at left button.
Roger

Unwanted spaces between images

while using adobe dreamweaver i created a page with a image
at the top, then one below it with rollover images, then one more
below that. and everything should fit together like its one image.
and it does so in internet explorer, but not firefox. it looks like
this :
http://i2.photobucket.com/albums/y13/Down_The_Rabbit_Hole/Untitled-1copy-5.jpg
can someone please tell me how to get rid of that unwanted
space?
the code is also below.

The problem is caused by the fact that images are inline
tags. This means
that they are rendered in an 'inline text box'. An inline
text box reserves
space for descenders below the baseline of the text, and
that's what is
causing the gaps you are seeing in FF - which is rendering
the images
properly (it's IE that is not).
Margins/padding won't affect this. You can, however make
those images have
the CSS style of display:block. That will remove that
'descender' space,
but it will apply to every image on the page, so you will
need to add an
appropriate selector to the rule so that you select only the
desired images.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"emmageeeee" <[email protected]> wrote in
message
news:[email protected]...
> while using adobe dreamweaver i created a page with a
image at the top,
> then
> one below it with rollover images, then one more below
that. and
> everything
> should fit together like its one image. and it does so
in internet
> explorer,
> but not firefox. it looks like this :
>
http://i2.photobucket.com/albums/y13/Down_The_Rabbit_Hole/Untitled-1copy-5.jpg
> .
>
>
> can someone please tell me how to get rid of that
unwanted space?
> the code is also below.
>
>
>
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "
http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>untitled</title>
> <meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
> <meta name="generator" content="HAPedit 3.1">
> <style type="text/css">
> html,body{margin:25;padding:0}
> body{
> background-color:#486CB3;
> background-image:url("bg.gif");
> font: 76% arial,sans-serif;
> text-align:left
> }
> p{margin:0 0px 0px}
> a{
> display:block;
> color: #FFFFFF;
> padding:0px
> }
>
> div#header h1{height:80px;line-height:80px;margin:0px;
> padding-left:10px;}
>
> div#container{text-align:left;}
>
> div#content p{line-height:1.4}
>
> div#navigation{font-family: verdana, arial, sanf-serif;
> font-size: 12px; margin: 0;
> padding: 0;
> list-style-type: none;}
>
> div#extra{background:#FF8539}
> div#footer p{margin:0;padding:5px 10px}
>
> div#container{width:700px;margin:0 auto}
> div#content{float:right;width:700px}
>
> div#extra{float:right;width:500px}
> div#footer{clear:both;width:100%}
> </style>
> <script type="text/javascript">
> 
> </script>
> </head>
> <body
>
onLoad="MM_preloadImages('homeh.gif','chicksh.gif','dudesh.gif','contacth.gif','
> infoh.gif','carth.gif')">
> <div id="container">
> <div id="header">
> <div align="left"><a href="#"
onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Image4','','homeh.gif',1)"><img
> src="header.jpg"
> width="700" height="70" border="0"
longdesc="header.jpg"></a><a href="#"
> onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Image4','','homeh.gif',1)"><img
src="home.gif"
> name="Image4" width="106" height="39" border="0"
align="left"></a><a
> href="#"
> onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Image5','','chicksh.gif',1)"><img
> src="chicks.gif"
> name="Image5" width="106" height="39" border="0"
align="left"></a><a
> href="#"
> onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Image6','','dudesh.gif',1)"><img
> src="dudes.gif"
> name="Image6" width="106" height="39" border="0"
align="left"></a><a
> href="#"
> onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Image7','','contacth.gif',1)"><img
> src="contact.gif"
> name="Image7" width="106" height="39" border="0"
align="left"></a><a
> href="#"
> onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Image8','','infoh.gif',1)"><img
src="info.gif"
> name="Image8" width="106" height="39" border="0"
align="left"></a><a
> href="#"
> onMouseOut="MM_swapImgRestore()"
>
onMouseOver="MM_swapImage('Image9','','carth.gif',1)"><img
src="cart.gif"
> name="Image9" width="170" height="39"
border="0"></a><img src="main.jpg"
> border="0" align="middle" usemap="#Map">
> <map name="Map"><area shape="rect"
coords="20,196,186,221" href="#"
> target="_self" alt="go now" usemap="#cool"
border="0">
> </map></div>
> <div id="footer">
> <CENTER>
> &copy your mom.
>
> </div>
> </div>
> </body>
> </html>
>

Spaces in between images ; textbox help

in my dreamweaver HTML page, after i insert say like, 5 images, they clump all together, and i'm unable to separate them (like how i'd be able to do them in microsoft powerpoint)
is there anyway that will enable me to freely shift around these images, so that they are not always joined together?
another questions, how can i insert a space for me to type what i want, without the annoying form box, where you fill in stuff in surveys. it'd be like inserting a text box in microsoft ppt, just allocating a space for you to put in your words
hope you guys know what i mean!
EDIT: i've realised that i can put in the H and V space. but how would i say, put in a paypal "buy now" button HTML code, under that space? is the space usable?

Building web pages in Dreamweaver is nothing like working with PowerPoint. This isn't a click and drag application. If you switch to Code View, you can insert non-breaking spaces ( ) between images like so:
<img src="some-image.jpg"> insert space, insert space, <img src="some-other-image.jpg">
To add captions to images, you will need a working knowlege of CSS and HTML code.
Start here:
HTML & CSS Tutorials - http://w3schools.com/
Creating your first web site in DW CS4 -
http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com
Message was edited by: Nancy O. Can't get Forum to accept code for non-breaking spaces.

How do I reduce the space between the images in the fotopage?

Hi
I have made a Photopage - and some of the Photos are croped and when I add them to the page there is a loot of space between the one above and underneath
look at this screen shot
http://skitch.com/baiaz/n8un4/iweb
or go to my photopage:
http://web.me.com/baiaz/Adino/Galleri/Sider/UKE1.html
Then you will see what I mean.
Is there a way to make them more even???? So the gap is not that big when I crop the photos?

The photogrid is square. Your pictures are rectangle. That's difficult to fit.
To change the settings of the photogrid, click on an image.
You can change the number of columns, the spacing between the images, the numbers of lines for the caption and the number of pictures on a page.
It's all there.

Space between DIV with image and DIV with image background

I have just about finalized the new design on my website. The only issue I am having now is on the gallery page. There is a thin space between a DIV with an image and DIV with an image background. I am using these DIV's to give the illusion of a blue border. If you look at any of the other main pages on the site the space is not there. Any ideas?
http://liquidfirefishing.com/index.php
http://liquidfirefishing.com/gallery/main.php
Here are a couple of screenshots to show exactly what I mean.

Hello,
both my "IE8" and my "FF 7.01" show the blue boundary lines. Here my screenshots, left side IE8, right side FF:
Header 1
Header 2
Hans-Günter

How do I get images to sit side by side without space between?

No matter what I try, my social media buttons are spacing themselves out more than I would like!
Here is my reference page http://www.gogographics.ca/hh
See top right and I have used a span class with 0 margin on them as a last try to stop them spreading.
I would like to get rid of the few pixels in between to snug them up - I have a background on my .gifs of a very small width but these are not butting up against each other.
If anyone can help, I would be very grateful!
Thanks!

If you remove the spaces in your HTML, they move closer together as expected. You can have them on different lines, but you seem to have added in a space between the <a></a> tags.
<span class="mediabuttons">
<a href="http://www.facebook.com/pages/Hearts-Hands-Foundation/153171264740088"><img src="images/facebook.gif" alt="hearts & hands on facebook" width="49" height="56" style="padding-bottom:30px; padding-left:25px; "/></a>
remove space
<a href="http://www.twitter.com/Heartsand_Hands">remove space
<img src="images/twitter.gif" width="47" height="57" alt="Hearts & Hands on Twitter" style="padding-bottom:30px; margin:0;" /></a>
remove space
<a href="http://canmorehearts.wordpress.com/"><img src="images/blogger.gif" alt="" width="46" height="57" style="padding-bottom:30px; margin:0;" /></a>
remove space
<img src="images/youtube.gif" alt="" width="46" height="58" style="padding-bottom:30px; margin:0;" />
remove space
<img src="images/flickr.gif" alt="" width="45" height="58" style="padding-bottom:30px; margin:0;" />
</span>

Space between navigation bar images?

I have 8 image in my navigation bar. When I had 7 (home, contacts, forums, etc) I had no space between them, but now that I have 8, a small space appeared between the images. How can I remove the space?
Here is the problem:
http://mjackson.freevar.com/home.html

Instead of using a <p> tag and using align=center to enclose the navigation bar, I would use a div, give it a width (total width all the buttons added together) and then use margin:0 auto; to center it on the page.
Without having access to the images it's difficult to bring the code into DW for testing, but make sure there is no 'whitespace' in the code between the button images.

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.

Space between images

Similar Messages

Maybe you are looking for