/    Sign up×
Community /Pin to ProfileBookmark

Need help putting footer in the right place

Copy linkTweet thisAlerts:
Dec 15.2009

Hello,

I have a web page with a header, navpanel, datapanel and footer. I would like the footer to show up below any navpanel/datapanel content but I cannot get it to show up in the right place. The datapanel needs to have position:absolute (I needed to do this to avoid the float drop problem in IE)

Here is the url —

[url]http://pebbles.stonewatercontrols.com/test.html[/url]

The footer is the copyright text in red bold.

Any ideas as to how to fix this? Thanks!!

to post a comment
CSS

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@skywalker2208Dec 15.2009 — Steer clear from using using top, left, right and position. If you want to line things up next to each other use float. If you use float: left on both datapanel and navpanel and remove any instance of top, left, right and position in those two class then add clear: both to your footer class it should work fine.
Copy linkTweet thisAlerts:
@webuser123authorDec 15.2009 — Thanks for the response, I originally had it all as floats but then the datapanel would drop if the browser window was resized or if the content spilled out of datapanel. The only way to solve it in this case was to use position: absolute, left, top, etc on the datapanel...I can get the footer to show up correctly if I use relative positioning with floats, etc. but not with absolute on the data panel.
Copy linkTweet thisAlerts:
@skywalker2208Dec 15.2009 — Try setting margin-left: 19% on the class datapanel. Make sure to remove position, left and top from the datapanel.
Copy linkTweet thisAlerts:
@javawebdogDec 16.2009 — Suggestion:

Since your use of floats is related to the 'drop' problem in IE you might want to consider overcoming the problem by: 1) defining the datapanel width in the css file as a percentage (of the viewport), or alternatively 2) a javascript that onResize() resets the datapanel width attribute a integer value derived by calculation [% desired/widow.screen.width].

My personal choice is to work in css using the percentages approach.
Copy linkTweet thisAlerts:
@webuser123authorDec 16.2009 — thanks for the tips javawebdog.. it turns out that if I give margin-left in the datapanel, then the div itself doesn't drop on resize but the content drops to the level where navpanel ends .. here's the url again --

http://pebbles.stonewatercontrols.com/test.html

any ideas as to how to fix this? simple changing the navpanel height to 100% doesn't fix it.. especially when the content in the datapanel is more than 100%
Copy linkTweet thisAlerts:
@webuser123authorDec 16.2009 — Try setting margin-left: 19% on the class datapanel. Make sure to remove position, left and top from the datapanel.[/QUOTE]

thanks skywalker.. this actually worked in positioning my content correctly and on resize it doesn't drop the div but drops the 'content of the div' right below where nav panel ends ( that is, the top of the table in the datapanel div is in line with bottom of the navpanel div) ..any idea what might be causing this? thanks!
Copy linkTweet thisAlerts:
@javawebdogDec 17.2009 — I have looked at your page.

I don't understand what you driving at.

When I resized the browser (both IE7 and FF 3.5.6) it worked well .... but

In IE the table is centered in the datapanel div (default IE behavior).

In FF the table is aligned to the left in the datapanel (default FF behavior).

You should address table placement explicitly in the css file to insure cross-browser display consistency. Perhaps #datapanel table{text-align:left;} or #datapanel table{tex-align:center;}

In the generated html I see you are using the nowrap="nowrap" html tag in most, but not all, of the datapanel table cells. This is deprecated and should be replaced with <td style="white-space:nowrap"> or you could update the css file to td.tdnormal{white-space:nowrap;} or .tdnormal{white-space:nowrap;}.

[see http://www.w3schools.com/TAGS/att_td_nowrap.asp]

If you are having a problem with the datapanel 'cutting' off the datapanel display at any point you should look towards controlling the overflow attribute for the datapanel div. Perhaps update your stylesheet with something like: #datapanel {overflow:auto}

[see http://www.w3schools.com/Css/pr_pos_overflow.asp].

Testing to be sure everything is being shown is a difficult with the data values you are showing. If you are using a function of some sort to create and populate the table you might consider adding a counter and then adding an integer to each cell value (data0, data1, data2 .... datan ) to make tracking the display easier on yourself.
Copy linkTweet thisAlerts:
@webuser123authorDec 17.2009 — Thanks for the response.. I guess we are seeing different results then.. I just added more columns to the page..in IE do you see that the top of the table in the datapanel is lined up with the bottom of the navpanel? I see the same behavior in IE 6 and 7... it's more of a content drop than a float drop in my opinion..
Copy linkTweet thisAlerts:
@javawebdogDec 18.2009 — I downloaded all you .css files and the html page.

Ran them locally on an IIS local server.

Behaves perfectly in FF.

Misbehaves in IE.

When I eliminated colums of data that pushed table beyond the right edge of the viewport the content drop down disappearred. (It does not do this in FF regardless of how many columns of data are present.)

So I am proposing that the issue is how IE implements the box model in css.

Not at all sure what the work around is at this point. Will do some experimentation and let you know.
Copy linkTweet thisAlerts:
@javawebdogDec 18.2009 — You have several nested divs, in particular two outer divs: maincontent and contentwrapper. (contentwrapper is a redundant and unnecessary)

1) FF allows content to horizontally overflow divs, but IE does not.

2) The default width of a div is the width of the viewport at any moment or to whatever explicit value you set it. Setting it to 100&#37; sets it 100% of the viewport, not 100% of the generated content width (that is how wide is the space needed for datapanel).

You had the width of maincontent and contentwrapper set in default.css to 100% which created a view restriction IE was enforcing.

You had contentwrapper defined in default.css as display:none but in the html code as display:block ... why?

I set the width for maincontent (in defaut.css) to 2000px to accommodate the columns.

I set the width for contentwrapper and datapanel to 'inherit'.

It solves the dropdown issue but will leave new challenges for you to address.

I also made some minor revisions to default.css regarding the footer.

Attaching both files.

Good luck.
Copy linkTweet thisAlerts:
@javawebdogDec 18.2009 — Once more into the valley ...

[upl-file uuid=dae33faa-2c65-47a4-8c47-37152ae041fd size=3kB]pebbles_revisions.zip[/upl-file]
Copy linkTweet thisAlerts:
@webuser123authorDec 18.2009 — thanks javawebdog! The original webpage had some dojo panels in it.. contentwrapper and the display:none attribute, etc are all for fixing certain issues that cropped up in IE with the dojo panels.. there's a flicker in IE so the content needs to be hidden first and then some javascript is run after loading the page that turns it to display:block..


yeah, I had a feeling that it had to do with the width restriction on the page.. 2000px def. solves the content drop problem but the page shows the horizontal scrollbar even when data isn't spilling out of the view port. I think it's just a shame that IE doesn't allow content to overflow horizontally the way firefox does..

I do have a solution working with the datapanel positioned relatively with a container content panel absolutely positioned.. am trying to figure out if I can dynamically resize the relative positioned datapanel (black box) to the absolute positioned content (red box on the right)


http://pebbles.stonewatercontrols.com/test5.html
Copy linkTweet thisAlerts:
@javawebdogDec 18.2009 — I see what you have done.

Anything in the DOM can be manipulated IF possesses the attribute to be managed AND is addressable.

Add unique id="<somelabel>" to each of your divs.

Then you can use an after onload javascript to capture the generated/rendered dimensions of specific elements (divs) and use that info to reSize another element (div).

You will be monitoring two events in particular: onload and onResize to get what you will need and then act on it.

Good luck.

BTW: if you don't have the Web Developer toolbar installed for FF I strongly recommend it. Lots of ways to get insight to what is going on the page, particularing using the 'Information' button (as well as others).
×

Success!

Help @webuser123 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...