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>
[color=blue]
> 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.
>[/color]


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@mccourt.org.uk> wrote in message
news:40bc4000$0$27217$ed2619ec@ptn-nntp-[color=blue]
>
> 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.
>[/color]

"Applebrown" <applebrown@gamebanshee.takethis.andthisout.com> wrote:
[color=blue]
>Thanks for the response.[/color]

Not top posting would be the best way to thank the regulars. ;-)
[color=blue]
>I found out later by searching a CSS forum that IE has a default line-height
>of 16px.[/color]

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@pugh.net> <http://steve.pugh.net/>

"Steve Pugh" <steve@pugh.net> wrote in message
news:4dopb0184dtna33c2kcdcp8pu4l43ufn06@4ax.com...[color=blue]
> "Applebrown" <applebrown@gamebanshee.takethis.andthisout.com> wrote:
>[color=green]
> >Thanks for the response.[/color]
>
> Not top posting would be the best way to thank the regulars. ;-)[/color]

Deal.
[color=blue]
>[color=green]
> >I found out later by searching a CSS forum that IE has a default[/color][/color]
line-height[color=blue][color=green]
> >of 16px.[/color]
>
> 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@pugh.net> <http://steve.pugh.net/>[/color]

"Applebrown" <applebrown@gamebanshee.takethis.andthisout.com> wrote:
[color=blue][color=green]
>> Not top posting would be the best way to thank the regulars. ;-)[/color]
>
>Deal.[/color]

Trimming quotes is an essential part of bottom posting.

--
Spartanicus