Forum Moderators: not2easy
<snip>
I have been struggling with IE patches and hacks to get this to work and it works beautifully in Firefox, Netscape and MIE. Problem is when i cross-test it on Opera 9.25 and Safari, the center column type gets very close to the left column and then wraps below the image area (div) in that column as well. I have been very confused by this "holy grail" of CSS layout and this being my very first pure-CSS site, i am frustrated and would appreciate your help!
Can I put the left column into a div that continues to the bottom whatever size the page is, to push the text back into place? And why does it put such a large margin on the right side?
Thanks again and i'm sure you'll be hearing from me again very soon! This is a hairy website for my very first CSS job!
Stacey
p.s. it looks good in IE7 but 6 makes a mess out of it! I just downloaded the standalone software that lets me view it on both, oh my goodness!
[edited by: engine at 11:12 am (utc) on Feb. 1, 2008]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]
I'm sorry you feel that way about the etiquette of this forum: the thing is having had a sneak peek at your page, it wasn't a silly question it was too long a question, it is/was an entire site/code debug JOB, and the professional members that frequent here often do not have that much free time to give, whereas some other forums possibly do offer free site reviews.
The advice in CSS Troubleshooting refresher.. [webmasterworld.com] pinned to the top of this Forum would give you a very good place to start, particularly the first steps about validating both the HTML and CSS. (hint#1 -you should not have <script>s in your CSS file)!
then as you say yourself you've been "struggling with IE patches and hacks" - forgive me for saying this but the premise of your layout is simple, so simple in fact you shouldn't actually need any hacks. My advice would therefore be to remove the hacks and get it working without them in FF/Opera and Safari, it's possible that it will also work in IE7.. then if you do continue to use that IE7 javascript to enhance IE5/6 it should be doing no more than that "enhancing IE5/6's performance. - TBH I've no idea why the page is working in FireFox, the glance I took suggests it shouldn't be working there either :o
It's much easier to get a page working how it should in FF/Opera/Safari, then fix, if necessary, for IE, if you struggle the other way the fixit job is often a total reconstruct as the site been has built on the wrong foundation, and CSS applied to a wrong foundation is doomed in any one or all of the good browsers.
Should you get the page deconstructed, before filling it with the 'fancy' content boxes you might like to enter in plain content which should help you to see which, if any, individual bits are acting differently in each browser. It should not in this day and age be that difficult to get a x-browser layout stable.
Hint#2 you have in your CSS:
#content {
width: 900px;
background-color: white;
padding: 1em 0;
margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
width: 32em;
}
html>body #content {
width: 900px;
}I have not seen the need to use that hack ANYWHERE any more - if you want or need to feed a different width to IE5.x for box model reasons then there are other ways to do it and it's long been the advice to remove 'parse error' hacks from CSS and place any IE specific CSS into a different CSS file via a conditional comment targetted at older IE versions. aside; did you know the 32em is only around 500px and that em width is dependant on font size?
Hint#2: do not look for the Holy Grail, it doesn't exist ;) - yes there are some out there that claim it, but in my experience unless you know your CSS inside out and are prepared to hack them to suit, it's only advisable to use Holy Grail type layouts for personal/learning purposes.
and lastly..
Q, are you sure you should be using the suckerfish js, AND the IE7.js by Dean Edwards.. does the IE7.js not take care of hover behaviour as part of itself?
- anyway good luck and if you get stuck with a part of of your layout remember shorter questions get quicker, more focused answers, especially if it looks like some effort was made to troubleshoot
-Suzy
I will take apart your message piece by piece and rebuild the page.
Appreciate it, i will be back!
Stacey
