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.
Similar Messages
-
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.nlI 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; -
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. -
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 ReyesRemove 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. -
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 -
I have updated to the latest form of Mozilla Firefox, and the top of the screen is altered so that it occupies far more space than it used to do, leaving far less space for what I want to look at. Why are there spaces between bars? Why are the tabs deeper than they used to be or need to be? How can I eliminate the pointless top bar which merely duplicates the information in the tab bar? Is there any way of simply restoring the previous arrangement?
Okay, I accept that this is just how it is, and there is nothing to be done about it, because no-one except me thinks that the icons and toolbars should be organised to take up minimum space in order to allocate maximum space to the page.
The crowning irony of all this is that, having updated to the latest Mozilla Firefox and consequently having this arrangement at the top of the page which I don't like, the middle of the page now comes up with its old message, 'You are not on the latest version of Firefox. Upgrade now.'
Computers are very odd. :( -
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">
> <!--
> function MM_swapImgRestore() { //v3.0
> var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a
)&&x.oSrc;i++)
> x.src=x.oSrc;
> }
> function MM_preloadImages() { //v3.0
> var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new
Array();
> var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0;
> i<a.length;
> i++)
> if (a.indexOf("#")!=0){ d.MM_p[j]=new Image;
> d.MM_p[j++].src=a
> }
>
> function MM_findObj(n, d) { //v4.01
> var p,i,x; if(!d) d=document;
>
if((p=n.indexOf("?"))>0&&parent.frames.length) {
> d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);}
> if(!(x=d[n])&&d.all) x=d.all[n]; for
(i=0;!x&&i<d.forms.length;i++)
> x=d.forms[n];
>
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
> x=MM_findObj(n,d.layers
.document);
> if(!x && d.getElementById)
x=d.getElementById(n); return x;
> }
>
> function MM_swapImage() { //v3.0
> var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new
Array;
> for(i=0;i<(a.length-2);i+=3)
> if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x;
if(!x.oSrc)
> x.oSrc=x.src; x.src=a[i+2];}
> }
> //-->
> </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>
> © your mom.
>
> </div>
> </div>
> </body>
> </html>
> -
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. -
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 lotHi,
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 -
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>. -
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">
> <!--
> .style1 {font-family: Arial, Helvetica, sans-serif}
> .style2 {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 18px;
> }
>
> </style>
> </head>
> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"
marginwidth="0"
> marginheight="0">
> <!-- ImageReady Slices (ACCT.psd) -->
> <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>
> <!-- End ImageReady Slices -->
> </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. -
D3lphin / konqueror - too much free space between single files
Hi there,
I'm using Kdemod 3.5.9. The problem I experience is, that both d3lphin and konqueror create "gaps" between files. Its hard to explain, so I post a picture.
The picture shows my wallpaper collection - but the problem is not bound to images. It does also occur with dirs, videos, sound-files...
By changing the font and grid-size I was able to change the general free space between files, but the "extra space" between some files remains.
Any Idea?
Greetings, yodo
Last edited by yodo (2008-05-15 19:06:25)@funkyou At first thanks for your work because after recognizing that you have things as at example kdmtheme included i give kdemod a try and it works nice. Instead of your theme looks very cool i stay as before with qtcurve ... i hope this is not a problem for you. [If you want you can do a +1kdemod/-1kde in your survey ]
funkyou wrote:It works fine for me, but i belive that this has something to do with DPI settings in Xorg...
I have exact the same settings as you with the only exception that Sub-Pixel-Hinting is on but i have the same effect as yodo. I fear that if dpi (or/and fonts) could be a problem in this case than the content of "/etc/fonts/conf.avail" could be important too. But i don't realy think that this is the problem because the icons on the desktop don't have this problem.
My workaround is stepping to the Tree View (i hope this is the correct translation of "Mehrspaltige Ansicht") and i forgot it because i like this more and more.
@yodo Very nice wallpapers and thanks for animating me to search InterfaceLIFT. -
CSS wierds - spaces between div tags
Safari v4.0.4
I'm seeing spaces between div tags that are not appearing in FF3.x or IE7&8
I have inspected these tags and I can not locate where or what might be pushing the div's appart..
Example: http://dev7.esonicspider.net/facility_overview.html
Notice the black bar under "Prepare For Frequent Infection Control...." sub title in the header
The image is 800x209px and the div is defined as the same:
div#splashfacilityov { position:relative;
background:url('images/facility_header.jpg') 0 0 no-repeat;
width:800px;
height:209px;}
..the next div in the stack is:
div#submenubar { position:relative;
background:url('images/submenu_bkgr.jpg') 0 0 no-repeat;
width:800px;
height:24px;}
I have played around with both and can not see why that 20px bar is there between the two div's
Any hints as to what Safari needs here..??
Thanks John...Found that
@charset "UTF-8";
in the style sheet was the main problem.. -
Decrease the space between the columns.....
i have a tabular region, in that region i have 10 columns, the space between the columns have more space.
i would like to decrease the space between the columns.
how to do this?
Thanks and regards,
skud.help pls...
Maybe you are looking for
-
Adobe reader 10.1.2 could not open the file '/C/WINDOWS'
since adobe reader 10.1.2 urls don't work in pdf files to folders. C:\WINDOWS\xy.xls ok C:\WINDOWS not ok > adobe reader 10.1.2 could not open the file '/C/WINDOWS' C:\WINDOWS ok > with deactivated protected mode no problems with 9.5.0 or 10.1.1 wi
-
I use a gift card and I finished all the redeem steps and they said the email is sent already but I didn't recieve anything so can u resent it please
-
HT201441 i forget the id and all things and i need to open my phone as a new one
i forget the id and all things and i need to open my phone as a new one <Personal Information Edited by Host>
-
can anybold help me please?
-
What values are possible for a specific object/field
Hi everyone, I am trying to do the following Pull a list out of the system that would provide me with value's description for a specific authoirsation object / field I have tried SE16 > AGR_1251 > one of my roles I am getting the role, object, field,