3 replies to this topic

[gp_etomite]

Hi, when I first implementing Mollio templates to a site I was working on, I visited many sites that used the Mollio templates and notice one common thing, that everybody seems to have footer problem.

I have made the Type E template floated so that it fixes footer problem and couple other issues, and would like to share it with Etomite community.

Basically this is a light version of Mollio template, I removed unused divs such as those for Type A, C, D & F and the divs for form. I also make the Doctype XHTML 1.0 Strict and have fixed the validation errors for searchsite' form.


Change log is inserted in CSS file.

/*
1. moved footer background image from body to #footer
2. repeat #header's background image in body selector to solve the max-width that is not supported by IE browsers.
Note: for this template, a separate background image (Etomite logo) is used. A span class (#header span) is added for accessible concerned.
3. changed properties in #type-e #content
4. made #utility floated right so that footer stays at the bottom on all pages.
5. removed 'p' from /* TYPOGRAPHY *ul, ol {margin: 0 0 1.5em}/ - further testing showed that margin-bottom of 1.5em creates a bit of problem in footer in Gecko' browsers. Tried to set #footer p {margin-bottom: 0} didn't solve the gap in #footer.
6. in regard of number 5, you can always add #content p {margin-bottom: 1.5em} /*padding may work better though, for example, I used
#content p {
padding: 10px 25px 10px 25px;
}
7. add a #ho_nav to wrap up Molliio main menu

8. in html template file, move the footer tag to the very bottom, so that it's not wrapped inside the #wrap.
9. Make the template XHTML 1.0 Strict; fixed the validation errors for search form
10. removed unused divs.
11. add a conditional comment for IE and is placed in IE_or_less.css file

*/


You can see the demo here:
http://eto.marinersq.com/index.php?id=127

Footer will stay at the bottom regardless which column is longer.
see example from this page:
http://eto.marinersq.com/index.php?id=14

Browsers tested
PC: IE 6, IE 7 Beta 2, Firefox, Opera
Mac: Safari, Firefox, Opera, Camino

p/s. The Etomite site will move to its own server in a day or two. If you like me to keep the demo, please let me know.

Download from here

 Mollio_floated.zip   70.16K   168 downloads

gp

[mikef]

While the footer may stay in the same place, I find that it still messes up the menu badly in IE6 and slightly in Firefox 1.07 as you shrink the width. (the original Mollio does too)

[gp_etomite]

mikef, on May 22 2006, 10:07 AM, said:

While the footer may stay in the same place, I find that it still messes up the menu badly in IE6 and slightly in Firefox 1.07 as you shrink the width. (the original Mollio does too)

Mike,

You can change the 'auto width' to fixed pixel in

#ho_nav {
width:780px; /* change from auto to fixed pixel */
}

This will solve the problem however it also creates another problem, say, if you have many menu tabs and the total width exceeds 780px, then then last menu tab will get cut off. There simply no a good solution. Another opton is to make each menu tab fixed size with a fixed width for #ho_nav, this way no matter screen resize or font size enlarge or deduce, the men elements wont' get affected.

The max-width is 1200px, you may also choose to make the ho_nav' width 1200px, however when screen resize, you will see horizontal scroll bar though; on the other hand, this maybe a better workround as it won't affect site's performance.

Cheers,

gp

[mikef]

gp_etomite, on May 22 2006, 12:10 PM, said:

You can change the 'auto width' to fixed pixel in
#ho_nav {
width:780px; /* change from auto to fixed pixel */
}
This will solve the problem however it also creates another problem, say, if you have many menu tabs and the total width exceeds 780px, then then last menu tab will get cut off. There simply no a good solution.

Thanks, probably the simplest pragmatic solution. Most sites don't see frequent changes in the number of top level menu items.
I'm only using the Mollio templates on two sites at the moment, both liable to change as they are the EtoGal test site (currently also used as the demo site) and one that will eventually be the EtoGal demo site. I'll try using a fixed width for the menu later on the demo site, once the content is settled, as that won't change frequently between EtoGal releases!

edit
Its probably best specified in 'em's rather than px though, to allow scaling if the reader changes the font size

Edited by mikef, 22 May 2006 - 11:31 AM.