36 replies [Last post]
avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

[UPDATE 2005, July 11]: I've made some changes to the underlying code and replaced the "Lorem ipsum ..." with a description of the techniques used. Most significant change is that you can reorder the columns' position by changing the <body> class (no need to touch the css ...). If you could let me know which browsers (and operating systems) you've been able to check this on I'd appreciate it.
-----------------------------

I've placed a demo version online. This is a source order friendly layout -- place any of the 3 column's content anywhere (almost) in the XHTML file. Code is validated (XHTML Strict, and CSS) and tested on Mac OS X (Safari 1.3, FF 1.0.4 and IE5/Mac) and also on a Win 98 PC with IE6 and FF 1.0. Code should be nice to IE 3, IE4 and NN4.x browsers (which get unstyled content with a "skip to nav" link).

I'm looking to see which "modern" browsers (circa IE 5+ and later) can display the page without major layout or functional issues with up to a 150% text zoom. You'll find adequate comments (at least for this stage) in the files, especially the css, to explain the approach and to give credit where it's due. Assuming it works well enough, I'll get it written up and published on my weblog.

This is my first time submitting a site for a check. Hope it's worth your time..., sure it will be worth mine.

Thanks in advance,
Paul

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3-column layout in need of some browser checks

It may be my imagination, but the header and nav look slightly uncentred to the right at 800 x 600 (FF). Also, when you increase the font size, the nav stays centred up to a certain point (probably past 150%), but then starts pushing itself out to the right while maintaing and even gap on the left.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Tyssen wrote:
It may be my imagination, but the header and nav look slightly uncentred to the right at 800 x 600 (FF). Also, when you increase the font size, the nav stays centred up to a certain point (probably past 150%), but then starts pushing itself out to the right while maintaing and even gap on the left.

Not your imagination. The "navbar" is positioned absolutely and that seems to have messed up any normal method of getting the buttons centered. The buttons size and position are based on em units which accounts for how it seems farily centered and then quickly goes off center when you bump the font size way up.

I forgot to mention in my original post that the page is "semi-fluid" (or what ever you want to call it). On browsers that support min-width and max-width, the columns will expand/collapse between minimum widths for 800x600 and 1024x768 screens.

- Paul

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

Did I miss something?

I'd heard this site was a good place to get a little help checking out a page on browsers you don't have access to. Are there some kind of secret dues (magic words?) that I'm not aware of?

All I was looking for was a little feedback along the lines of:

"It works on IE6, WinXP"
or:
"On Win 98 using the ____ browser the footer is overlaying the content."

I suppose I could assume that, other than Tyssen, nobody's experienced any problems with the page, but that's a lot to assume ...

A little help, please???

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

Hi Paul and welcome.
OK then, let me try to prove this forum is as good as it's cracked up to be Wink

Your page does not work in IE6 Win XP:
The layout breaks at the second text increase at 800x600 and 1024x768 resolution. I can, but haven't, gone any higher, because you already know IE does not support max-width in the way you have done it.
At any text size, it is evident that the menu hover images are not properly scaled - or whatever. I haven't looked at or tested any of the code, because you have already said it all validates.

It does not work in Firefox WinXP:
Same problem with the menu hover pics and after several (around eight) text-size increases the header starts to bleed into the menu bar.

Opera 7.2.1 (I haven't updated for a while) acts like a gentleman, except for the menu hover pics (sorry to be repetitive) and it starts to squeeze your menu items together after increasing text-size above 120%.

I do not have access to the older browsers. But if it doesn't work in the ones I test in, it is very unlikely to work in the older versions. I do not have access to Mac stuff, as you appear to do, so I cannot perform the same sort of tests.

Just some observations:
On opening the page in Win IE, the third menu item displays "This is Menu (drop down) Tab 3" and the other browsers display "This is Menu Tab 3" inline.

I applaud what you are trying to do, in terms of source ordering and your submission is, by no means, a waste of time. I haven't read the content but one of the reasons behind source ordering, alongside search engine optimisation, is that it aids accessibilty of the site. If you would like some pointers on the accessibility issues on the page, please ask.

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Lorraine wrote:
Hi Paul and welcome.
OK then, let me try to prove this forum is as good as it's cracked up to be Wink

Thanks. So, I've yanked the menu out of there ... it wasn't part of what I was working towards, anyway.

If I'm reading what you've written correctly, then there's still a problem with resizing the font on Win XP, IE6? If so, how does the layout break? Is this just a "you can't get 3 columns with fonts this size in an 800x600 window" kind of thing or are columns vanishing, or what?

Thanks for the offer re: accessibilty pointers. I wasn't so much going for accessibilty as I was not going for a layout that would make accessibilty impossible. I figured it should at least handle a 150% bump in font sizes.

Thanks again,

Paul

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

Paul
I have to give a series of poor quality screen-shots for IE - because of image size constraints on the forum - and I want to give you a fighting chance.
This one shows the page just beginning to break at the first text size increase at 800x600- note the horizontal scrollbar. At 1024x768 it's OK but getting marginal.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

At the second text size increase on 800x600, well yes you do lose a column or two. We know they've been squeezed down, but as far as the visitor is concerned...

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

At the second text size increase on 1024x768, this may be acceptable but I don't think you'd be happy with "About this page layout"

It could be that the menu bar is playing a feature role in all this. You have said the current menu bar is a temporary feature, so, If you don't mind reloading the new page with the new one, then letting us know, we'll take a look. As for me it's just after midnight, so I'll not be back online until tomorrow.

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Lorraine wrote:
You have said the current menu bar is a temporary feature, so, If you don't mind reloading the new page with the new one, then letting us know, we'll take a look.

Thanks, Lorraine. I put the new page up at the time of my last post here. Sorry for not making that clearer. The screenshots were helpful. It looks like the menu was partly to blame, so things should work better now. I'll have to see if I can get rid of the horizontal scroll bars, though...

Paul

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

'morning.
Much better. Just a break at 800x600 on second text size increase.
I don' get no horizontal scrollbars did you fix it?
But now IE at all text-sizes and resolutions has chosen to ignore vertical scrolling - see attachment.

I took a cursory glance at the CSS - nothing jumped to the top of the bill as a potential culprit. I like the way you have commented all the gory details - it would be good if more developers did that. To h3ll with bandwidth considerations, I say,at least it would save some of the gurus here verbal repetitive strain injury Wink

Just a thought on max-width:

#ie-body 
/* This forces IE into a specified maximum width because if doesn't recognize max-width.
The expression does NOT validate, but it does the job, so small price to pay 
- you could always put it into a separate style sheet to keep your main stylesheet 'clean'.
994 px was chosen so as not to invade IE's vertical scrollbar space
Visitor MUST have javascript enabled. */
{
	width:expression(document.body.clientWidth < 800 ? "98%" : "994px"); 
	margin:0 auto; 
}

Works for me Laughing out loud

One more little issue which you may consider um... inconvenient on the site. There is a FOUC on several of the divs exposing original green and purple undergarments Shock but only momentary immodesty.

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

Think it will be a little better this time ...

Try it again! You may need to refresh the page to get the previous version out of your browser's cache.

Regarding the #ie-body "fix" for min-width, doesn't this put a serious hit on the browser when the window's resized? All of these fixes I've tried bring old/slow PCs to their knees...

Thanks again for your help, Lorraine.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

Getting there. Still getting the flash of undergarment content on the rounded boxes (yep, sorry) and the footer - don't know if it is still meant to be green though.

You may be right about the server hits, but then again you do have a number of css imports to be cycled through on refresh. This may be a self-fulling prophecy Shock so take it under advice but I *reckon* the hits on my server went down when I embedded the fix.

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Lorraine wrote:
Still getting the flash of undergarment content on the rounded boxes (yep, sorry) and the footer ...

The prescribed fix for the FOUC is to have a <link ...> and/or <script ...> in the HTML head. The test page has a link to an external style sheet. I think what you're seeing is your browser "painting" in the background images.

Lorraine wrote:
You may be right about the server hits ...

No ..., not server hits; a [performace] hit on the browser. If you resize a window by dragging the lower-right corner around, these little ":expression()" code pieces start eating up a lot of processor time. On slower machines, like an old Win98 box, you can get IE6 to crash by continuously resizing a window that's showing a page with one of these "fixes" ('course you can get IE6 to crash just by surfing the web, so what does that prove? Wink).

The code you suggested,

{
   width:expression(document.body.clientWidth < 800 ? "98%" : "994px");
   margin:0 auto;
}
 

would result in this little bit of javascript getting run every time the window size changed, even by one pixel. A little mousing around can queue up a thousand of these "one liners" and momentarily freeze up the browser.

That would all happen on the local machine, by the way. It wouldn't have any effect on server hits.

Thanks again for all your help. Lorraine. It's much appreciated.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

Quote:
I think what you're seeing is your browser "painting" in the background images.

I think what I'm seeing is this:
Bear with me here - thinking aloud.
So where is the blue colour finally rendered?
It doesn't appear to be in cbrc.css, or main.css, there's a close-ish match (#a9f) in mbrc.css and it's definitely not in lpf.css
So where is it Paul, help me out here!

However, in cbrc.css there is:
main box structure with transparent background - .rcbox .xtop/bottom etc. OK
But .xb2,3 and 4 have background #eac - that's the initial purplish colour (not background image) in the flash. There's also a dark purple flash going on over at A Tip of the Hat - it's noticeably darker that the final render. There's a solid green flash on the footer before the background image comes up and a solid blue flash on the header before what appears to be a faint "cloud" effect renders.

OK OK - already so I got my servers muddled with my browsers. Sorry for my confusion :oops: I've been trying to speed up a couple of sites of mine since Friday morning - no excuse, merely a reason. Wink

Quote:
"fix" for min-width, doesn't this put a serious hit on the browser when the window's resized? All of these fixes I've tried bring old/slow PCs to their knees...

I saw similar comments on your site, so I got my husband's old W98 IE5 down from the attic/loft and tried out a couple of my sites with the fix. No discernible problems - even with that junk which to be fair to my knowledge has hardly ever crashed Shock So I thought I'd throw the thought out of the aircraft to see if the parachute would open.

But I also checked out your site - I won't even go there as far as the rounded boxes are concerned and I refuse to go up to the loft again to get his external cd-rw just to switch to this computer to produce piccies. The site as such was OK but suffice it to say the rounded boxes broke as could be expected and as warned by Stu, no doubt.

I puddled around Fx because it's easier for me to look at CSS. This time because I was not doing a um... site check, I had my usual indeterminate window size - set up on a large monitor - to allow for other apps to be open at the same time - as folks do. The attachment shows two issues when the page first opened. However, on screen resize they disappeared. I have no idea why - go figure Laughing out loud (I think that's the current terminology).

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Lorraine,

The mysterious blue is coming from an image applied to the background. The color flashes are coming from using code like:
background: #345 url(xxx/image.gif) ...
to define the background for these boxes, so the flash of color you're seeing is the background color before the background image has been applied. I should probably change the color to #fff.

I haven't seen problems similar to the floating footer in the last image you sent other than while I'm making changes and testing things out. When I have seen it, it's either because I goofed somewhere (in which case the problem doesn't disappear) or I had an old version of the css file stuck in cache, but I can't imagine why resizing the window would fix that.

As for the 1px white line at the bottom of the colored box, I get that frequently but only with FireFox. That problem will go away if you resize the window which would kind of indicate it's a round-off error of some sort.

Aside from the psychedelic color show when the page loads, the columns are now all behaving themselves in IE6, yes?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

Quote:
the columns are now all behaving themselves in IE6, yes?

Er... no. Cache cleared - honest. All OK at 1024 but at 800 the Source Order Friendly goes to the bottom. It's as if it's suffering from lack of screen real estate - hint, hint. Wink

Can I go get my beauty sleep now Laughing out loud after one in the morning - we're on British Summer Time not Forum Time (GMT). I offer this link purely in the interests of self-preservation, you understand:
http://www.browsercam.com
It won't cover everything like the flash and such, but will give you a very fair static view of how pages look in various browsers.

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Thanks for all your help, Lorraine. I'll let you know when I get this fixed.

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 14 years 23 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

3-column layout in need of some browser checks

Question: if the footer were also defined as a snazzy box, would it continue to hold its text at this size as the other boxes do?

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

:-#

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

How large of a font size increase should be handled?

Tisnew wrote:
Question: if the footer were also defined as a snazzy box, would it continue to hold its text at this size as the other boxes do?

I don't see why not. The only issue would be providing for enough padding below the content for it. On non-IE browsers the footer will stick to the bottom of the content or, if there's not enough content to fill it, to the bottom of the window. That requires leaving room for it so it won't overlay anything. The padding could be defined in em units.

Still, the footer text only falls out of its box when the text has been enlarged 200%. That brings up the question of what a reasonable upper limit is. What should a layout designer accommodate? The attached image is of a page on a site that is well regarded in terms of design. The inset (overlay) is at normal size, the main image at 200% (3 size jumps on FireFox). Take a look at the orange horizontal nav bar.

Also, note the site nav bar at the top-right. It's (obviously) done with images which is the only sure way around these font resize issues (and that's probably why they've used images here). That takes away one of the advantages of CSS, though, and it leaves the reader with poor eyesight no way to read the menu text.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3-column layout in need of some browser checks

I'm sure it wasn't like this when I first looked at it, but your content is now busting out below your footer in FF on XP.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Tyssen wrote:
I'm sure it wasn't like this when I first looked at it, but your content is now busting out below your footer in FF on XP.

And it wasn't the last time I looked at it, either... CSS is like a bad joke sometimes!!! It works great as long as you don't actually use it ...

I've got my hands on an XP machine with both FF and IE6. I see what you're seeing on FF. As I wasn't seeing it on FF on my Mac I uploaded the latest version thinking that might fix it. Back on the pc, I brought the new page up and got the same problem but when I reloaded the page it went away. So I figured it had the old css still cached.

No such luck. I shut FF down, brought it back up and brought my page up. The problem was back, ... hit the reload button and it went away.

So..., is that a problem with my code or with FF???

At the moment, it appears to be working on:

    Mac OS X IE5 Mac OS X Safari 1.3
    Mac OS X FF 1
    Win XP IE6
[/]
Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

re: Accessibility

Paul
Wise not to use Dave Shea's site in a discussion about accessibility. His accessibility statement says the pages are *mostly* Bobby level A compliant and *mostly*WCAG A approved, complying with *most* Priority 1 guidelines. That is a very low level of accessibility, but the site is not about accessibility. You will note the site does not claim any A's, although it sports a "508".

In the policy he has made a special note about the FIR (text/image replacement) techniques employed and has pointed out these make portions of the site in-accessible to screen-reader users. It has been acknowledged for some time that FIR is useless for people who need larger text.

His CSS ZenGarden site has proudly proclaimed AAA for a long time. Accessibility gurus have long held that AAA is almost possible to attain. See this accessibility policy from such a person: http://www.autisticcuckoo.net/about/site/accessibility.php

The ZenGarden html contains several accessibility no-noes, there is even a broken link. Shea does not judge the exhibits on visual accessibility grounds before accepting them and all the validating links actually point to the home page not the exhibit - bit misleading that. Sad Shea accepts that claiming AAA is a bridge (or two) too far. But the site is a leviathan, a super tanker if you will that is now impossible to turn around mid-ocean. What would happen to the existing designs if the mark-up were to change - and it would have to change significantly?

You ask what text-size increase should be handled. Well that depends on the default size you have set in the CSS - a percentage increase on a start of 10px, is far different to the same percentage increase on say 16px.

Here endeth the lesson, but it is important to point out some of these issues before more misconceptions become enshrined in the content of web development sites.

ps: that Fx footer problem was brought to your attention several posts back Wink

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Quote:
Wise not to use Dave Shea's site in a discussion about accessibility.

I see your point. Mea Culpa.

Quote:
ps: that Fx footer problem was brought to your attention several posts back

Yes, I didn't forget, I just thought I'd already worked past that.

I did, by the way, give the columns a little more breathing room and the flashy light show upon page reload should be a little better.

As for the xp FireFox problem, I'm going to assume it's a bug in the browser as opposed to an incorrect style sheet. It validates, and it's only happening on this browser (actually, only this browser for this operating system).

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3-column layout in need of some browser checks

avDesign wrote:
As for the xp FireFox problem, I'm going to assume it's a bug in the browser as opposed to an incorrect style sheet. It validates, and it's only happening on this browser (actually, only this browser for this operating system).

That's quite a lot of users nowadays though.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

Same quote as Tyssen

Unlikely to be a Fx *bug* and there are many people on this board will say that, in no uncertain terms. More likely to be legacy code, left in there from experimentation.

Similarly with the flashing light show (in IE) which still declares itself as of about now. You have re-arranged the snazzy boxes left to right but you seem to have done little about the actual structure which causes the breaks in IE at 800x600 second text-size increase. Now it's the left snazzy box that disappears below the screen.

avDesign wrote:
Tisnew wrote:
Question: if the footer were also defined as a snazzy box, would it continue to hold its text at this size as the other boxes do?

I don't see why not. The only issue would be providing for enough padding below the content for it...
Not wishing to put speak for Tisnew, but s/he did post this remark immediately after mine with an attachment that showed how the snazzy box breaks top and bottom.

This thread has become far too convoluted now and I feel you are more likely to get further help from this forum if you isolate some of the issues then post to Layouts or Styling as relevant - explaining exactly what the issue is and what you have done to try to fix - with the outcomes of those fixes. Also point out the issues of which you are aware so that forum members don't go down a track pointlessly. Probably best to take it one issue at a time.

Oh and clear out that legacy code first - there's now't more frustrating for a responder than to be told "yeah, I knew that, just haven't got round to fixing it yet". Glad to read you've got your hands on a WindowsXP machine now Wink
Cheers
Lorraine

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3-column layout in need of some browser checks

The footer problem (increased text-size, <p> content escaping parent) is due to the height:50px; on the #foot. Change that to min-height:50px and the problem should go away. You can then add height:50px to your IE only hack for the footer.

I also see a problem in FF if I reduce the viewport width. FF doesn't provide scroll bars of sufficient travel to see the right hand side of the page. I suspect this is due to your use of position:absolute on the main layout regions (#head, #page & #foot).

The layout degrades for me in IE/Win at narrower viewport widths - first and temporarily at 762px then at <= 592px - when the left hand column can't be rendered in the expected float position. 592px isn't really that narrow. I suspect if you increase the gap between your floated elements slightly (0.3% is only 1px per 300px of width) IE will perform better. An alternate consideration may be to give IE/Win small negative margins (3px) along the inside edge of each floated element.

My other comments are:

  • I am dubious about the usefulness of sticking in * {position:relative} especially with your non-confidence inspiring comment Smile. Position:relative some times helps IE/Win to bring an element into the foreground which it (unexpectedly) renders behind something else. Normally a better fix is to put the element into hasLayout mode. Position:relative is most often used to establish a new display context for a descendent using position:absolute. It may be undesirable to have the display context on the parent rather than a more distant ancestor.
  • You shouldn't need to specify position:static for IE/Mac. static is the initial (default) value of position, used by all browsers when no value for the position attribute is specified.
  • Positioning #head, #page and #foot absolutely seems unnecessary. They should flow normally into the layout you have used. If you wished to have #main come before #head in your source order, you could consider using position:absolute on #head (and leaving space for it with a suitable margin-top on #page), but I think its unnecessary on your main layout elements as their source order matches their layout down the viewport.
  • If you do move away from position:absolute, consider using a small amount of padding-top/padding-bottom to prevent unsightly margin collapsing on your main layout elements.

[/]
avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Thank you (in order of appearance) Tyssen, Lorraine and Chris, for your help here. I think, as Lorraine so wisely points out, that both my code and this thread are a little on the unwieldy side at this point. It's time to get a fresh start on the layout and, should I have problems I can't solve, to address them in a new thread.

I've learned a lot here (mostly that I still have a lot to learn). My confidence in the original goal of this project has been battered a little but I still think an easily rearranged 3-column layout with column order independent of source order is worth the effort.

I had hopes of getting the absolutely positioned footer working acceptably but I'd been warned (elsewhere) that it was a lot of trouble for little reward. I believe it now, so I'll restart the design by dropping that. That gone, there's no need to absolutely position the #page container. Hopefully everything will get simpler by letting CSS handle the positioning of the major divisions on its own.

Paul

p.s., Lorraine, your mission regarding the value of this forum has been accomplished.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3-column layout in need of some browser checks

avDesign wrote:
I've learned a lot here (mostly that I still have a lot to learn). My confidence in the original goal of this project has been battered a little but I still think an easily rearranged 3-column layout with column order independent of source order is worth the effort.

You're almost there. Smile

Quote:
I had hopes of getting the absolutely positioned footer working acceptably but I'd been warned (elsewhere) that it was a lot of trouble for little reward. I believe it now, so I'll restart the design by dropping that.

I am not sure what your goal was with an absolutely positioned footer. If its to get a footer at the bottom of the viewport or the bottom of the page, whichever is lower, then thats pretty straightforward to achieve in a cross browser (v5+) manner without resorting to position:absolute. Search this forum for the many threads asking about footers for possible solutions.

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 13 years 12 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

3-column layout in need of some browser checks

avDesign wrote:
Lorraine, your mission regarding the value of this forum has been accomplished.

Then it was all worthwhile - even the late nights/early mornings. Sad
Hat tip to you, too, for taking it all on the chin. =D>

pandinus
Offline
Regular
Last seen: 13 years 4 weeks ago
Joined: 2005-07-13
Posts: 18
Points: 0

3-column layout in need of some browser checks

The footer doesn't seem to be placed right then the page is loaded for the first time. This has something to do with the loading of the images. I see you haven't given the images you're using any dimensions, this is what causing this on your page. Add the 'height' attribute and it should be fixed!

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

pandinus wrote:
Add the 'height' attribute and it should be fixed!

You're right! Thanks. I've uploaded a fixed version (in which I've also given the columns more breathing room).

I can't say this solution eases my mind much about css... In none of my 10 or 15 CSS related books do I find:

nobody I know wrote:
"If an absolutely positioned footer appears above the bottom of the content in FireFox until the window is resized or reloaded, then make sure all images in the footer div have heights defined in the HTML (not the css)."

Okay then ..., my 2 remaining problems (I think it's 2) are that:

1) in FF (xp or mac) the horizontal scrollbar on windows narrower than about 770px doesn't allow you to scroll all the way over to the right.

2) In IE6 with an 800x600 window the column containing the heading "Source Order Friendly?" slips down beneath its neighbors (i.e. it clears them) when the font size is increased.

I have no clue about #1 and I'm not going to do anything about #2 as that's just how IE handles the situation when a single word has grown too wide for its floated container. Other browsers handle it by allowing the over-wide word to cross over into its neighbor's territory.

Which is better? It all depends on how bad it looks when a word's allowed to overlay something outside its container. If that would make something unreadable, then I'd say IE is doing the right thing. If not, I'd prefer that it maintain the layout structure.

Of course the easy way to fix #2 would be to set the initial font size using a pixel value ...

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

Followup on previous post

I got the dysfunctional horizontal scroll bar in FF fixed. The problem was at the very top of the css file:

html, body, #page {
  height:100%;
  width:100%;
  min-width:775px;
}

The cause was the min-width line. Just relocating it took care of the problem in my case.

I also put a different version together based on an example you posted back in February, Chris..S. That's functioning without the absolute positioning of the footer (except on Mac IE5, a problem I'll save for another day ...).

Thanks for the example, though, Chris (and the for the suggestion to search for it).

Later,
Paul

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3-column layout in need of some browser checks

I believe IE/Mac has an issue with shorthand triplets for margins & paddings. Replacing the three margin triplets (#wrap_outer, #wrap_inner, #right) with four values (duplicate the second value as the fourth) should correct the issue - see updated example. If there are any other problems on an IE/Mac can you post a screenshot. I don't have access to one and can only do a basic check of pages using http://www.fundisom.com/g5/

avDesign
Offline
Regular
Northern California
Last seen: 14 years 18 weeks ago
Northern California
Timezone: GMT-8
Joined: 2005-07-11
Posts: 21
Points: 0

3-column layout in need of some browser checks

Chris..S wrote:
I believe IE/Mac has an issue ...

... Lots of issues! Laughing out loud

Screen shot is attached. The issues are: a) the left 2 columns are up over the header, and b) the footer is well below the bottom of the screen.

Mac IE5 is in a world unto itself. I try to get things workable on it and leave the "weird but harmless" things (like extra long or wide windows) be. On my 3-col example page, I have both vertical and horizontal scrollbars that I can't get rid of, the round-cornered boxes aren't round-cornered and, weirdest of all, are all pepto-bismol pink.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3-column layout in need of some browser checks

(a) should be fixed by altering the margin triplets into fours.
not sure about (b), maybe it doesn't like the negative bottom margins :?