Thread

Hello - My CSS is a bit rusty and I can’t track down what I’m doing wrong. (please excuse the temporary, inline CSS) The right-hand photo and column and the main content look exactly the way I want in Firefox but in IE7 the first content heading is lined up with the top of the blue box and not the top of the photo.

http://rackham.pmhclients.com/index.php/giving/

Help with this is very much appreciated.

rackham, I thought to look over your issues, not because I am an expert here, but to learn something.

It’s just an opinion, but after a while I felt that you have quite a few things kind of wobbly in here.  This page really doesn’t seem to work so well on IE - it’s not just IE7, and it’s not just that you have this alignment problem.  For example, the page doesn’t even let you see much of the content in IE - doesn’t open up a scroll. 

One more indicator of funny things is the way the background color of the left column isn’t there, or is, depending on shifting around constraints that should have nothing to do with it.

I could get somewhere on your request by altering the layout for the picture of the students (nice idea with the tilt, by the way), such as putting it inside the rest of the right column.  Then the center text came up beside that column as it’s supposed to.

But this didn’t work so satisfactorily either, with the other funny things, so I set up your whole arrangement in Dreamweaver, adding paths to the image files etc. so it would work from here. 

And then I began discovering things, like all those overflow: hide tags that you have sprinkled around the css file.  Removing a key one lets the rest of the page show in IE (!), but the real clue here I think is that these are not the way to control page layout—in particular because overflow controls tend to set off IE bugs and side effects. 

Rather, as best I can gather, floating your boxes across the screen, and then using a clear CSS to allow you to place the footer material across the full width (or content width) is I believe more of the accepted approach.  And in fact, this sort of method is present in at least some of the EE templates.

What to do in a practical way—and because a lot of the css mavens are incessant about things like the ‘holy grail’, which would have your center section ‘fluid’ (center text variable width)—which I am pretty sure you don’t want on a university site, as solidity in fact gives the right appeal?

Here’s a page that somehow quite appealed to me.  Simple, straightforward, self-documenting, and shows everything but enabling the full-width footer.  And that you can add quickly, just by putting a line with   <br [removed]> between your 3-column divs and your footer div.

http://www.glish.com/css/3.asp

I have a feeling if you used this as basis, adjusting of course, placing your header above and your footer below, and copy-pasting the content from your present page, it would get you there more easily than trying to repair the present layout.

It’s a thought, anyway, and it represents what I thought I learned for my own adventures.  Maybe it would be also interesting to take one of the top-recommended ‘fluid’ layouts, and stop the fluidity; more complicated perhaps than you need here, but if you want a page that announces these, you could try this one perhaps:

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Kind regards,
Clive

Rackham, just looked by your site again, and really pleased that you got this to work.

It does look good, on IE6, Firefox 2.0.0.6, and Opera 9.22, which are what I have.

It looks like putting the picture inside the right column did it - and then a lot of visible adjustments that you made has gotten the good look.

Kind regards,
Clive