Firefox adding padding ?

[Adam]

Hi all, im trying to recreate my portfolio and make it validate as XHTML without any layout problems...

 

At the minute I have a problem in FF where its adding padding to my div which contains an img. In the images attached you can see the difference between FF and IE, and Iv added a blue border to make it obvious. Iv tried adding margin:0px and padding:0px to the div container.. even to the image itself.. except it still just wont get rid of this extra padding in FF, and I don't know why its there..

 

- Can anyone help?

 

Cheers, Adam

 

[attachment deleted by admin]

[AndyB]

In order to help solve a coding problem, seeing code is a prerequisite.

[Adam]

code isnt that great.. been messing with for hours...

 

	<div id="wrapper">
	<div id="header"><img src="imgs/adams-work.gif" alt="Adam's Work" /></div>
	<div id="tborder"><img src="img/top-border.gif" alt="" width="774" height="10" /></div>
	<div id="main">
		<div id="lborder"><img src="img/left-border.gif" alt="" width="9" height="287" /></div>
		<div id="content">

		</div>
		<div id="rborder"><img src="img/right-border.gif" alt="" width="10" height="287" /></div>
	</div>
	<div id="bborder"><img src="img/bottom-border.gif" alt="" width="774" height="10" /></div>
	<div id="footer"><img src="imgs/designed-by.gif" alt="Designed by Adam Boxall" /></div>
</div>

 

 

CSS

#wrapper{
width:774px;
height:auto;
margin:20px auto;
text-align:left;}

#main{
clear:both;}

#lborder{
width:9px;
float:left;
background:url('img/left-border-bg.gif') repeat-y;}

#rborder{
width:10px;
float:left;
background:url('img/right-border-bg.gif') repeat-y;}

#content{
width:755px;
float:left;
background:#FFFFFF;}

td.main{
width:755px;
background:#FFFFFF;}

 

- cheers

[sinus]

what you could do is specify the dimensions  of the div in css and set the images

you are using as backgound images to the div. This should you remove the extra padding.

 

So you would end up using something like this

 

#name{
width:200px;
height: 10px;
background-image:url('bg.gif');
}

 

By specifying the dimension of the div so that they are the same as the images you will get no padding

from the images if viewed in IE or FF.

What this does mean is that you will have a div with no content in it.

 

You seem to have alot of code which could be removed by integrating the divs you are using as borders at the top and bottom into the header, footer div and the left and right border divs into the content div.

 

So the only code you would have is (plus some css to make it all work):

wrapper div

header div

content div

footer div

 

 

Put without seeing a full example of you layout I cannot suggest anything else.