White spaces under images...

Ok... I am still working on my site, have loaded the browsers
and am having a browser issue which I can't seem to figure out. I
have the page on a test site at
http://www.babybumps.net/testsite/index2.shtml
The problem is that in Safari and Mozilla there is a small
white line under each of my images that have a "editable region"
tag on them. I can't seem to figure out what I should be doing to
correct the issue. Any suggestions? The code is attached.
Also, does anyone see any other issues that I may not be
noticing? I want to make sure that the code on this page is really
tight and clean before I move on as it is the basis for the
majority of the site.
Thanks so much for all of your help. I have been struggling
to muddle through and learn CSS and SSI with a book and the
internet over the couple of months. I'm hoping that my questions
don't make me seem like to much of an amateur. ;)

> Any other suggestions?
Why don't you try and comment on the suggestions you have
already been
given? Is there something about them you don't understand?
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
==================
"ArtsyAndi" <[email protected]> wrote in
message
news:fvdanc$5gs$[email protected]..
>I will do some research on that.
>
> Any other suggestions? Any advice is appreciated. Is
what I am doing good?
> bad? totally the wrong way to go about it? on the right
track?
>
> Feelings will not be hurt as long as comments are
productive. :)
>

Similar Messages

White space under table on page how to get rid of it

I created a new page, inserted a table to fill the page and
put in a background color. When I look at the page in Dreamweaver,
there is no white space under the table at the bottom of the page.
When I preview the page in a browser, the table ends about an inch
from the bottom of the page and I have about an inch of white space
under the table. Does anyone have an idea why this is happening?
Thanks for any help you can give. I'm going crazy trying to
get rid of it.
Diane

Fix up the errors with your html firstly - then see where you
are at with
the page....
The first thing to do would be to get rid of the table
heights - it's
invalid and won't render cross browser anyway. Error:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhome.comcast.net%2F~moordian%2F
PS: Are you working on a PC or a Mac?
Nadia
Adobe® Community Expert : Dreamweaver
http://www.DreamweaverResources.com
|Tutorials|SEO |CSS Templates
http://www.csstemplates.com.au
http://www.adobe.com/devnet/dreamweaver/css.html
CSS Tutorials for Dreamweaver
"diane7" <[email protected]> wrote in
message
news:efa1h5$o12$[email protected]..
> When I am working on the page in Dreamweaver, I can't
add content any
> lower
> than the gold bar at the bottom. In fact, none of the
white under the
> gold bar
> shows up in Dreamweaver, when I'm working on the page.
It only shows up
> when I
> preview it or publish it. That's why I'm so baffled. The
gold bar should
> be
> the bottom of my index page but that white shows up in
the published
> version
> underneath it. My page properties are set to 0 margins
on all four sides
> of
> the page and the table is set to 0 padding and 0 cell
spacing, so I don't
> think
> that's it.
> Diane
>

How do i crop "out" a piece of image=ex: how it will look when its cut for a window. Crop a white space in image?

How do i crop "out" a piece of image=ex: how it will look when its cut for a window. Crop a white space in image?

I think this will help if you are using version 11 or 12.
Make a selection with a selection tool of the area you want to remove.
Example: rectangular marquee tool - make a rectangle.
Use Select>Refine Edge:
Use the View section of this dialog box to see a few views.
If you need to refine the edge of the selection (smooth, feather, shift, etc.) you can do that in this dialog box.
You may want to check the box about remembering your settings in case you need to come back to them.
In the Output section, you can pick New Layer with Layer Mask and click OK.
You should see the hole in your image.
Kathy Keith
@kathleenmadeline on Instagram
(I teach Photoshop Elements classes)

Clear white space under layer divs

Is there a way to clear the white space under layer divs? See below. There are three layers, and then another div tag below that that has "Text". The red area is pointing to the white space I need to get rid of.
Here is the code:
<html>
<head>
<style type="text/css">
div.layer1 {
background-color:lime;
width:150px;
height:150px;
position:relative;
top:10px;
left:80px;
z-index:2
div.layer2 {
background-color:yellow;
width:100px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1
div.layer3 {
background-color:orange;
width:120px;
height:120px;
position:relative;
top:-180px;
left:175px;
z-index:3
</style>
</head>
<body>
<div class="layer1">
Layer One<br>
Layer One<br>
Layer One<br>
Layer One<br>
Layer One<br>
</div>
<div class="layer2">
Layer Two<br>
Layer Two<br>
Layer Two<br>
Layer Two<br>
Layer Two<br>
</div>
<div class="layer3">
Layer Three<br>
Layer Three<br>
Layer Three<br>
Layer Three<br>
Layer Three<br>
</div>
<div> Text </div>
</body>
</html>

There is really no such thing as a "layer div". Old versions of Dreamweaver used the name "layer" to mean an absolutely positioned div.
What you have done is to create relatively positioned divs. A relatively positioned element is moved from its normal place in the flow of the document without affecting other elements.
Your three divs have a combined height of 370px. As a result, your text is placed that far down the page.
If you wanted to move it up, you would need to give the Text div an ID and a negative top margin of -170px.
#textdiv {
margin-top: -170px;

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

White Line Under Images

Hello,
I'm creating a mobile site using Dreamweaver and for some reason any image I place in my document has a white line under it. I already have my IMG tag set to border: 0 so I have no idea why it's happening. I have even tried removing all css and just placing a singe image in a bare html file and it still happens with any image I place in any directory. I also tested it in multiple browsers. I've never had this happen before and it seems very strange.
An example can be seen here: http://mobile.sageinsuranceservicing.com/index2.html. The border appears under the main image on the page and seems to be about 2 or 3 pixels.
Thank you for any suggestions!

That's probably the browser default inline text descender padding for the html5 doctype.
Add display:block to your image css...
img {
display:block;
border:0;

White space around image when doing Save for Web

Say I draw a simple square in Illustrator CS6 then export it to a PNG using Save for Web. The preview shows 1px thick of white space on the right side. Sometimes it's on 2 sides or more.
No other hidden elements are around the image. Clip to artboard in not clicked.
Why does this happen and how do we get rid of it?

For once I get to answer a post and say somehting good about align to pixel grid.
Turn it on
Your image will now align to the pixel grid
Turn it off when not doing web work, or will drive you mad.

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.

Usemap error - extra white space after image -solved: area shape must be inline

When using image hotspots, if the <area shape= "rect" is not IMMEDIATELY after the <map name="Map">, then FF adds a white space (white horizontal line) after the image.
White space shows between shop_top.jpg and shop_mid.jpg:
<pre><nowiki><img src="images/shop_top.jpg" width="1022" height="259" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="251,147,435,252" href="http://www.example.html">
<img src="images/shop_mid.jpg" width="1022" height="3250"></nowiki></pre>
Images are touching vertically (no space in between):
<pre><nowiki><img src="images/shop_top.jpg" width="1022" height="259" border="0" usemap="#Map"><map name="Map"><area shape="rect" coords="251,147,435,252" href="http://www.example.html">
<img src="images/shop_mid.jpg" width="1022" height="3250"></nowiki></pre>

Maybe Mozillazine's Web Devel / Standards Evangelism forums may help better.
* http://forums.mozillazine.org/viewforum.php?f=25

Space under images?

I get this space unter some of my images or in the divs the
images are in.
The pages is here and there is too much space under the logo
and under the large image on the right.
http://www.agilitygraphics.com/clients/somerset
The css for those looks like this:
.logoCell {
width: 760px;
margin: 0 10px;
background: #fff url(../images/general/frame_top.jpg)
repeat-x 100% 0%;
.logoCell img {
vertical-align: bottom;
#logo {
margin:16px 0 15px 16px;
The html looks like this:

<div class="logoCell">
<img src="images/general/logo.gif" alt="The Somerset
Group" id="logo">
</div>
It displays fine in DW, but has the space once viewed in the
browser.
What is wrong here?
Thanks a lot!

You should be able to resize it in just about any photo/image editing software such as Photoshop, Preview, iPhoto and many others.
-DH

Image problems - inline, but white space in image next to text

I've converted all of my images to be inline with the text in an attempt to correct alignment issues in various browsers. However, now every image is displaying as two pieces with white space adjacent to the text. What's going on? How do I fix it?
http://mikegatto4assembly.com/Site/Endorsements.html

Lucky for me I haven't an Apple Sore nearby, so I have to find solutions myself.
The endorsement list is one long image.
Solve it by creating separate textboxes with a photo with text left-wrapped enabled.
Inside the textbox, add a second textbox with the name of the person and make the text vertically centered.
Make the textboxes page wide and neatly place them one below the other.
The image shows the outline (Cmd-Shift-L) of the textboxes.
Typos are my mistake.
!http://www.wyodor.net/_Discussions/Congressman.png!
Message was edited by: Wyodor

White space under page

I created a website with all the page property sizes equal in all pages. My maximun height is of 300px but I have also tried 500px on all pages.
Website looks great on design mode but when I preview it within Muse or export as html my homepage (page itself not the background) has a long white space I cannot reduced to the content of the page.
Same thing is happening to 2 different sites I'm building and I have spent over 8 hours looking at forums and trying to debug the problem unsuccessfuly.
Can somebody provide some support. I'm supposed to deliver this 2 sites by in 4 more days.
Thank you so much,
Gloria Segura de Otth
949-689-0848
[email protected]

I have the same problem, and it drives me crazy. Muse adds extra trapped white space to certain pages in my site, but not all of them. How about letting us lock the page size so Muse can't add to it?
Here's a sample.
Go to kinetta.com, click to enter, and click on the Range tab at the bottom. That page is longer than all the others.
I just downloaded Muse 5.0 (Mac) and while the new complex contact form is useful, the second you add to it, and move elements around to make it two columns wide, you can not get rid of the trapped white space where moved elements used to be. There is a dotted blue line around the area, but it lacks typical resizing squares that other elements have. However, it determines the size of the window and can not be changed.
Finally, in the new complex forms, can we have check-boxes or buttons so the user can select certain things and those are reflected into the form that is emailed?
Thanks.
[email protected]

Extra white space around image in CS4

Hi - We are planning to migrate from Indesign server CS3 to CS4. In order to make sure that the existing templates, created out of CS3 works out of CS4, we were doing some testing with indds created out of CS3. We export the output as jpeg at 300 dpi. The output image running in CS3 server was 3060 x 2160, but the image from CS4 has 3600 x 2700. Can anyone explain us here, if there is some setting that needs to be changed to use indd's out of CS3? if not, pls advice us on what is going wrong here. This is urgent!!
Thanks and let me know if you have any questions or need more information.

Does this outline appear if converting to PDF or other format and then printing? What if you save it as a Photoshop EPS and let Photoshop create the TIFF... does the map still print with a white line?
If the problem is map related, you might ask in the CartoTalk forum:
http://www.cartotalk.com/index.php?s=e3bd05acac124d5abe83020daf94b05f&act=idx
There are some FreeHand map makers there who could help.

White space in image when copying from Indesign to Photoshop

Hopefully this is in the correct place for this question.
Am using Indesign CS4 (windows, XP) and have created a bounding box to place image and text into for layout. Then I select it all and copy to Photoshop for exporting for the web. I would do the lot in Photoshop but Indesign's better for layout. Anyway, I have the correct size image and all but when I copy to Photoshop I get a 1 pixel white line at the top.
The bounding box in Indesign has no stroke or fill so I can't see where this 1 pixel white line is coming from. Tis very annoying. Anyone got any ideas as to why?

Thanks for your answer but I'm trying to make this as simple as possible for others who may have to do this task. I ended up putting a 1 pixel line around the outside of the image. It covers up the white line at the top and it fits in with the webpage design too.

Spaces under images

Hi, I have a column of two rotator and two images down the right side of the page (in the link below), the first rotator is just where I want it to be but as I go down the gaps get to wide, but I only want about 10px between them, I've tried doing -10px and -20px but this don't seem to make any difference, can some one help me please. Thanks Jeff
http://www.http://thecarpetandflooringconsultant.co.uk/residential-domestic_carpet_and_flo oring.php

Not sure where images are getting their top margins from but increasing their negative top margins seems to work
#rotator-two {
    float: right;
    height: auto;
    margin-right: 7px;
    margin-top: -80px;
    width: 370px;
#third_level_image {
    float: right;
    height: auto;
    margin-right: 60px;
    margin-top: -140px;
    width: 210px;

White spaces under images...

Similar Messages

Maybe you are looking for