CSS - unwanted bottom margins!

Hi Folks,
I'm making a page as much with CSS and as little with tables as possible.
It's going okay except that:

I'm getting horizontal blank spaces between DIVS - as if they're paragraphs
or headings or something. I took a screenshot and there is an extra
gap-everything is pushed down about 3 pixels. This only happens in IE not
Netscape 7. The images are the right size, not pushing anything down. Here's
some CSS code, can anybody advise me?

div#masthead {
background: url(../images/top/bkg_chrome.gif) repeat-x left top;
height: 50px;
margin: 0px 10% 0px 10%; padding: 0;

}
#logo_top {
float: left;
margin: 0; padding: 0;
vertical-align: top;
}
#utilities {
float: right;
margin: 0; padding: 0; padding-top: 10px;
vertical-align: top;
}

***HORIZONTAL WHITE SPACE HERE.***

div#prim_nav {
background: url("../images/top/bkg_chrome_2.gif") repeat-x left top;
height: 24px;
margin: 0px 10% 0px 10%; padding: 0;
vertical-align: top;
}

Also, I just removed the images and the gaps disappeared. Despite the fact
that the images are the same height as the DIV that contains them. I don't
understand the problem that IE is having. Here's a sample of HTML:

<div id="masthead">
<span id="logo_top">
<img src="images/top/up2date_logo_top.gif" alt="up2date logo" width="190"
height="50" />
</span>
<span id="utilities">
<a href="javascript:;"
onmouseover="MM_swapImage('but_logout','','images/top/but_util_logout_on.gif',1)"
onmouseout="MM_swapImgRestore()"><img src="images/top/but_util_logout.gif"
alt="log-out button" name="but_logout" width="79" height="21" border="0"
id="but_logout" /></a><a href="javascript:;"
onmouseover="MM_swapImage('but_help','','images/top/but_util_help_on.gif',1)"
onmouseout="MM_swapImgRestore()"><img src="images/top/but_util_help.gif"
alt="help button" name="but_help" width="47" height="21" border="0"
id="but_help" /></a>
</span>
</div>
<div id="prim_nav">
<a href="javascript:;"
onmouseover="MM_swapImage('but_index','','images/top/but_index_on.gif',1)"
onmouseout="MM_swapImgRestore()"><img src="images/top/but_index_off.gif"
alt="index page button" name="but_index" width="76" height="24" border="0"
id="but_index" /></a><a href="javascript:;"
onmouseover="MM_swapImage('but_admin','','images/top/but_admin_on.gif',1)"
onmouseout="MM_swapImgRestore()"><img src="images/top/but_admin_off.gif"
alt="admin area button" name="but_admin" width="109" height="24" border="0"
id="but_admin" /></a><a href="javascript:;"
onmouseover="MM_swapImage('but_user','','images/top/but_user_on.gif',1)"
onmouseout="MM_swapImgRestore()"><img src="images/top/but_user_off.gif"
alt="user profile area button" name="but_user" width="135" height="24"
border="0" id="but_user" /></a>
</div>

Its not really enough to go on. Can you post the page somewhere or
include the code here.

Normally you would need to give a floated <div> a width. Plus the
element which follows the last floated <div> would need to be given the
attribute, clear: both;

div#masthead {
background: url(../images/top/bkg_chrome.gif) repeat-x left top;
height: 50px;
margin: 0px 10% 0px 10%; padding: 0;

}
#logo_top {
float: left;
margin: 0; padding: 0;
vertical-align: top;
}
#utilities {
float: right;
margin: 0; padding: 0; padding-top: 10px;
vertical-align: top;
}

***HORIZONTAL WHITE SPACE HERE.***

div#prim_nav {
background: url("../images/top/bkg_chrome_2.gif") repeat-x left top;
height: 24px;
margin: 0px 10% 0px 10%; padding: 0;
vertical-align: top;
}

Hi Osgood,
I've uploaeded it to here:
http://www.johniwhite.com/tests/page_1_lesstables.html

Thanks for your assistance on this - I'm stumped!
John


"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

Its not really enough to go on. Can you post the page somewhere or include
the code here.

Normally you would need to give a floated <div> a width. Plus the element
which follows the last floated <div> would need to be given the attribute,
clear: both;




div#masthead {
background: url(../images/top/bkg_chrome.gif) repeat-x left top;
height: 50px;
margin: 0px 10% 0px 10%; padding: 0;

}
#logo_top {
float: left;
margin: 0; padding: 0;
vertical-align: top;
}
#utilities {
float: right;
margin: 0; padding: 0; padding-top: 10px;
vertical-align: top;
}

***HORIZONTAL WHITE SPACE HERE.***

div#prim_nav {
background: url("../images/top/bkg_chrome_2.gif") repeat-x left top;
height: 24px;
margin: 0px 10% 0px 10%; padding: 0;
vertical-align: top;
}

Sorry, didnt see the code. I had a similar problem a day back. I found
that if I put the image in a consecutive line, ie running on the same
line, PC IE6 played ball.



Osgood wrote:

Its not really enough to go on. Can you post the page somewhere or
include the code here.

Normally you would need to give a floated <div> a width. Plus the
element which follows the last floated <div> would need to be given the
attribute, clear: both;

Hi Osgood,
I tried that - no luck I'm afraid. I've re-uploaded it for you to see it.

Do you think my approach to CSS-ing the layout might be completely wrong
anyway? DIVS within DIVS? At present I don't know of any other way without
using tables.
John


"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

Sorry, didnt see the code. I had a similar problem a day back. I found
that if I put the image in a consecutive line, ie running on the same
line, PC IE6 played ball.



Osgood wrote:

Its not really enough to go on. Can you post the page somewhere or
include the code here.

Normally you would need to give a floated <div> a width. Plus the element
which follows the last floated <div> would need to be given the
attribute, clear: both;

johnnyivan wrote:

Hi Osgood,
I tried that - no luck I'm afraid. I've re-uploaded it for you to see it.

Do you think my approach to CSS-ing the layout might be completely wrong
anyway? DIVS within DIVS? At present I don't know of any other way without
using tables.

No its not wrong it's PC IE that's the problem. I've had a nightmare
over the past couple of days getting stuff to work in version 6. Works
in every other browser under the sun but that pile of trash

Im pretty sure your problem has something to do with the images not
being in a line.

I basically stripped the page of all the css apart from the <div> in
question, even removed the <a> tag from around the images.

Then when I placed all the images in a row the gap diappeared. When I
put the images on seperate lines the gap reappeared.

So its either got to be that or something in the other css I stripped
out, or even the <a> tags.

Im working on it.

Blimey, thanks Osgood - best of luck! I'll look forward to hearing back from
you
John

johnnyivan wrote:

Blimey, thanks Osgood - best of luck! I'll look forward to hearing back from
you
John


My investigations are exhausted. I can find nothing which might be

causing this issue. The only other thing I can think of is it could
possibbly be to do with the doc type.

Oh well, thanks for trying Osgood. I really appreciate your time and effort.
Maybe someone else will come up with something?
John


"Osgood" <notavailable (AT) atthisaddress (DOT) com> wrote

johnnyivan wrote:

Blimey, thanks Osgood - best of luck! I'll look forward to hearing back
from you
John
My investigations are exhausted. I can find nothing which might be causing
this issue. The only other thing I can think of is it could possibbly be
to do with the doc type.