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

Similar Messages

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.

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;

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.

Having issues with unwanted spaces between sentences

I update our website for work and I am trying to add some more information to one page. Everytime
I hit enter after an entry it adds a huge space between each sentence as linked below:
Lee County
Population 2000 - 115,092
Population 2010 - 140,247
1990-2000 Change - 21.9% increase
I do not want the space between the two Populations, but no matter what I do, it adds one there. Any advice? Thank you!

The enter key is treated as a paragraph break. So if you look at your code you will see:
<p>Lee County<br>
Population 2000 - 115,092</p>
<p>Population 2010 - 140,247<br>
1990-2000 Change - 21.9% increase</p>
If you want just a line break going down one line you will need to hit CMD/CTRL+Enter which enters the <br> break into your code so it ends up with:
<p>Lee County<br>
Population 2000 - 115,092<br>
Population 2010 - 140,247<br>
1990-2000 Change - 21.9% increase</p>
Or alternatively you can put the information into a 4-row 1-column table then every table cell will give you spacing.

Unwanted space between songs

Hello, I recently uploaded a cd to iTunes. The cd has many tracks all of which run together (ie side 2 of Abby Road or perhaps Dark Side of the Moon). When I play back the music on my iPod it puts in a space where the next "song" starts except that space really shouldn't be there. Is there a setting to take care of this problem?
Thanks
Nick

You know...I'm not sure. You might have to test it on a couple of tracks and see. I think part of it may even be directly related to how the album/CD itself is timed. I think the production of the album might leave more space between certain tracks...not sure.
By the way, if you have tracks that you always want to play together (like the little Dreamboat Annie interlude that MUST lead into Crazy on You....and Golden Slumbers-Carry That Weight-The End just aren't the same alone) you can join those tracks together. The only drawback is you have to do it when you're ripping the CDs into iTunes. Select the (consecutive) tracks before you import and go under Advanced to Join CD Tracks. (I've reimported a couple of things for this reason.) It will create one track of the selected songs.

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

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.

Unwanted space in table {subject edited by moderator}

When I create a table, and insert text inside it with the "Vert" setting in "default," I am getting a lot of space between the top of the table and the beginning of my text that appears on the web but does not appear in my Dreamweaver WYSIWIG editor on my PC. When I change the "Vert" setting to "top," I no longer see unwanted space between the top of the table and the beginning of my text, but I still get a lot of space between the bottom of my text and the bottom of my table when I look at my web page in an Internet browser. How do I fix this?

Hi
We usually need to see ALL your code to solve your issue quickly and accurately without a lot of guessing and questions back-and-forth.
Just rename a copy of your problem page (such as "test.html") and upload it to your server, in whatever folder the original page was located, and simply post a link in the Forum and tell us your problem.
This saves you having to cut and paste miles of code into the Forum for the page and all the dependent CSS, JS etc. files.and saves us from having to recreate all your files, find your images and then repair your code and test the solution for you.
May we trust that you are not using tables as a page layout Modern techniques only use tables for data.
Remove any heights in your table and text should only push down based on the content.
I trust this is helpful.

Unwanted Space in DIVs

Hi --
I have two problems with this page:
http://www.practice.thelegatogroup.com/test.html.
Hopefully, someone can
help me out.
First, in the DIVS #tagline and #navigation I have unwanted
space at the
bottom when viewed in IE6. I've been over things a number of
times but
can't isolate the problem.
Second, in the DIV #navigation I have unwanted space between
the "learn" and
"discover" buttons in IE6.
How do I get rid of the spacing at the bottom of those DIVS
and between
those two buttons?
Thanks,
John

Thanks to you both for your help. The page looks much better
now.
John
"Tarvardian" <[email protected]> wrote in
message
news:fc3vel$sdr$[email protected]..
> Hi --
>
> I have two problems with this page:
>
http://www.practice.thelegatogroup.com/test.html.
Hopefully, someone can
> help me out.
>
> First, in the DIVS #tagline and #navigation I have
unwanted space at the
> bottom when viewed in IE6. I've been over things a
number of times but
> can't isolate the problem.
>
> Second, in the DIV #navigation I have unwanted space
between the "learn"
> and "discover" buttons in IE6.
>
> How do I get rid of the spacing at the bottom of those
DIVS and between
> those two buttons?
>
> Thanks,
> John
>

Unwanted spaces between images

Similar Messages

Maybe you are looking for