Clearing problem

[jonathanscary]

Hi

I'm working on a page at the moment at:

http://www.nexbridge.co.uk/articles.asp (http://www.nexbridge.co.uk/articles.asp)

(Horrible colours to highlight divs!)

I've used a simple javascript to open and close the menus on the left and I'm having a problem with clearing.

In IE, if you click on the support menu item at the bottom of the side nav, the footer moves down below the left hand column, but in Firefox it stays put and the menu overlays it (not what is wanted).

I've used a clearing div to try to force the footer under the left navigation column, but it doesn't seem to affect it. I'm really struggling to discover what I'm doing wrong.

http://www.nexbridge.co.uk/css/style-main.css

[jonathanscary]

Is this baffling everybody or does my post look too long because of the stylesheet?

:confused:

[ronaldb66]

It is rather lengthy; thank god for scrollbars!

Since you have your page online anyway, you could suffice with links to both the page itself and the style sheet; that'll save you the trouble of cutttin-n-pastin the entire style sheet, keep the post nice and short, and enable people to open up the style sheet if they feel the need.

Anyway: I can't check in FF, but I don't really see an immediate problem; it should suffice though to "clear: both" the footer div itself instead of adding another empty div.

Hang on: why are you floating the leftblock divs, too? Can't they remain in the normal flow? It looks like their container collapses because it only contains floated elements (which it should do; FF is correct on this point).

Can you indicate which element serves as a container for everything "left"? I'm a bit lost...

[jonathanscary]

Sorry about that - I'll remember next time.

everything left is the #nav id.

[ronaldb66]

... which is floated, too, and thus shouldn't cause any problems. :confused:

Humor me, and slap a border on that #nav div so you can see what happens to the dimensions. By the way: do those two leftblock divs do get pushed down when you open a menu?

[jonathanscary]

Hi ronaldb66 - took the float left out of #leftblock, but that didn't fix it. I'm adding a border / bg colour to #nav now.

[jonathanscary]

added another lovely green to the footer too, so you can see that clearly!

[ronaldb66]

Gorgeous. As expected, IE shows everything fine.
You could try to take the floats of the two leftblock divs, and for good measure clear those, too; that should all work, but by now I'm running out of ideas fast.

By the way: how does the nav container look on FF? On IE, the orange background stretches all the way to the bottom of the lower leftblock div, expanded menu or not.

How do you toggle the sub menu display?

[jonathanscary]

OK, first of all, many thanks for looking at this - really appreciate your time.

I've removed float left and added clear both to .leftblock (no joy) :(

The orange background on #nav extends to the end of the the grey block (Econsole here) in FF as well.

jonathan

[jonathanscary]

sub menu display is toggled using javascript linked below:

http://www.nexbridge.co.uk/inc/menu.js

but then I realise when you link to a .js file you'll get alerts about security, so I'm pasting the text below:

/***********************************************
* Contractible Headers script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Mar 23rd, 2004.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="off" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent {display: none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+"|"
inc++
}

document.cookie=window.location.pathname+"="+selectedItem
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined"){
document.cookie=(get_cookie(uniqueidn)=="")? uniqueidn+"=1" : uniqueidn+"=0"
firsttimeload=(get_cookie(uniqueidn)==1)? 1 : 0 //check if this is 1st page load
if (!firsttimeload)
revivecontent()
}
}


if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

[jonathanscary]

I've added some mor colours which might help clarify

#mainwrapper is yellow
#columnswrapper is green

jonathan

(I just hope the client doesn't drop by for a look!)

[ronaldb66]

Sorry; I have to leave you to someone with another browser then IE, 'cause I'm stabbing in the dark here. Maybe I'll give it another try tonight at home, where at least I have Mozilla!

[jonathanscary]

Thanks for your help - it really is appreciated.

[jonathanscary]

link to stylesheet:

http://www.nexbridge.co.uk/css/style-main.css

as I've implemented changes so I deleted the stylesheet code above and added a link as suggested by Ronald

still can't figure it out. could it be because of the javascript?? :(

jonathan

[jonathanscary]

Updated to clear floats using the Alsett clearing method, but STILL no luck. I'm tearing my hair out!!

[jonathanscary]

I added a few more items to the #nav div to see if the problem was there even without the menu (and it is) to that rules out the javascript.

[jonathanscary]

For simplicity I've added a link to the original page from Charles Wyke Smith's "Stylin' with CSS - A Designer's Guide" on which I based the three column approach. I've not added anything to this page other than to replicate his navigation items so that the left column is the longest. In the source code you'll see he says:

"This example also uses a floated wrapper around the three columns - this forces the wrapper to enclose the three columns so that the footer is always below whichever column is longest."

http://www.nexbridge.co.uk/8.29.htm (sorry about the missing images).

BUT this doesn't seem to work in FF either (though I'm sure I read in the book that it should).

All the style stuff is on the page, so it's easy to access.

jonathan

Where am I going wrong??? :confused: