Heres one I have never seen before, I am ripping a site out of Joomla for a client and doing a tableless layout. A tough layout because the Joomla template was really heavy tables so I had to make some minor changes to how the site looked and got the main page working, then started on the inner pages. That’s when I noticed the issue.
The ul that is the footer menu ‘floats’ (not a CSS float btw) in the middle of the page running through the right side bar. I have tried every type of clear I could think of in a million different places and I can not get this silly thing to drop down to where it belongs.
The test site is http://clicktoinvite.com and it’s password protected so the search engines don’t find the content (user: test pass: test)
I will say I had to do some ‘non normal’ floating and positioning on this one to make it work properly, stuff I would normally not do in one of my layouts but the client, while allowing some changes for ease of coding, still wants to site to look pretty much like the Joomla one and I also had to attempt to fix a nasty sideways scroll bar at 1024 resolution (on the old layout)
The code in question is towards the bottom of the page at the end of the wrapper div … you will notice a 1px high clearing div there right now, my last futile attempt to push the l_menu ul down to where it belongs
First, if I was required to make a site look exactly the same but was removing tabled nastiness, I’d chuck everything and style 100% my own css…
however I’ve heard Joomla’s a b**** to style.
Anyway I took a look at Parts&Supplies>order terms/conditions
What I saw was:
around the stuff in the sidebar you have a box called “wrap”. If you give #wrap an ugly background colour, youll see that #wrap is not enclosing the contents… so I didn’t look, I’m assuming those ul’s are floated. “We also make teeth for your special requirements.” That ul.
So I’m thinking if you could get your containers in the sidebar to “enclose” its floats then your footer should be able to have clear: both on it without even that clearing div you threw in there to test… because the footer will know who he’s clearing. Right now I think he’s clearing those boxes like #wrap, and those boxes aren’t holding everything inside them.
You seem to already know about float clearing but I don’t know how much you know about float enclosing? And this is after a quick look… this seems like the obvious problem. It might not be.
Once you have determined that #wrap contains all its contents visually in the browser (and other boxes too like #sidebar and any other boxes with floats in them), if your footer still isn’t managing to stay below, let us know.
hmm, according to my element inspector wrap is enclosing everything in the side bar the order is
sidebar > wrap (this is to mimic an effect from the old layout) > elements
Edit:
wrap does not enclose the sidebar div … it is within it only to mimic something that was in the old layout. The guy had multiple bg images applied to an incredible amount of individual elements that made no sense whatsoever so I made one image for the top part and then used the wrap to extend the image since it could not be tiled
the reason it looked suspect to me was, in the HTML code, #wrap does enclose all the elements in the sidebar on that page. But visually it was stopping after the image… or after some text under the image. And that looked like a prime suspect.
(if I may post some code)
<div id='sidebar'>
<div id='wrap'>
<p id='date'>Sunday, February 7 2010</p>
<p id='featured'>Features of Our Conditioners</p>
<div id='inner_side'>
<img src='/images/patent_sm.jpg' width='240' height='350' alt='out conditioner patent' />
<p><strong>Charlie's patent from 1983, our conditioners are still the best in the industry:</strong></p>
<ul id='side_details'>
<li>10 1/2" to 22" wheels ensure better flotation for different track surfaces. The extra weight firms up the base below the cushion and provides a more consistent base.</li>
<li>4" to 8" back-up plates support the teeth and give 33% more clearance for material to move through the track conditioner.</li>
<li>Larcom & Mitchell track conditioners are available in 8'3", 10'4", 12' and 13'3" widths. Custom widths are also available.</li>
<li>The hydraulic lift cylinders raise the track conditioner for transport and also control the depth of cushion with cylinder stops.</li>
<li>We also make teeth for your special requirements.</li>
</ul>
<p> </p>
<p> </p>
<p> </p>
</div> <!-- end inner side div //-->
</div> <!-- end wrap div //-->
</div> <!-- end sidebar div //-->
I see what you mean in one way but sep is not part of the sidebar. What’s weird is using the FF developer toolbar I am not seeing #wrap stop where you are. Odd to say the least (and irritating me big time)
Well I have to admit I never checked with Firebug or anything… I use Aardvark pretty much for this kind of thing… checking if containers are not wrapping kids like they should, or, Aardvark also seems nice for other people’s pages when they use weird positioning because AV seems to often show the original box and not the generated box with relative positioning.
I’m a bit reluctant to offer to try it myself because it’s almost bedtime and I had some really nice whisky : )
I see what you mean in one way but sep is not part of the sidebar.
No, but it seems to be the “lowest” thing the footer/ul sees. I believe still that if #wrap (or even #sidebar maybe…) enclosed the children of the sidebar, then the sidebar in its entirety would be able to push the footer down. Your page might be freaky but it seems like your footer simply can’t see the sidebar. It seems to see “sep” and if “sep” were gone it would prolly see the maincontent next (since it’s longer than where I see #wrap ending) but you could also make another page with no maincontent and just the sidebar. Then you could play around with the sidebar alone and see if making #wrap (or #sidebar) enclose the children makes a difference or not.
I mean, if you threw overflow: hidden on #wrap just for the lawlz, does anything help?
That chops sidebar content off in the middle of the image and on that note since you mentioned the sep div when I do this (the overflow hidden on #wrap) it chops it off about 200px above the end of sep and maincontent
That chops sidebar content off in the middle of the image and on that note since you mentioned the sep div when I do this (the overflow hidden on #wrap) it chops it off about 200px above the end of sep and maincontent
Hm, that’s VERY suspicious. Wrap shouldn’t be able to chop anyone off, not with the HTML I saw! Chopping the sidebar off in the middle of the image fits with my posted image (where Aardvark thinks #wrap is ending). Overflow on #wrap normally should not be able to have ANY effect on the other boxes like maincontent or sep.
I guess this will take some actual deep investigation then. There’s clearly goofiness afoot!
But it’ll have to be tomorrow for me; if it’s really nothing going on at work I might be able to make a copy of a page at lunch and play around with it. Ryan’s usually faster at that kind of thing because he knows how to use all the fancy developer tools, lawlz. But I can’t imagine that there’d be good code if you’re trying to “literally” covert the tabled site over to a divved site. Will it be easier to continue on with what you currently have?
I mean, as opposed to scrapping everything and making everything as simple as possible?
If this is close to being almost done then it’s not worth it to go changing stuff wholesale. Or if you’ve spent a whole lot of time on it.
You mentioned in your first post that because of this site’s history, you have a lot of weird stuff going on. That’s normally something you’d want to avoid for maintenance reasons etc. But if it was the only way to get this done the way your client wanted then ok.
Just wondering.
In any case if most of your problems are this footer issue, I suspect there’s a single solution to it and all might be good.
Innerside is the direct child of Wrap and has Stuff in it. But it has a set height on it-- this RESTRICTS IT!!! You may have had a good reason for setting this height, so maybe on some page you need a min-height? But look:
Don’t worry, I has a robots.txt on my server and I can delete this when you’ve seen it.
WHen I added overflow:hidden; nothing was chopped off for me, so you had to have added something in the middle of me playing with it :)…I guess Stommes suggestioin will work.
hmm, didn’t know that height would effect the outer div at all but yes removing the height does stop the problem … many thanks
I honestly don’t remember why I put the height on that, as I said before attempting to rip the design out of Joomla, and a tabled design at that has had me banging my head on the desk more than I care to admit and even more aggravating is the fact I had no PSD to work with. Some of the re-creation of the site had to be done by taking screen shots of the old site and dropping them into Photoshop to get what I needed! :headbang:
Thanks to both of you, I would have NEVER thought of removing that height but I’ll remember it the next time I try something like this.
hmm, didn’t know that height would effect the outer div at all but yes removing the height does stop the problem … many thanks
What confuzled me is, the height of some inner box shouldn’t have been able to affect the outer boxes… and I saw that #sidebar was floated so it should have been able to contain the list. But everyone seemed to stop at the inner box’ bottom. I have no clue why.
