Webmaster Forum / HTML, CSS, Scripts / CSS / March 2008

Hi Ben and John

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

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 helped 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?

****

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

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

Hi dorayme

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

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 help 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