Vertical white space in between images where I don't want it

Hello, basically, I'm just learning intermediate CSS and trying to convert
my old table webpage completely to CSS. Hoorah, right? Well, it's not quite
going as planned. It's an extremely simple layout, and I'm finding myself
stuck with small white space in between my images where I planned for the
graphics to be stacked up right on top of one another.

Here's the simple vertical layout: width is 640px, centered with a CSS
border. I'd basically like absolutely no space in between all these
elements.

[logo image (about 300px), centered]
[navbar top image, centered, 7px high] - a horizontal navbar
[navbar link images, 3 of 'em with 2 separator images between, all centered,
45px high]
[navbar bottom bar image, centered, 7px high, identical to top image]
[content, right under that with no space]
[footer]

My main problem is that there's a few seemingly random px worth of white
space in between my navbar lines, each in their own <div>. Even when I
specify a margin: 0; padding: 0; for my images or the <div>, there's still
that space and they are not stacking vertically without the space.

What is a simple way to stack these images on top of one another without
absolute positioning? I'm just learning about absolute and relative
positioning btw.

Thanks

Applebrown wrote in
<YRQuc.636673$Ig.371568@pd7tw2no>

Hello, basically, I'm just learning intermediate CSS and trying to
convert my old table webpage completely to CSS. Hoorah, right? Well,
it's not quite going as planned. It's an extremely simple layout, and
I'm finding myself stuck with small white space in between my images
where I planned for the graphics to be stacked up right on top of one
another.

Here's the simple vertical layout: width is 640px, centered with a CSS
border. I'd basically like absolutely no space in between all these
elements.

[logo image (about 300px), centered]
[navbar top image, centered, 7px high] - a horizontal navbar
[navbar link images, 3 of 'em with 2 separator images between, all
centered, 45px high]
[navbar bottom bar image, centered, 7px high, identical to top image]
[content, right under that with no space]
[footer]

My main problem is that there's a few seemingly random px worth of
white space in between my navbar lines, each in their own <div>. Even
when I specify a margin: 0; padding: 0; for my images or the <div>,
there's still that space and they are not stacking vertically without
the space.

What is a simple way to stack these images on top of one another
without absolute positioning? I'm just learning about absolute and
relative positioning btw.

It's easier with a URL but have you tried removing any line breaks between
images? The break is interpreted as a space by the browser.

<img...><img...> - no white space

<img...>
<img...> - produces a line of white space between the images.


--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

Thanks for the response.

I found out later by searching a CSS forum that IE has a default line-height
of 16px. Therefore, each of my 7px high navbars had 9px extra of white
space. When I added:

line-height: 1px;
font-size: 1px;

to the navbar rules, they all matched up perfectly. That's something that I
probably wouldn't have guessed easily...


"PeterMcC" <peter (AT) mccourt (DOT) org.uk> wrote

It's easier with a URL but have you tried removing any line breaks between
images? The break is interpreted as a space by the browser.

img...><img...> - no white space

img...
img...> - produces a line of white space between the images.


--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

"Applebrown" <applebrown (AT) gamebanshee (DOT) takethis.andthisout.com> wrote:

Thanks for the response.

Not top posting would be the best way to thank the regulars. ;-)

I found out later by searching a CSS forum that IE has a default line-height
of 16px.

No it doesn't. IE has a factory default font-size of 16px, the
line-height will be somewhat larger than that (about 18 or 19px).

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

"Steve Pugh" <steve (AT) pugh (DOT) net> wrote

"Applebrown" <applebrown (AT) gamebanshee (DOT) takethis.andthisout.com> wrote:

Thanks for the response.

Not top posting would be the best way to thank the regulars. ;-)

Deal.

I found out later by searching a CSS forum that IE has a default
line-height
of 16px.

No it doesn't. IE has a factory default font-size of 16px, the
line-height will be somewhat larger than that (about 18 or 19px).
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/

"Applebrown" <applebrown (AT) gamebanshee (DOT) takethis.andthisout.com> wrote:

Not top posting would be the best way to thank the regulars. ;-)

Deal.

Trimming quotes is an essential part of bottom posting.

--
Spartanicus