Hi

See my mock-up at http://tinyurl.com/35tv29. The three icons are
supposed to be vertically aligned on their bottoms (using "vertical-
align: bottom"), but they aren't, they're vertically aligned on their
tops. Is there any way to align them vertically on their bottoms (or
middle for that matter) short of resorting to using a table (where
"vertical-align: bottom" does work)?

Dave

On 2008-03-17, Dave Rado <dave.rado@dsl.pipex.com> wrote:
> Hi
>
> See my mock-up at http://tinyurl.com/35tv29. The three icons are
> supposed to be vertically aligned on their bottoms (using "vertical-
> align: bottom"), but they aren't, they're vertically aligned on their
> tops. Is there any way to align them vertically on their bottoms (or
> middle for that matter) short of resorting to using a table (where
> "vertical-align: bottom" does work)?

Vertical-align doesn't apply to blocks (like divs).

But you can set it on the imgs inside the divs if you want. Or set img
to display: block which I think is more appropriate here.

Hi Ben

On 17 Mar, 17:09, Ben C <spams...@spam.eggs> wrote:

> Vertical-align doesn't apply to blocks (like divs).
>
> But you can set it on the imgs inside the divs if you want.

I tried your suggestion but must be doing something wrong. See my mock-
up at http://tinyurl.com/2qh2vy. Can you see what I'm doing wrong?


> Or set img
> to display: block which I think is more appropriate here.

I tried this suggestion as well but again, I must be doing something
wrong. See my mock-up at http://tinyurl.com/2rzobt. Can you see what
I'm doing wrong?

Perhaps I should explain that I am trying hard to understand the more
complex parts of css but am finding it a real culture shock, having
learnt my html in the early 90x, when everyone used tables, and then
moved away from web development for several years, and I am now having
to build a complex website and as I say am finding the change from
using tables for layout to using css a real culture shock and a huge
learning curve. I don't need convincing of the benefits of the change,
but I need lots of hand holding.

Dave

Hi dorayme

On 17 Mar, 22:14, dorayme <doraymeRidT...@optusnet.com.au> wrote:

> Perhaps you can develop from this idea, instead of your html:
>
> <div><img src="../images/Icons/AcrobatSmall.gif" border="0"
> height="100" width="21"></div>
>
> <div><img src="../images/Icons/Bookmark.gif" border="0"
> height="50" width="28"></div>
>
> <div><img src="../images/Icons/Key.jpg" border="0" height="250"
> width="26"></div>
>
> (I have exaggerated your img heights for demo purposes)
>
> And for css, nothing complicated at all, like:
>
> div {display: inline; margin:5%}

I tried your suggestion but must be doing something wrong - see my
mock-up at http://tinyurl.com/2pjwwy. Can you see what I'm doing
wrong? Also, I can't see anything in your code that specifies the
horizontal postions of the three icons. They need to have the exact
horizontal positions that were specified in my original mock-up at
http://tinyurl.com/35tv29.

See also my note to Ben C about my relative lack of expertise and need
for hand-holding.

Dave

On 2008-03-18, Dave Rado <dave.rado@dsl.pipex.com> wrote:
> Hi Ben
>
> On 17 Mar, 17:09, Ben C <spams...@spam.eggs> wrote:
>
>> Vertical-align doesn't apply to blocks (like divs).
>>
>> But you can set it on the imgs inside the divs if you want.
>
> I tried your suggestion but must be doing something wrong. See my mock-
> up at http://tinyurl.com/2qh2vy. Can you see what I'm doing wrong?
>
>
>> Or set img
>> to display: block which I think is more appropriate here.
>
> I tried this suggestion as well but again, I must be doing something
> wrong. See my mock-up at http://tinyurl.com/2rzobt. Can you see what
> I'm doing wrong?

You've got three different divs, two of which are absolutely positioned.

Vertical-align on the images is only going to align them if they're on
the same line, which means (at least) all in the same block box.

> Perhaps I should explain that I am trying hard to understand the more
> complex parts of css but am finding it a real culture shock, having
> learnt my html in the early 90x, when everyone used tables, and then
> moved away from web development for several years, and I am now having
> to build a complex website and as I say am finding the change from
> using tables for layout to using css a real culture shock and a huge
> learning curve. I don't need convincing of the benefits of the change,
> but I need lots of hand holding.

Best to say exactly what you are trying to do with the three images in
the first place from the top.

HI Ben

On 18 Mar, 18:32, Ben C <spams...@spam.eggs> wrote:

> Best to say exactly what you are trying to do with the three images in
> the first place from the top.

I'm not sure what information you're asking for. I need to create a
div 607px wide that is horizontally centred on the page, which I've
managed to do successfully. Within this div I need to place three
icons, one at the left edge of the div, one at the right edge of the
div, and one centred within the div. I've also managed to do this
successfully, and I' posted a mock-up (which is at http://tinyurl.com/35tv29)
showing my code which did this. However, the three icons are top-
aligned within the div and top-aligned relative to each other, whereas
I need them to be bottom-aligned - something that is a breeze to do if
one uses tables for layout, but I can't work out how to do it if one
uses divs instead of tables. I was hoping someone would look at the
code in my mock-up and tell me what modifications to make to my code
in order that the three icons would appear in exactly the same
horizontal position as before, but bottom-aligned relative to each
other. I'm not sure what other information I could provide that is
relevant. Can you ?

Dave

Dave Rado wrote:
>
> I need to create a
> div 607px wide that is horizontally centred on the page, which I've
> managed to do successfully. Within this div I need to place three
> icons, one at the left edge of the div, one at the right edge of the
> div, and one centred within the div. I've also managed to do this
> successfully, and I' posted a mock-up (which is at http://tinyurl.com/35tv29)
> showing my code which did this. However, the three icons are top-
> aligned within the div and top-aligned relative to each other, whereas
> I need them to be bottom-aligned

They really only appear to be top aligned because the line heights are
stretched as needed to fit the inline image. Baseline is the default
alignment for images. If the line heights were equal, the baseline would
be the same for all and they'd be aligned as you want.

Except maybe in IE. It doesn't do well with changing line-height of
replaced elements.

--
Berg

HI Berg

On 18 Mar, 22:59, Bergamot <berga...@visi.com> wrote:

> They really only appear to be top aligned because the line heights are
> stretched as needed to fit the inline image. Baseline is the default
> alignment for images. If the line heights were equal, the baseline would
> be the same for all and they'd be aligned as you want.
>
> Except maybe in IE. It doesn't do well with changing line-height of
> replaced elements.

It sounds like I should go back to using tables?

Dave

Hi dorayme

On 18 Mar, 22:59, dorayme <doraymeRidT...@optusnet.com.au> wrote:

> What made you think your http://tinyurl.com/2pjwwy was a mockup
> of my suggestion above?
>
> --
> dorayme

Obviously I haven't understood your suggestion.

Dave

On 2008-03-18, Dave Rado <dave.rado@dsl.pipex.com> wrote:
> HI Ben
>
> On 18 Mar, 18:32, Ben C <spams...@spam.eggs> wrote:
>
>> Best to say exactly what you are trying to do with the three images in
>> the first place from the top.
>
> I'm not sure what information you're asking for. I need to create a
> div 607px wide that is horizontally centred on the page, which I've
> managed to do successfully. Within this div I need to place three
> icons, one at the left edge of the div, one at the right edge of the
> div, and one centred within the div. I've also managed to do this
> successfully, and I' posted a mock-up (which is at http://tinyurl.com/35tv29)
> showing my code which did this. However, the three icons are top-
> aligned within the div and top-aligned relative to each other, whereas
> I need them to be bottom-aligned - something that is a breeze to do if
> one uses tables for layout, but I can't work out how to do it if one
> uses divs instead of tables. I was hoping someone would look at the
> code in my mock-up and tell me what modifications to make to my code
> in order that the three icons would appear in exactly the same
> horizontal position as before, but bottom-aligned relative to each
> other. I'm not sure what other information I could provide that is
> relevant. Can you ?

The simplest modification to the code you have is just replace
"vertical-align: bottom" on both div.TopOfPageIcons div.right and on
div.TopOfPageIcons div.left with "bottom: 0".

Bottom is used to position an absolutely positioned element relative to
the bottom content edge of its container.

Also add img { display: block } and use a strict mode doctype, this is
the best one to use to be sure of not getting quirks mode or some kind
of almost-strict mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Then remove text-align and vertical-align from everywhere-- there are
now no inline-level elements in the page at all, so neither of them will
be doing anything.

Then when you've done that, get rid of the divs around the imgs
altogether and transfer the position: absolute and bottom rules to the
imgs. You can position them directly-- they don't need to be wrapped in
divs.

If the imgs are position: absolute they don't need to be set to display:
block since position: absolute implies display: block (although there's
no harm in setting it).

HTH. Probably you should read a tutorial somewhere explaining the
basics. You've got (in roughly ascending order of how often you probably
need to use each one):

1. Normal flow (inline things breaking across lines, blocks stacking up
one under the other, greedy auto width, conservative auto height).
2. Normal flow complicated by floats getting in the way.
3. Tables (which you know).
4. Absolute positioning (things go exactly where you tell them but be
clear on what the containing block is)

Text-align and vertical-align belong mainly to strategy 1 and aren't
really involved in strategy 4 which is what you're mostly using here.

Hi Ben

On 18 Mar, 23:22, Ben C <spams...@spam.eggs> wrote:


> The simplest modification to the code you have is just replace
> "vertical-align: bottom" on both div.TopOfPageIcons div.right and on
> div.TopOfPageIcons div.left with "bottom: 0".
>
> Bottom is used to position an absolutely positioned element relative to
> the bottom content edge of its container.

> Then remove text-align and vertical-align from everywhere-- there are
> now no inline-level elements in the page at all, so neither of them will
> be doing anything.
>
> Then when you've done that, get rid of the divs around the imgs
> altogether and transfer the position: absolute and bottom rules to the
> imgs. You can position them directly-- they don't need to be wrapped in
> divs.


Thanks Ben, it's working beautifully now, and applying the positioning
rules directly to the images instead of giving each image its own div
is much simpler than the way I was trying to do it.



> Probably you should read a tutorial somewhere explaining the
> basics.

Once I've built my current website, which has a tight deadline (and
which I'm not being paid for, but it's in an extremely good cause), I
promise I'll read a css textbook cover to cover, but I'm on a very
tight deadline at present and really appreciate any you can give
me. I frequently look at short web tutorials on the specific aspects
of css that I'm working with at the time, but my deadline won't allow
me to study a textbook in the way I'd like to yet. In any case I doubt
whether any tutorial would have led me to come up with your
suggestion, as I suspect that sort of suggestion comes from experience
rather than from reading tutorials.


I have another related but different problem. I have a header in a
simulated "document page", consisting of one or multiple paragraphs on
the left-hand side and a page-number graphic on the right - see my
mock-ups using a table to do this at http://tinyurl.com/2vql5q and
http://tinyurl.com/3yqf5t . The text on the left (which may consist of
one or multiple paragraphs) is vertically centred in its table cell
and the number graphic on the right is top-aligned in its table cell.

I tried to use divs instead of a table to achieve the same effect and
made a complete mess of it - see my mock-up at http://tinyurl.com/32xotl
..

Can you see what I need to change in the code of my third mock-up in
order to make it look identical to the first one (and to the second
one if there is only one line of text in the header)? Or do you think
that as dorayme suggests I should continue to use tables for this?

Dave

Hi dorayme

On 19 Mar, 01:49, dorayme <doraymeRidT...@optusnet.com.au> wrote:

> I have made up a page for you that may you understand the
> ideas here:
>
> <http://netweaver.com.au/alt/inlineImages/rado_imagesOnALine.html>

Many thanks, I'll study that page soon. However, Ben's suggestion
worked for me, so although I'm sure yours would work just as well,
I'll go with what is already working.

> (I think I did say to you ages ago that unless you are super keen
> on a course of study in this business, you should just use tables
> for where you are fussy with exact layouts. But I made the above
> in case it s you or anyone else)

I thought you only said it's okay to use tables for numbering,
including for heading numbering, and I've gone with your suggestion on
that. But for layout I thought tables were considered a no-no these
days? In any case with respect to my original query, Ben's suggestion
works great (and I'm sure yours does too, and I will study yours
shortly), and it does simplify the code compared with using a table.
But I have a similar but different problem which I've just posted
about in reply to Ben.

Dave

Hi Ben

On 18 Mar, 23:22, Ben C <spams...@spam.eggs> wrote:


> The simplest modification to the code you have is just replace
> "vertical-align: bottom" on both div.TopOfPageIcons div.right and on
> div.TopOfPageIcons div.left with "bottom: 0".
>
> Bottom is used to position an absolutely positioned element relative to
> the bottom content edge of its container.

> Then remove text-align and vertical-align from everywhere-- there are
> now no inline-level elements in the page at all, so neither of them will
> be doing anything.
>
> Then when you've done that, get rid of the divs around the imgs
> altogether and transfer the position: absolute and bottom rules to the
> imgs. You can position them directly-- they don't need to be wrapped in
> divs.


Thanks Ben, it's working beautifully now, and applying the positioning
rules directly to the images instead of giving each image its own div
is much simpler than the way I was trying to do it.



> Probably you should read a tutorial somewhere explaining the
> basics.

Once I've built my current website, which has a tight deadline (and
which I'm not being paid for, but it's in an extremely good cause), I
promise I'll read a css textbook cover to cover, but I'm on a very
tight deadline at present and really appreciate any you can give
me. I frequently look at short web tutorials on the specific aspects
of css that I'm working with at the time, but my deadline won't allow
me to study a textbook in the way I'd like to yet. In any case I doubt
whether any tutorial would have led me to come up with your
suggestion, as I suspect that sort of suggestion comes from experience
rather than from reading tutorials.


I have another related but different problem. I have a header in a
simulated "document page", consisting of one or multiple paragraphs on
the left-hand side and a page-number graphic on the right - see my
mock-ups using a table to do this at http://tinyurl.com/2vql5q and
http://tinyurl.com/3yqf5t . The text on the left (which may consist of
one or multiple paragraphs) is vertically centred in its table cell
and the number graphic on the right is top-aligned in its table cell.

I tried to use divs instead of a table to achieve the same effect and
made a complete mess of it - see my mock-up at http://tinyurl.com/32xotl
..

Can you see what I need to change in the code of my third mock-up in
order to make it look identical to the first one (and to the second
one if there is only one line of text in the header)? Or do you think
that as dorayme suggests I should continue to use tables for this?

Dave

Dave Rado wrote:
>
> I have another related but different problem. I have a header in a
> simulated "document page", consisting of one or multiple paragraphs on
> the left-hand side and a page-number graphic on the right - see my
> mock-ups using a table to do this at http://tinyurl.com/2vql5q and
> http://tinyurl.com/3yqf5t . The text on the left (which may consist of
> one or multiple paragraphs) is vertically centred in its table cell
> and the number graphic on the right is top-aligned in its table cell.
>
> I tried to use divs instead of a table to achieve the same effect and
> made a complete mess of it - see my mock-up at http://tinyurl.com/32xotl
> .
>
> Can you see what I need to change in the code of my third mock-up in
> order to make it look identical to the first one (and to the second
> one if there is only one line of text in the header)? Or do you think
> that as dorayme suggests I should continue to use tables for this?

You might try div.Header {width: 601px; position:relative; } and see if
it gets you started. You'll want to look at margin or padding next, but
you have a coding error in <p class="Header1> which is slowing down the
testing process. Validate, fix the markup, provide some spacing, adjust.

HTH

--
John
Read about the UIP: http://improve-usenet.org/

On 2008-03-19, Dave Rado <dave.rado@dsl.pipex.com> wrote:
[...]
> I have another related but different problem. I have a header in a
> simulated "document page", consisting of one or multiple paragraphs on
> the left-hand side and a page-number graphic on the right - see my
> mock-ups using a table to do this at http://tinyurl.com/2vql5q and
> http://tinyurl.com/3yqf5t . The text on the left (which may consist of
> one or multiple paragraphs) is vertically centred in its table cell
> and the number graphic on the right is top-aligned in its table cell.
>
> I tried to use divs instead of a table to achieve the same effect and
> made a complete mess of it - see my mock-up at http://tinyurl.com/32xotl
> .
>
> Can you see what I need to change in the code of my third mock-up in
> order to make it look identical to the first one (and to the second
> one if there is only one line of text in the header)? Or do you think
> that as dorayme suggests I should continue to use tables for this?

It's up to you.

In this case, you could give HeaderLeft margin-right: 50px (and don't
set width on it), move the page number image in the HTML source to above
HeaderLeft (so it's the first child of <div class="Header"> and give it
float: right.

You won't get anything vertically centered though. The only way to do
vertical centering of a shrink-to-fit block is with tables. But the
vertical centering isn't having much effect in your table version anyway
since the height of the row is limited by the page number unless the
contents of HeaderLeft are very short and the user has a very small font
size.

Not using tables is easier if you cheat and allow your design to change
a bit In particular vertical centering, some cases of horizontal
centering, setting heights on things, makings columns the same height as
each other, spacing things out evenly: all these things are often easier
with tables. With no-tables CSS you tend to see a simpler kind of
layout-- some decoration at the top and perhaps down the left side and
not too much else.

Hi Ben and John

Apologies for the delay in replying, but I've been experimenting and
creating more mock-ups.


> John wrote:
> you have a coding error in <p class="Header1>

Sorry about that - there was a missing quotation mark ...

****

I've *sort of* got it working in non-IE browsers, albeit without the
vertical centring (which I do need, however, for reasons discussed
below) - see my "mock-up 3" at http://tinyurl.com/32xotl .

"Mock-up 3" is meant to look identical to "mock-up 2" (the one at
http://tinyurl.com/3yqf5t , which I posted earlier in this thread, and
which uses a table for the page header).

Apart from the lack of vertical centring, mock-ups 2 and 3 do look
almost identical to each other in *non*-Microsoft browsers, but they
don't in IE. In IE 6 and 7, in "mock-up 3", an unwanted 3px gap has
appeared between the article title/page no. div and the orange line
below it, for some reason that I can't fathom; and in IE 5.5, in
addition to this problem, the right-hand edge of the page no. graphic
is hidden, again for some reason that I can't fathom. Do you
understand why, and how to fix this? I didn't get the latter (IE 5.5)
problem with the three icons that you ed me position earlier in
the thread.

In order to try to fix the IE 5.5 problem of the right-hand edge of
the page no. graphic being hidden, I then tried using:
img.PgNo {position: absolute; right: 0}
(instead of using {float: right}), which was the method that you had
suggested and which worked well for the rightmost of the three icons
(img.TopOfPageIconsRight) above the document page earlier in this
thread; but instead of aligning the image to the right of its parent
div, (div.Header), it aligned it to the right of that div's parent div
(div.DocumentPage) - in all browsers - and I don't understand why -
see my "mock-up 4" at http://tinyurl.com/3dfm37 . Again, do you
understand why, and how to fix this?

****

> Ben wrote:
> You won't get anything vertically centered though. The only way to do vertical centering of a shrink-to-fit block is with tables.

I've found several web tutorials that claim it is possible to do this
(e.g. see http://tinyurl.com/2jhlbp), but I can't get their methods to
work in any version of IE, in my scenario.

It works quite well if there is a one-line header (as in my "mock-up
5" at http://tinyurl.com/38umww (in which I've used IE conditional
comments instead of the # hack used at http://tinyurl.com/2jhlbp, as
the former seems more correct to me). Apart from the problem
(described above) that using {right: 0} positions the image with
respect to the wrong div for some reason, it looks fine in Firefox;
although (again, as described above), in IE there is an unwanted gap
between the header and the orange line below it. But when there is a
multi-line header, as in my "mock-up 6" at http://tinyurl.com/3xhgl6 ,
then while it still looks okay in Firefox (apart from the mis-
positioned page number), it looks completely wrong in IE - the top of
the text block is moved up above the top of the graphic, which I don't
want it to be. Is there a fix for this? I tried adding the setting:
div.HeaderLeft {top: 0} in the IE conditional code section, but it
made no difference.

I'm starting to think that you're right and that those web tutorials
that imply thyat one can have cross-browser table-like vertical
centring using css are misleading, in that while it is possible to get
a sort of vertical centring in IE with css, it only seems to work
properly if one can guarantee that the height of the contents of the
div will never exceed the height of the div - which I can't guarantee.
So I think this is probably a case where I'll have to stick with using
a table. But I'd still be grateful for answers to my other questions
above.

The reason I need vertically centred text for this, by the way, is
that when the header only contains one line of text, which it
frequently does, it looks much more pleasing on the eye if it is
vertically centred relative to the page number graphic, as in "mock-up
2" (http://tinyurl.com/3yqf5t) than it does if it is not, as in "mock-
up 3" (http://tinyurl.com/32xotl) - even in Firefox (and the
difference is much more stark in IE).

****

I have some other layout tables that I had been hoping to convert to
divs but in which the text also need to be vertically centred,
although unlike the above table, I think I *can* guarantee that the
height of the content of the other tables or divs will never be
greater than the height of the divs themselves, so I guess I *could*
use the vertical centring workaround method described at http://tinyurl.com/2jhlbp
to replace those tables with divs, but I'm wondering whether it's
really justified, given that this workaround seems quite clunky to me
(in order for it to work in IE). See my mock-up of a menu at
http://tinyurl.com/36pscl , and of a footer at http://tinyurl.com/33fej9
, which currently both use simple css-based tables. (Or you can see
both of them in full context at http://tinyurl.com/28mcte, but the
othetr mock-ups are much simpler and easier to make sense of).

In your opinion, would it be advisable to convert these tables to divs
using the above workaround? The reason I'm not sure is that most of
the normal reasons for using divs rather than tables don't seem to me
to apply in either case, mainly because the workaround to get the
vertical centring in IE seems quite clunky to me - it doesn't seem to
reduce the amount of code required - on the contrary, I suspect in the
case of the footer it would actually increase it - and - correct me if
I'm wrong, but I doubt it would make the html any easier for a screen
reader to navigate, because it requires several additional divs to
make it work. But I would be grateful for your thoughts on this.

Dave

Hi dorayme

Apologies for the delay in replying, but I've been experimenting and
creating more mock-ups.

On 19 Mar, 03:30, dorayme <doraymeRidT...@optusnet.com.au> wrote:

> I have little doubt that Ben's suggestion would work. My concerns
> were twofold. One, if something goes wrong with absolute
> positioning, you will have to ask Ben again how to fix it. In
> other words, it is a trickier business. What is your final code
> looking like?

The code for just positioning the three icons is at http://tinyurl.com/34j9ws
.. However, to see the icons in some context, see the mock-up at
http://tinyurl.com/3yqf5t . (Or to see it in much fuller context, but
with external stylesheets and much more code, and therefore harder to
follow, see http://tinyurl.com/28mcte).

You'll notice that I have given the leftmost icon a Left value of
10px, so it isn't at the far left of the div. The reason for this is
that the right-most icon of the three is supposed to look as if it is
centred on the same point that the page number graphic below it is
centred on (which is the same point that the text below that is
justified to), and in order for this to be possible and yet for the
div itself to be centred, and for the left icon to line up with the
text below it, as it's meant to, the left edge of the div had to be
wider than it would otherwise have been, necessitating the left value
of 10px. I found this relatively easy to get my head around using
absolute positioning of the icons, but more complicated using the
inline method.

Another reason for my preferring the absolute positioning method is
that the gap between the bottoms of the icons and the "document page"
below them (see the second two mock-ups linked to above) needs to be
the same regardless of the height of the icons (some pages don't
contain all three icons, and therefore the maximum height varies).
This is automatic using absolute positioning of the images, but not if
the images are inline.

A third reason is that if you look at the source of the third mock-up
above, you'll see that the icons contain a lot of javascript (roll-
overs and tooltip-like hover text), so they're a lot more than just
images; and having to put all three images on one line would therefore
make the code less readable and maintainable, in my opinion.

***

But you're right that I did immediately hit a snag with the absolute
positioning method, which I have solved with some offline from a
friend, but neither he nor I fully understand the solution.

In order to push the "document page" (div.DocumentPage) below the
icons, I had to make its position relative and specify a value for
Top, which was fine and dandy except that I wanted there to be a space
below the "document page" (as in the second mock-up above - or in the
case of the third mock-up, I wanted a space between the document page
and the "Next/Previous" footer below it. To achieve this, I had to add
a spacer div below the document page, as in:

div.BelowDocSpacer {height: 95px}

<div class="BelowDocSpacer">&nbsp;</div>

What confuses me is that the height I had to specify of 95px is 44px
larger than the actual height of the space created below the "document
page" by it, which is 51px, not 95px. Do you know why one has to
specify a height for the spacer div of 44px greater than the space one
actually wants to create?

Dave

Hi dorayme

On 19 Mar, 03:12, dorayme <doraymeRidT...@optusnet.com.au> wrote:

> > But for layout I thought tables were considered a no-no these
> > days?
>
> I was suggesting to be a bit naughty to ease the pressure on
> yourself, that's all.

I'm trying to find the right balance between good practice (it's going
to be a public site viewed by a large number of people) and yet not
being so fanatical about avoiding tables that it ends up defeating the
object. So I went with your suggestion to use tables for numbering,
including for heading numbering; and (see my most recent reply to Ben
C) it looks as if I may end up keeping some of my layout tables after
all; but in the case of the three icons that I posted about at the
start of this thread, I've managed to replace my table with a div, and
I'd like to replace as many of my tables as divs as I can, but subject
to the above qualifications.

Dave

On 2008-03-27, Dave Rado <dave.rado@dsl.pipex.com> wrote:
[...]
> Apart from the lack of vertical centring, mock-ups 2 and 3 do look
> almost identical to each other in *non*-Microsoft browsers, but they
> don't in IE. In IE 6 and 7, in "mock-up 3", an unwanted 3px gap has
> appeared between the article title/page no. div and the orange line
> below it, for some reason that I can't fathom; and in IE 5.5, in
> addition to this problem, the right-hand edge of the page no. graphic
> is hidden, again for some reason that I can't fathom. Do you
> understand why, and how to fix this?

I don't know anything about IE.

> I didn't get the latter (IE 5.5)
> problem with the three icons that you ed me position earlier in
> the thread.
>
> In order to try to fix the IE 5.5 problem of the right-hand edge of
> the page no. graphic being hidden, I then tried using:
> img.PgNo {position: absolute; right: 0}
> (instead of using {float: right}), which was the method that you had
> suggested and which worked well for the rightmost of the three icons
> (img.TopOfPageIconsRight) above the document page earlier in this
> thread; but instead of aligning the image to the right of its parent
> div, (div.Header), it aligned it to the right of that div's parent div
> (div.DocumentPage) - in all browsers - and I don't understand why -
> see my "mock-up 4" at http://tinyurl.com/3dfm37 . Again, do you
> understand why, and how to fix this?

Position: absolute; right: 0 puts the box 0px from the right edge of its
container, which is the nearest ancestor with position: relative, fixed
or absolute.

In your case that's DocumentPage. If you make div.Header position:
relative then it will become the container for the PgNo which is what
you want.

>
> ****
>
>> Ben wrote:
>> You won't get anything vertically centered though. The only way to do vertical centering of a shrink-to-fit block is with tables.
>
> I've found several web tutorials that claim it is possible to do this
> (e.g. see http://tinyurl.com/2jhlbp)

That is using tables (display: table-cell is tables, but in a good way,
but it won't work in IE).

Position: absolute and top: 50% does sort of work. This is a useful page
about vertical centering:

http://www.student.oulu.fi/~laurirai/www/css/middle/

[...]
> I'm starting to think that you're right and that those web tutorials
> that imply thyat one can have cross-browser table-like vertical
> centring using css are misleading, in that while it is possible to get
> a sort of vertical centring in IE with css, it only seems to work
> properly if one can guarantee that the height of the contents of the
> div will never exceed the height of the div

That's basically the problem with position: absolute and top: 50%.

> - which I can't guarantee. So I think this is probably a case where
> I'll have to stick with using a table.

That is the best course of action, unless you can compromise on wanting
vertical centering.

[...]
> The reason I need vertically centred text for this, by the way, is
> that when the header only contains one line of text, which it
> frequently does, it looks much more pleasing on the eye if it is
> vertically centred relative to the page number graphic, as in "mock-up
> 2" (http://tinyurl.com/3yqf5t) than it does if it is not, as in "mock-
> up 3" (http://tinyurl.com/32xotl) - even in Firefox (and the
> difference is much more stark in IE).

To my eye the one that isn't vertically centered looks just fine

> I have some other layout tables that I had been hoping to convert to
> divs but in which the text also need to be vertically centred,
> although unlike the above table, I think I *can* guarantee that the
> height of the content of the other tables or divs will never be
> greater than the height of the divs themselves, so I guess I *could*
> use the vertical centring workaround method described at
> http://tinyurl.com/2jhlbp to replace those tables with divs, but I'm
> wondering whether it's really justified, given that this workaround
> seems quite clunky to me (in order for it to work in IE). See my
> mock-up of a menu at http://tinyurl.com/36pscl , and of a footer at
> http://tinyurl.com/33fej9 , which currently both use simple css-based
> tables. (Or you can see both of them in full context at
> http://tinyurl.com/28mcte, but the othetr mock-ups are much simpler
> and easier to make sense of).
>
> In your opinion, would it be advisable to convert these tables to divs
> using the above workaround?

In my opinion stick with the tables if you must have vertical centering.

> The reason I'm not sure is that most of the normal reasons for using
> divs rather than tables don't seem to me to apply in either case,
> mainly because the workaround to get the vertical centring in IE seems
> quite clunky to me

I agree.

[...]
> - and - correct me if
> I'm wrong, but I doubt it would make the html any easier for a screen
> reader to navigate, because it requires several additional divs to
> make it work.

I don't know much about screen readers but someone here I think once
pointed out that his screen reader just reads what's actually
_displayed_ in the browser window-- in other words it grabs text off the
page like a clipboard copy operation, and doesn't look at the HTML
source at all.

On 2008-03-27, Dave Rado <dave.rado@dsl.pipex.com> wrote:
> Hi dorayme
>
> Apologies for the delay in replying, but I've been experimenting and
> creating more mock-ups.
>
> On 19 Mar, 03:30, dorayme <doraymeRidT...@optusnet.com.au> wrote:
>
>> I have little doubt that Ben's suggestion would work. My concerns
>> were twofold. One, if something goes wrong with absolute
>> positioning, you will have to ask Ben again how to fix it. In
>> other words, it is a trickier business. What is your final code
>> looking like?
>
> The code for just positioning the three icons is at http://tinyurl.com/34j9ws
> . However, to see the icons in some context, see the mock-up at
> http://tinyurl.com/3yqf5t . (Or to see it in much fuller context, but
> with external stylesheets and much more code, and therefore harder to
> follow, see http://tinyurl.com/28mcte).
>
[...]
> But you're right that I did immediately hit a snag with the absolute
> positioning method, which I have solved with some offline from a
> friend, but neither he nor I fully understand the solution.
>
> In order to push the "document page" (div.DocumentPage) below the
> icons, I had to make its position relative and specify a value for
> Top, which was fine and dandy

Moving things with position: relative is a bit risky, because in a sense
they don't really move, they just get rendered offset from their real
position as it were at the last minute. The space they occupy and their
effect on the positions and sizes of sibling and parent boxes is just
the same as if you didn't offset them.

In this case, it might have been better to give body margin-top: 80px or
something instead, because that moves everything down properly.

> except that I wanted there to be a space
> below the "document page" (as in the second mock-up above - or in the
> case of the third mock-up, I wanted a space between the document page
> and the "Next/Previous" footer below it. To achieve this, I had to add
> a spacer div below the document page, as in:
>
> div.BelowDocSpacer {height: 95px}
>
><div class="BelowDocSpacer">&nbsp;</div>
>
> What confuses me is that the height I had to specify of 95px is 44px
> larger than the actual height of the space created below the "document
> page" by it, which is 51px, not 95px. Do you know why one has to
> specify a height for the spacer div of 44px greater than the space one
> actually wants to create?

It's because your DocumentPage is "really" 84px higher up than it looks.
You've also got a 40px bottom margin on DocumentPage which is the extra
40px. 40 + 44 = 84.

Think of relative positioning like this: the whole page is first laid
out as if all relatively positioned boxes had top: 0 and left: 0. Then,
afterwards, each relatively postioned box is translated by whatever you
set for top, left, bottom or right. It takes its descendents with it
when it moves, but that's all, nothing else is affected. The page isn't
laid out again.

A simple example:

<div id="container" style="border: 1px solid black">
<div style="height: 100px" id="A"></div>
<div style="height: 200px" id="B"></div>
</div>

Normally, B's top edge will start 100px from the top of the container.

Now make A position: relative; top: 150px. *B doesn't move*. Its top is
aligned with where the bottom of A was before A was offset.

But if you give A instead a top margin of 150px, it moves down properly,
and B flows underneath it like it should.

Hi Ben

On 27 Mar, 22:25, Ben C <spams...@spam.eggs> wrote:

> Position: absolute; right: 0 puts the box 0px from the right edge of its
> container, which is the nearest ancestor with position: relative, fixed
> or absolute.
>
> In your case that's DocumentPage. If you make div.Header position:
> relative then it will become the container for the PgNo which is what
> you want.

That fixed the IE5.5 problem, thanks. For some reason IE5.5 can cope
with Position: absolute; right: 0 but seems not to be able to cope
with float: right.


> In my opinion stick with the tables if you must have vertical centring.

Thanks, that's one decision made, anyway.


> I don't know much about screen readers but someone here I think once
> pointed out that his screen reader just reads what's actually
> _displayed_ in the browser window-- in other words it grabs text off the
> page like a clipboard copy operation, and doesn't look at the HTML
> source at all.

Okay thanks, that's a relief to know. Given this, it's odd, though,
that screen reader accessibility is often given in tutorials as a
primary reason not to use tables for layout.

Dave