29 replies [Last post]
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi folks

Bear with me even if this post looks long!

I don't have an external server to offer you a page to browse to, but the complete page code is attached. No java, no images, just plain vanilla css and html. It validates fine. In IE6, Opera 8.5 and FF1.07 it works OK (although, as usual, re-sizing in Opera the page height doesn't re-size). It uses NO clearing float thingies, and only one position absolute (to put the header at the top).

The footer should stick to the bottom. MAC IE will NOT give a full height page but should otherwise be legible. Adding content to the columns will push the footer down. Does it work for you? Especially need to know if it works in IE5.x PC, and all MAC and Unix browsers. With minimal and more than a page content, does re-sizing cause any issues. Version numbers of browsers would be great.

Why? I had a brainwave as to how to do the 3 column thing this morning - differently to how my tool does it, and need to see if I've gone mad Oups

Any and all help would be much appreciated. It will help me take site design forward by a giant leap :roll:

Thanks, thanks, in advance.

Trevor
PS, I know it has a little case of divitis, but that avoids any box model problems.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Great, can't believe you've done that to me Trevor I had just finished a similar layout last night born of the frustration of having a footer stuck bottom full height and needing the inner container to also expand to hold an image, I thought that I had solved the puzzle and was about to testcase it across browser and write it up; (works perfectly in IE6, FF) breaks apart in Opera but hadn't made adjustments for it yet. thought I was on my way towards the Nobel prize for CSS-P for a minute :roll:

Thought that I had renewed my flagging enthusiasm for CSS layouts and their problems and stumbled across something new, now totally deflated once more :mad:

I'll have a look at yours in Win IE5.5 when I get the box booted up.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Guru needs help! Code test on Mac and Unix, and IE5.x PC

IE5.5 screenshot attached.

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Beaten to it :roll:

However a static screen capture does not really confirm that layout works in terms of re-sizing!

In Win IE5.50 4807.2300IC SP2 :
the layout behaves as expected (congrats) with two small provisos as seen in Tyssens SC the header is shifted down 1 or 2 pixels showing the background columns but I see that the borders have a feint 1px ish line running across them at regular intervals , when re-sizing the window hori the momentary effect is for the columns to appear to break and then re-form on those lines but it's fleeting and you have to go fast to trip up the re-calculating, it's a minor point in an obsolete browser and nothing that would concern me unduly.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Hugo

Yup, measuring the effect in IE5.5PC, the screen height is correct, BUT, the content of the header is dropping, as it is in the footer. The footer and header div's themselves are in the right place. Just add a background to the #header and #footer and you will see that color for 2 pixels above the rows inside them.

As this affects both header and footer, I am going to guess that the contents of these are the problem for IE5.5.

The affected tags are:

.outer_horiz_border
#subheader1
and
#subfooter1

All of these have a height but only outer_horiz_border has overflow:hidden. I suspect that theother two need that two. So, here's a re-post of the html.

Trevor

None have padding or border, so the box model shouldn't be the cause.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Guru needs help! Code test on Mac and Unix, and IE5.x PC

It's Mac, not MAC. Even your PC has a MAC...

Anonymous
Anonymous's picture
Guru

Guru needs help! Code test on Mac and Unix, and IE5.x PC

wolfcry911 wrote:
It's Mac, not MAC. Even your PC has a MAC...
Hey! Picking on Trevor is MY job!!! Wink

Laughing out loud j/k

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

wolfcry911 wrote:
It's Mac, not MAC. Even your PC has a MAC...

Whoops, I though they could do with a promotion to all caps :twisted:

Anonymous
Anonymous's picture
Guru

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Doesn't properly resize on Opera (as stated above). Fails in IE/Mac and OMNIweb. See screenshots.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Hmm, the gap still appears, it's not a solution I favour but you could add this to fix it for IE5.5
* html #header {width:auto;top:-3px;t\op:0;}

It's another hack to cure a problem which I don't especially like given the fact that I'm not sure why it's happening and until I'm convinced that the reason isn't solvable I hate throwing hacks at things.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Hi

Did FF and Safari work OK?

IE Mac I knew would break! It's just too old and clunky I reckon.

However, fixed (I think) the footer position by changing the margin on the footer to margin-left:auto; and margin-right:auto;

I think the header needs clear:both maybe for the Mac.

Done both fixes and new file attached.

Is that v 5.1 of OminWeb?

Apart from the text size (ow), it has only made a mess of leaving space for the AP'd header that's at the top! I'll try adding top and left to footer to see if that kicks it into working. As it uses the same engine as Konqueror and Safari, it would be interesting to see what they do.

Trevor

Anonymous
Anonymous's picture
Guru

Guru needs help! Code test on Mac and Unix, and IE5.x PC

ClevaTreva wrote:
Did FF and Safari work OK?
Yep. Smile

ClevaTreva wrote:
Is that v 5.1 of OminWeb?
5.1.2

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Triumph wrote:
ClevaTreva wrote:
Did FF and Safari work OK?
Yep. Smile

Woohoo

Triumph wrote:
ClevaTreva wrote:
Is that v 5.1 of OminWeb?
5.1.2

As I suspected.

Did my fixes in the last post make any difference to omniweb or mac ie?

Trevor

Anonymous
Anonymous's picture
Guru

Guru needs help! Code test on Mac and Unix, and IE5.x PC

ClevaTreva wrote:
Did my fixes in the last post make any difference to omniweb or mac ie?
No. Sad

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Hugo wrote:
Hmm, the gap still appears, it's not a solution I favour but you could add this to fix it for IE5.5
* html #header {width:auto;top:-3px;t\op:0;}

It's another hack to cure a problem which I don't especially like given the fact that I'm not sure why it's happening and until I'm convinced that the reason isn't solvable I hate throwing hacks at things.

Hugo.

Hi Hugo

Thanks for the fresh set of eyes.

Unfortunately, the slash hack stops the header from going to the top of the page. I found a margin (L&R) of 1 pixel in the wrapper that may have caused the problem.

Here comes the revised file, all changes reverted to original!

Trevor

Edit: Paul O'Brien just told me of a bug in IE5.x that the   will cause overflow even if the overflow is set to hidden, So I've reposted it with his suggestion of font-size: 0px

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Guru needs help! Code test on Mac and Unix, and IE5.x PC

:? Odd it worked for me in IE5.5 -3px pulled it up and the escape slash re-set for IE6 but I probably missed something as was rather rushing, but as said don't like hacks to correct things unless one has explored the reasons for the problem which I couldn't see off hand, but that you seem to have found.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

And another fix is uploaded, reduced code (less divs)

See attached. Getting there folks!

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Just checked the latest version [edit] V.3 [/edit] and it still demonstrates the problem with the header in IE5.5, out of interest also checked in NN 8.0.3.3 and in FF rendering mode was fine but in IE mode was showing same problem :? but then NN seems a glichey little bugger as it won't switch back to FF rendering, confirming my long held hatred of all NN browsers as slow bloated and buggy.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Crumbs just finished downloading and checking V.3 and no sooner done than V.4 posted Shock Smile but that one has cracked it in IE5.5
no header gap , and Nitty Navigator 8 is fine as well (although now refuses to render in FF mode) POS.
What corrected the problem (too tired to examine code)

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Well

What I did was ...

Add font-size of 0px to the 1px high divs (didn't think that was necessary, can you try taking that out from the code here:

.outer_horiz_border, .sb_outer_horiz_border{
  background:#000000;
  height:1px;
  overflow:hidden;
  font-size:0px;
}

And see if I am right, it isn't needed?

Took out an erroneous margin:0 1px from the wrapper div

Took out the clear footer and header divs replaced with padding (long since removed the height decalrations which gave rise to their need anyway).

I'm off to bed.

Triumph asked for a copy of the php generator tool to play with, so he has that now too.

If this code proves stable, I'll roll it out into the tool, at the same time as I implement the option for variable height (instead of 100% min-height).

Can you remember a thread (here or where) where the changes to IE (for IE7) are listed?

What bugs (sorry, FEATURES) have they fixed.

What hacks will no longer work, and worse which ones will where we don't want them to! So I can mod the code ready for IE7.

Trevor

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Nope you were wrong Smile that is exactly what was wrong, IE reserving the line-height or overflow thingy. font-size:0; removed, problem re-appears, put back in problem goes. Chalk one up to Paul O'Brian.

And goodnight to all.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Hugo wrote:
Chalk one up to Paul O'Brian.

And goodnight to all.

Good one Paul. I'll add this in across the board!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

ONE LAST TIME (he hopes)

Hi Folks

I've now gone back to IE5.0 (more fixes)

Does this work in IE5.x MAC and Safari, OmniWeb, FF Mac?

Except for IE Mac, it should be full height, yellow header and footer, pink left and right cols, blue center. In IE Mac, the footer will sit below a few pixles of content (hopefully).

Here comes the link (as an attachment).

Remember folks, no Javascripts, no images, very few hacks, very low code weight on the page, content first, header last!

Trevor

Anonymous
Anonymous's picture
Guru

Re: ONE LAST TIME (he hopes)

ClevaTreva wrote:
Does this work in IE5.x MAC and Safari, OmniWeb, FF Mac?
IE/Mac screen shots:

Anonymous
Anonymous's picture
Guru

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Firefox/Mac

Anonymous
Anonymous's picture
Guru

Guru needs help! Code test on Mac and Unix, and IE5.x PC

OMNIweb

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Re: ONE LAST TIME (he hopes)

Triumph wrote:
IE/Mac screen shots:

Whoops, getting tired.

Forgot IE Mac doesn't understand this:

margin:0 auto or margin:auto

needs:

margin-left:auto;
margin-right:auto;

Fixed that.

Wonder why the color isn't there? Maybe it has a problem with:

background: #AAAAAA

and needs

background-color:#AAAAAA

I'll try that.

Thanks

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Triumph wrote:
Firefox/Mac

Added height:100% to the center div, hope it works, should do. This bug has been fixed in FF PC. (inheriting 100% heights).

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

Triumph wrote:
OMNIweb

Ah, that means omniweb is seeing a hack aimed at safari

Wonder why it doesn't like the font sizing?

Will remove the height 100% 's from wrapper (that's the pink bit).

So, here it is again. It should look like the safari screen shot you showed!

Trevor
PS the file is also on the server as before

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 40 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Guru needs help! Code test on Mac and Unix, and IE5.x PC

So

As has been pointed out to me, I ought to be putting units on 0 values in a strict doctype document, so I've added these. Go on, make me weep, break it:

Trevor