some layout problems in firefox and IE

[ottawamom]

Hi there,

simply.amandadevries.com/index.html

The page validates fine. Yes I know I'm using a table where I
shouldn't but I can't otherwise figure out how to get my little image
for the list items in the div headlines to line up with the
corresponding questions, and with a little space between. If you feel
like answering this, great! Otherwise, read on for the reason for my
post:

1. I want the 'nav' bar to go across the whole page, and for the nav
items to be centred. In Firefox it's floating somewhere in the middle,
but not quite, and not going 100% across. In IE, it's going all the
way across, but the text isn't centred.

I am using a friend's code to get the drop-down menus without
Javascript. So I didn't generate the nav CSS myself, although I've
tuned it for colours, widths, etc...

2. Now please click on "Services->Courses and Services". How do I get
my left col to be the exact same height as whatever my right col turns
out to be? On every page, the left column will have less content, but
I want it to have the same height anyway. I can't seem to get it to be
100% of the height of the container div which it's sitting in - why
not?

Thanks in advance!
Amanda

[Ben C]

On 2007-06-13, ottawamom <am*******@gmail.comwrote:

Hi there,

simply.amandadevries.com/index.html

The page validates fine. Yes I know I'm using a table where I
shouldn't but I can't otherwise figure out how to get my little image
for the list items in the div headlines to line up with the
corresponding questions, and with a little space between. If you feel
like answering this, great! Otherwise, read on for the reason for my
post:

1. I want the 'nav' bar to go across the whole page, and for the nav
items to be centred. In Firefox it's floating somewhere in the middle,
but not quite, and not going 100% across. In IE, it's going all the
way across, but the text isn't centred.

You're setting width: 100% and auto left and right margins on #nav. But
this can't work: if the width is 100% there aren't going to be any left
and right margins.

The menu items (HOME, SERVICES, etc) are themselves floats so they
always float to one side or another. They won't ever be centered in
their container.

So one solution is to provide a container to shrink-wrap the menu items
and then to centre that container. The only suitable containers with
shrink-to-fit behaviour are given by display: inline-block or display:
table, neither of which work in IE (and the former doesn't work in FF
either).

The alternative is to make the menu items display: inline and to set
text-align: center on their (full-width) container. This means making
everything inside them display: inline too (you've got display: block
set on anchor for example) rather than floating everything.

If you do make everything inline you won't be able to set widths on
things any more so each li will just have to be as wide as its contents.
But that might be OK since they don't have any borders or anything but
just sit on that blue background.

I am using a friend's code to get the drop-down menus without
Javascript. So I didn't generate the nav CSS myself, although I've
tuned it for colours, widths, etc...

I'd be tempted just to get used to the idea of it all being
left-aligned rather than centered.

2. Now please click on "Services->Courses and Services". How do I get
my left col to be the exact same height as whatever my right col turns
out to be? On every page, the left column will have less content, but
I want it to have the same height anyway. I can't seem to get it to be
100% of the height of the container div which it's sitting in - why
not?

There are some devious tricks out there to do this (called things like
"the holy grail") but they're too clever if you ask me and not necessary
in this case. The .container's height is given by the height of the
right col, so make .container position: relative (so it becomes the
containing block for .leftcol) and add to .leftcol:

position: absolute; top: 0; bottom: 0;

and remove from it the float and clear properties. Might as well get rid
of display:block too, since it's implied by position:absolute (or
float).

The reason height:100% doesn't work on the float is because its
container's height is auto. You can't do percentage heights of auto
height containers generally speaking since that's a bit of a circular
requirement.

[ottawamom]

Ben,

Thanks, your comments are always helpful without being condescending!
Much appreciated.

Amanda
On Jun 13, 5:26 pm, Ben C <[e-mail]:

On 2007-06-13, ottawamom <[e-mail]:

Hi there,

simply.amandadevries.com/index.html

The page validates fine. Yes I know I'm using a table where I
shouldn't but I can't otherwise figure out how to get my little image
for the list items in the div headlines to line up with the
corresponding questions, and with a little space between. If you feel
like answering this, great! Otherwise, read on for the reason for my
post:

1. I want the 'nav' bar to go across the whole page, and for the nav
items to be centred. In Firefox it's floating somewhere in the middle,
but not quite, and not going 100% across. In IE, it's going all the
way across, but the text isn't centred.

You're setting width: 100% and auto left and right margins on #nav. But
this can't work: if the width is 100% there aren't going to be any left
and right margins.

The menu items (HOME, SERVICES, etc) are themselves floats so they
always float to one side or another. They won't ever be centered in
their container.

So one solution is to provide a container to shrink-wrap the menu items
and then to centre that container. The only suitable containers with
shrink-to-fit behaviour are given by display: inline-block or display:
table, neither of which work in IE (and the former doesn't work in FF
either).

The alternative is to make the menu items display: inline and to set
text-align: center on their (full-width) container. This means making
everything inside them display: inline too (you've got display: block
set on anchor for example) rather than floating everything.

If you do make everything inline you won't be able to set widths on
things any more so each li will just have to be as wide as its contents.
But that might be OK since they don't have any borders or anything but
just sit on that blue background.

I am using a friend's code to get the drop-down menus without
Javascript. So I didn't generate the nav CSS myself, although I've
tuned it for colours, widths, etc...

I'd be tempted just to get used to the idea of it all being
left-aligned rather than centered.

2. Now please click on "Services->Courses and Services". How do I get
my left col to be the exact same height as whatever my right col turns
out to be? On every page, the left column will have less content, but
I want it to have the same height anyway. I can't seem to get it to be
100% of the height of the container div which it's sitting in - why
not?

There are some devious tricks out there to do this (called things like
"the holy grail") but they're too clever if you ask me and not necessary
in this case. The .container's height is given by the height of the
right col, so make .container position: relative (so it becomes the
containing block for .leftcol) and add to .leftcol:

position: absolute; top: 0; bottom: 0;

and remove from it the float and clear properties. Might as well get rid
of display:block too, since it's implied by position:absolute (or
float).

The reason height:100% doesn't work on the float is because its
container's height is auto. You can't do percentage heights of auto
height containers generally speaking since that's a bit of a circular
requirement.