Firefox leaves space with images

[defeated]

Hello
I have been creating some web sites using CSS lately and I think I almost have a grasp on it until I preview it in Firefox. The page looks the way I want it to in IE6 but Firefox always has spaces around images.

here are 2 web sites that I have the exact same issue with
any help would be great

http://www.nexicom.net/~melody10/lesley/events.html

the css for this site is here
http://www.nexicom.net/~melody10/lesley/mystyles.css


and

http://www.plexus2007.com/

the css is included in the source for this page


Thanks
Mark

[vishesh]

Have you tried putting padding, margin and all to 0.

[roryt]

When i look at your site in ff I can't see any problems, unless you want your text to be touching your images. I have attached as screen shot (poor quality but you get the point) of what your site looks like in the latest version of ff. But as vishesh said you could do something like

img   {padding:0;
          margin:0;
          border:0;}

BTW.. Has anyone else noticed that alot of churches have really decent websites?

Also on plexus2007 you need to decrease the width of the header circle images or take one away because they are too wide for the rest of your content.

[defeated]

Hey, Thanks a lot for the suggestions. I tried adding
img {padding:0;
margin:0;
border:0;
}
#container {
width : 780px;
height : auto;
margin-right : auto;
margin-left : auto;
padding:0;
margin:0;
border:0;
}
#cantainer img {
padding:0;
margin:0;
border:0;
}
but it still has the breaks.
all those white lines in the screen shot around the nav are not suppose to be there, as well there is a break in the tower. if you view it in IE those white lines are not there and the tower doesn't have a break in it. any other suggestion, I really appreciate the help.
Mark

[roryt]

You may want to set the height of all of your image containers. I am not sure whether it will fix it but its worth a try.

[defeated]

Hey, thanks, that took one of the spaces away but not all of them, I only had a chance to try it on the http://www.nexicom.net/~melody10/lesley/index.html so i'll see what it does with the other one...also, the site isn't centered in firefox...Thanks again for all your help

[roryt]

You may need to set all the margins and padding and borders of the main content as well. This may help.

[defeated]

I set every image to have
hspace="0" vspace="0" border="0" is that what I was suppose to do?
sorry, im still kind of new to some of this.
once again though, I can't thank you enough for the help

[roryt]

no every image should be like this

img { 
padding: 0;
margin: 0;
border: 0;
}

You then need to set each images height and width. You also need to set the border, margin of all of your content to 0 if you don't want any. You may want to check your html to make sure there is no formatting in it.

(if you like the help why not give my rep a tickle ;) )

[defeated]

I tried that, I completely cleaned up the css and html and validated it with no errors or warnings...and I still can't figure out why it's not centered as well.

I did change the background colours and the space just above the content if a sace between the nav and the content so it's showing the container. the spaces in the nav itself is the nav background (if that makes sense.

[roryt]

I think I have almost sorted it for you but I cannot get rid of one of the gaps. You need to use the following css (please make a backup of your old one first):

body {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size : 12px;
    color : #186565;
    background-color : #fff;
    background-image:url(images/bg.gif);
    letter-spacing:1px;    
    border:0;
    

} 
#nav img { 
padding: 0;
margin: 0;
border: 0;
}
body, td, th {
color : #000000;    
}
a:link {
    color: #000000;
}
a:visited {
    color: #000000;
}
a:hover {
    color: #A06047;
}
a:active {
    color: #000000;
}
#container {
width : 780px; 
height : 726px;
margin-right : auto; 
margin-left : auto;
} 
#banner {
width:780px;
height:130px;
background-color:#C1D4FF;    
padding: 0px;
border: 0px;
margin: 0px;
}
#nav {
width:780px; 
height: 78px;
border-width: 0px;
margin: 0px;
padding: 0px;
margin-bottom: 0px;
background-color:#C1D4FF;
line-height: 0px;
}
#content {
height:450px; 
width : 780px;
padding:0;
margin-top: 0px;

border-width: 0px;
background-repeat:no-repeat; 
background-color:#C1D4FF;
background-image:url(images/contentbg.gif);
} 
#content img {
float:right; 
padding: 0;
margin: 0;
border: 0;
}
#pics {
width:350px;
height:225px;
float:left;
padding:3px;
}
#pics img {
padding-right:5px;
padding-bottom:5px;
float:left; 
padding: 0;
margin: 0;
border: 0;
}
#footer {
height:30px; 
width : 780px;
padding:2px;
background-color:#C1D4FF;

} 
#footer img { 
padding: 0;
margin: 0;
border: 0;
}
.style1 {
    font-size: 18px;
    font-weight: bold;
}
h1 {
font-family:"Times New Roman", Times, serif;
font-weight:bold;
font-size:24px;
}
img {
padding: 0px;
margin: 0px;
border-width: 0px;

}

Hope that helps

[gcs584]

Hi,

I often have vertical spaces between two div's. Often what I end up using is:

line-height: 0;

I've taken a quick look at the code of the different sites mentioned, and it seems that the above css should fix it (if you apply it to the DIV).

Regards,

GCS584

[EDIT:] I don't have/use IE so, it's difficult for me to tell which spaces you're talking about :P

[defeated]

between roryt's code change and gcs584's suggestion both sites are displaying beautifully.. Thanks so much to all who helped, I only hope I can somehow return the favour in the future...
Take care
Mark

PS you are both going to get a rep nod right now

[roryt]

very glad we could help.