Frustrating glitch with box model

Freeway
1

Hi everyone

I have been working on a design which uses inline elements/box model and the example page below shows a strange white band above the footer which appears to position and size itself at the bottom of the browser viewport and changes when the window changes size.

The body div is set to flexible height which is when this problem occurs. As a workround, on the live site (www.golfplusdirect.co.uk) I have enclosed all the page elements into a main page div, set the page background within that div as opposed to on the page itself and also set the body div to fixed height which seems to solve it but I don’t know what causes it in the first place.

I think it’s due to an error on my part however I have played with all of the settings and I can’t seem to get rid of it.

I would really appreciate it if someone could have a quick look and let me know what I may be doing wrong. I’m happy to send the FW file if this helps.

I am using the latest version (6.1.1)

Many thanks

Mark

http://www.golfplusdirect.co.uk/new-site/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hey Mark,

Your specific issue has to do with where you’ve applied the background
image. Instead of the #PageDiv element (the “Page” section of the Page
Inspector) apply both color and image to the body element (the “Window”
section of the Page Inspector).*

Also, I am not sure if someone else is teaching this, but you do not have
to float all those top-level inline elements.

*Note to Softpress: I consider this an example of the DTP/UI paradigm
failure. It not only caters to ignorance, but fosters it.

–
Ernie Simpson

On Fri, Sep 27, 2013 at 6:01 AM, MarkSmith email@hidden wrote:

Hi everyone

I have been working on a design which uses inline elements/box model and
the example page below shows a strange white band above the footer which
appears to position and size itself at the bottom of the browser viewport
and changes when the window changes size.

The body div is set to flexible height which is when this problem occurs.
As a workround, on the live site (www.golfplusdirect.co.uk) I have
enclosed all the page elements into a main page div, set the page
background within that div as opposed to on the page itself and also set
the body div to fixed height which seems to solve it but I don’t know what
causes it in the first place.

I think it’s due to an error on my part however I have played with all of
the settings and I can’t seem to get rid of it.

I would really appreciate it if someone could have a quick look and let me
know what I may be doing wrong. I’m happy to send the FW file if this helps.

I am using the latest version (6.1.1)

Many thanks

Mark

http://www.golfplusdirect.co.uk/new-site/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Mark,

The quickest solution would be to remove the float from each of the top level items (topDiv, headerDiv, etc etc). They don’t need to be floated because they’re in one fixed width column, not positioned side-by-side. You’ll also need to change the height of the page from height 100% to min-height 100%.

If any of the items did need to be floated (i.e. if you wanted one row to have two columns without a container item) then you’d could use the Auto Clearfix Action to clear the floats and force the parent item’s height to be increased (floated items are taken out of the normal flow and therefore don’t, by default, cause the parent item to automatically increase in size to fit the contents): Auto Clearfix - ActionsForge

Other options for clearing floats include adding a dummy item after the floated content and applying a clear of both to it (this is generally frowned upon because it’s adding unnecessary markup to the page) and applying a hidden overflow to the parent item (which prevents any child content from appearing outside the bounds of the parent item).

Hope this helps.
Joe

On 27 Sep 2013, at 11:01, MarkSmith email@hidden wrote:

Hi everyone

I have been working on a design which uses inline elements/box model and the example page below shows a strange white band above the footer which appears to position and size itself at the bottom of the browser viewport and changes when the window changes size.

The body div is set to flexible height which is when this problem occurs. As a workround, on the live site (www.golfplusdirect.co.uk) I have enclosed all the page elements into a main page div, set the page background within that div as opposed to on the page itself and also set the body div to fixed height which seems to solve it but I don’t know what causes it in the first place.

I think it’s due to an error on my part however I have played with all of the settings and I can’t seem to get rid of it.

I would really appreciate it if someone could have a quick look and let me know what I may be doing wrong. I’m happy to send the FW file if this helps.

I am using the latest version (6.1.1)

Many thanks

Mark

http://www.golfplusdirect.co.uk/new-site/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Hi Joe and Ernie

Well, that’s done the trick! Thank you so much for your help.

No more floating top-level inline elements :slight_smile:

Thanks so much guys, I’ll apply this to the main live site in due course.

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

… I furthermore tend to recommend an overflow: hidden to the footerDIV (or a higher z-index for the body) which would avoid the overflown top-shadow (unless this is wanted, who knows :-).

And if you finally wrap your head around the absolute positioned header and footer items - I’d say:

Well done man - this is the crazy fantastic inline-world.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Thanks Thomas, yes the shadow is deliberate! :slight_smile:

I agree with the absolute header and footer positioning and I have used it on some designs.

Thanks for all your advice, and in general, I have learned a great deal from the fantastic advice and support on this forum. It’s one of the things that makes using FW so rewarding.

Cheers

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options