Hello WSG'ers,
I'm experiencing some frustrations with a current project and could
use some experienced opinions. Warning though, I might get a bit wordy
as it's going to be a multi-part question, as I'd like feedback about
my chosen process. Also I would class myself advanced beginner, as I
only been in web dev for about a year.
OK, it's a new homepage for my employer. It's basically a series of
rectangular <div>'s 980px wide (wrapper is 1000px with 10px padding
right and left) but varying heights, down the page, from top to bottom
appears as;
1. Header
2. Navigation
3. Banner Photo
4. Five even sized boxes with current product promotions floated in
their div left to appear horizontal across page
5. Two (2/3 page and 1/3 page) boxes for general introduction and
client login (again horizontal)
6. Three even boxes for everyday products and customer contact (ditto
the horizontal)
7. and final footer with copyright notice and repeated links

My problem has arisen because I decided that I should write the markup
so that steps 4 and 5 occur the other way around. So as a percieved
accessibility benefit (even though I've included a 'skip to content'
link at the top of the page) a screen reader would not have to skip
through the promotions first, but read the introduction content, then
the products. Concurrent to this I've attempted to write the CSS up as
an elastic layout in em's should a user need to resize the page. I've
also used the Eric Meyer reset, and set body font size to 1em (16px)
and line height to 1.3em. I broadly understand the in and out's of
em's, but am novice at implementing it.
The problem I initially encountered was that when I used relative
positioning for steps 4 and 5, to visually re-position them the
margins between 4,5 and 6 varied across browsers. I was able to live
with that, but the graphic designer of the site couldn't. This
variation in margins also occured when trying to evenly space the five
boxes of step 4 across the page and achieve alignment left and right.
I tried %'s instead of em's, and for testing purposes without changing
the rest of the layout, used pixels, but it never quite went flush to
the edges.
Then I tried absolute positioning with all the div's below the banner
photo, and at least on the mac, across Safari 2, FF3, Opera 9.5, and
Camino 1.6.3 (the five boxes were not entirely solved, but the layout
was evenly spaced) my problems appeared to be solved. But then I tried
it on a PC with IE7 and steps 4 and 5 were just plain gone???
I've also encountered another quirk that just appear in Opera when I
tried to use image replacement for some links as buttons, that's
causing the page to scroll horizontally, but given our likely audience
I think even the designer might be able to live with that.

So my questions to the group are;
Was the decision to write the markup in the order I did correct or
pedantic? Because if I didn't then I wouldn't have the layout issues
I'm having I'd guess.
Was it a mistake to try and create an elastic layout in em's and
expect the entire interface to expand? In this case might it be better
to use pixel for width's but em's for font and % for height and allow
the boxes to expand with the text? Or should I just stick to pixel's
all round.
Is there a 'golden rule' about repositioning sections of markup out of
the order they're written, and why was there variation with the
margins across apparently very well behaved browsers?
Finally why did the absolute position boxes just vanish in the IE7? I
realise this might be too vauge a question, but I'm not even quite
sure what my search terms might be trying to find the answer to this
via Google. Generally the whole IE thing I ignore until required.

Wow! I didn't intend to take so long, but would appreciate feedback
even if it's just on one point.
John Unsworth

List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm

Reply via email to