MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
 ·Earthlink Cable Mo..
| Anyone up for a site check?
I'm updating the web site for the lab where I work. My aim is to be standards compliant as much as possible and to do the layout in CSS, the way it oughta be, but it's a bit of a struggle. In particular, I'm having trouble with the footer, which I would like to be at the bottom of the container div (at the bottom of the viewport or further down, depending on the amount of content.) I've been googling, and I keep finding articles that say "footers are hard, but I've found the solution!" but none of it seems to be working for me so far. No matter what I do, giving it "position: absolute" leaves it sticking in the same spot on the page. I don't mind the pseudo-frame effect I get with "position: fixed" but I gather some browsers don't like that. BTW, the html validates, and the css would validate if not for a couple of hacks for IE. 
I'm developing this on a Mac and only have sporadic access to PCs at the moment (all the PC users have laptops that they take with them everywhere) so I'd appreciate some feedback from PC users. Last time I checked last week, the site rendered OK in FF/Win but the layout got munged in IE. I worked on it over the weekend and changed a few things and I'm hoping that's taken care of the IE issues.
My test server:
»ctpid-2.mit.edu/~terra/
I know the site is a bit plain at the moment. It's very much a work in progress, and the near-term goal is to put up a site that is functional and has up-to-date information. The current "live" site hasn't been updated in four years and the look-and-feel screams 1999. 
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
javaMan
Premium,MVM
join:2002-07-15
San Luis Obispo, CA
| What I'm seeing with IE7 is everything spread out across the page with a big white blank area on the left. The brown sections start about in the middle of the page and the menu is spaced in the middle of the white space to the left of it. There's a lot of free space floating around. If by footer you mean the brown section, it renders properly at the bottom of the page.
--
Woe unto them that call evil good, and good evil; that put darkness for light, and light for darkness. . . Isa. 5:20 |
|
MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
·Earthlink Cable Mo..
| I got a co-worker to look at it in IE7 here, so I know exactly what you mean. The "meat" of the site should be centered and take up 80% of the width of the browser window, including the header and footer, which are inside of the container div so I don't understand why they got shifted off to the right like that. Also he didn't get any scrollbars on the pages with longer content, which is weird since overflow is set to visible.
I'm starting to think I should just do a separate style sheet for IE and refer to it in a conditional comment in the html, but first I need to figure out what's going wrong so I can correct it. Really cheeses me off, because this works in the standards-compliant browsers I've tried.
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
johnnyboyct
join:2003-06-11
Newington, CT
·Cox HSI
| reply to MsTerra
I would really consider taking those email addresses off the site and making a contact form. Just make a drop down with each person/dept or whatever. Spam sucks  You should also consider making the current pages link in the nav be a different color.
I like the logo and its sooooo nice to see standards compliant sites
--
Connecticut Web Design and Development |
|
jayco437
Premium
join:2001-08-11
El Paso, TX
 ·AT&T Southwest
| reply to MsTerra
»ipinfo.info/netrenderer/index.php
To test in IE if you don't have it installed.
I didn't peruse the source extensively, but try for the container:
width:auto;
margin-left:10%;
margin-right:10%;
That should center your container div and give it equal space on the left and right (I think....I think theres an easy way I used to do it that works in all browsers but I can't remember exactly now). |
|
tao
Chaos Impends
Premium
join:2000-12-03
Lansing, MI
·Comcast
| reply to MsTerra
Magnified from site | 
In Photoshop??? | |
said by MsTerra  :In particular, I'm having trouble with the footer, which I would like to be at the bottom of the container div (at the bottom of the viewport or further down, depending on the amount of content.) This reads like you want two different things. What you have is the footer at the bottom of the container div. If you want the footer to always be at the bottom, then it must come after the main, not last in the main.
You might find that making your divs 'inline' will fix the IE issue.
You did not ask but your logo looks dirty on my screens. When I magnified the image (3x shown above), I see colors other than black. When I look in Photoshop, I cannot tell what you have done, but I can tell why the image looks dirty.
--
I play darts: www.triple20dartingsupplies.com | www.adaoflansing.com
I support unions: www. 1009aldrivers.org www.1039atu.com
|
|
Tenar
join:2008-01-02
Midland, ON | reply to MsTerra
Is the scrolling intended? |
|
MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
·Earthlink Cable Mo..
| reply to tao
I've tried putting the footer after the container div. It seems to behave the same whether I have it inside or outside.
We're not wedded to the logo. This is something someone in the lab put together years ago. I've been rooting around for a copy of it that has a high enough resolution that I can rework it, but what's there is what I have to work with at the moment.
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
·Earthlink Cable Mo..
| reply to Tenar
You mean the scrollbar that's always there whether or not the content exceeds the viewport height? That seems to be an artefact of my trying to make the footer work the way I want. According to all the methods I'm looking at, body and html need to have height: 100%, but when that's specified in the style sheet I get the constant scrollbar. If I comment it out, the scrollbar only appears when needed. I'm starting to think that footer may be more trouble than it's worth for now....
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
Tenar
join:2008-01-02
Midland, ON
| said by MsTerra :You mean the scrollbar that's always there whether or not the content exceeds the viewport height? That seems to be an artefact of my trying to make the footer work the way I want. According to all the methods I'm looking at, body and html need to have height: 100%, but when that's specified in the style sheet I get the constant scrollbar. If I comment it out, the scrollbar only appears when needed. I'm starting to think that footer may be more trouble than it's worth for now.... You'd have a lot easier time just having a conventional footer that appears at the bottom of the rendered page rather than trying to keep it at the bottom of the browser window.
I'm not a fan of these type of designs. They break away from how a user expects a page to act. If the footer information is so important it has to display all the time, I can't understand why you would put that information in a footer in the first place and not at the top of the page.
You can make this design (as it is now) without any hacks if you just have a conventional footer. |
|
MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
·Earthlink Cable Mo..
| I'm trying to make a "conventional footer," but it's not working for some reason I haven't been able to figure out yet. Absolute positioning seems to fix it to a particular spot on the page, relative and static positioning seem to send it to the top of the page under the header. I know it sounds back-asswards, but the fixed footer is the only one that works properly, at least in most of the browsers I've tested it on. It's mainly decorative at the moment, but I may decide to put something useful there later.
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
jayco437
Premium
join:2001-08-11
El Paso, TX
·AT&T Southwest
| When you position it absolutely its set on the page. Won't move. Which is what your footer is (or isn't) doing. You need to set it in a div at the bottom of everything if you want it to stay at the bottom of the content (and not the window.
Wrap it all in a container to constrain all the elements to the size you want (using the code I posted above). You don't even need to screw with static or relative positioning. Just let it float where it naturally should float and you'll be fine. If its floating under the header then yes, you're doing something wrong. Post the "wrong" code so we can look at it and see whats making it behave how it is.
|
|
Tenar
join:2008-01-02
Midland, ON
edit:
April 25th, @10:04AM
| I like what jayco437 had there so I'll do a little css practice. (yeah, I know, it's a slow day) And this is just one way of doing this kind of thing.
edit: I'll keep the doc-type in there =P |
|
MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
·Earthlink Cable Mo..
| reply to MsTerra
I hope you guys don't mind me bumping up my thread. I had to drop working on the site for a bit to do other things, among them installing a Windows partition and VMWare Fusion, so now I can preview the site on both platforms. I thrashed away at the code last night and solved my footer problem. I ran the css and html through the W3C validator (again) and it's all hunky dory. The site renders pretty consistently in Safari, Firefox, Opera, Camino (Mac) and Opera and Firefox (Win). As usual, the sticking point is IE, which is, for some reason, chucking the menu div way off to the right. I'm inclined to do a separate IE stylesheet and reference it in my html with conditional comments. If someone wouldn't mind having a look at my code and giving me some hints as to how I can make it work in IE I would appreciate it. The updated site is on my test server: »ctpid-2.mit.edu/~terra/
I'm reasonably sure these are the relevant bits, as the rest is mainly classes for styling, but if I've left out something important let me know.
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
jayco437
Premium
join:2001-08-11
El Paso, TX
·AT&T Southwest
| I don't have access to IE, so I can't give you specifics on how to fix your site right now. Look into conditional CSS statements for IE. Also look into CSS reset sheets. Have a look here for some info on CSS reset.
Might cut out some of the issues for future iterations. |
|
MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
·Earthlink Cable Mo..
| Interesting. I should probably spend more time reading Eric Meyer's site for my general edification.
I have the menu and content divs settling into their correct positions in IE now (a separate stylesheet is definitely in order) but now the footer is giving me guff again. I don't suppose there's some sort of straightforward guide to coding sites for IE that's a little more current than those focusing on the box model hack and the Holly hack. I've been reading about hasLayout, but the fixes for that haven't been doing the trick for me so far.
BTW, can I safely consider IE 5 to be dead to me? (IE 5.5 for Mac definitely is.) How important is it to take IE 6 into consideration at this point? I'm sort of operating on the assumption that someone looking at a web site about a lab at MIT is likely to be using a pretty up-to-date browser...
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
jayco437
Premium
join:2001-08-11
El Paso, TX
·AT&T Southwest
| said by MsTerra :BTW, can I safely consider IE 5 to be dead to me? (IE 5.5 for Mac definitely is.) How important is it to take IE 6 into consideration at this point? That's for you to decide. You can check browser statistics at echoecho.com, but you should also be able to monitor it yourself (google analytics, or awstats).
You could always use tables  |
|
MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
·Earthlink Cable Mo..
| I threw the thing into a table layout. Still needs tweaking for IE, doesn't work as well in the "good" browsers as the css version and feels very old-school. Why do a brand-new site with an old-fashioned table layout?
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
Tenar
join:2008-01-02
Midland, ON
| said by MsTerra :I threw the thing into a table layout. Still needs tweaking for IE, doesn't work as well in the "good" browsers as the css version and feels very old-school. Why do a brand-new site with an old-fashioned table layout? :) You should keep at your CSS layout, I think you almost have it.
I changed a few classes in your CSS and it works for me in FF and IE 7 and IE 6. Mind you I only tested on one page so you might still need tweaking.
Your Styles:
I commented out a few
|
|
MsTerra
Completely Ridiculous
Premium
join:2002-08-20
Somerville, MA
·Earthlink Cable Mo..
| I tried this, and it kicked the menu over to the far right. Along with your changes, I set the content to float: right, and that settled that, but the footer is still a problem. The code I posted earlier renders the footer correctly in other browsers. In IE, the negative margin brings the footer into view but puts it up over the bottom of the content. Having the negative margin on the footer with extra padding on the container or the content doesn't help. With margin: 0 auto the footer is below the bottom edge of the viewport. Any ideas?
Here's my code for positioning in IE. It doesn't seem to work right in other browsers, so it's in its own stylesheet linked to the html in conditional comments. This has been updated on my test server.
--
"Hope is the thing with feathers that perches in the soul - and sings the tunes without the words - and never stops at all." Emily Dickinson
»www.myspace.com/mizterra |
|
