3 replies [Last post]
suwanneeredhead
suwanneeredhead's picture
Offline
newbie
Florida, USA
Last seen: 13 years 39 weeks ago
Florida, USA
Timezone: GMT-5
Joined: 2008-01-31
Posts: 4
Points: 0

My first post! Thanks for taking a look! And i apologize in advance if this is a silly question (and for my dirty code!).

My mock-up is here: http://www.barriermedia.net/gcsd/

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!

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 37 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Don't let your Doctype get

Don't let your Doctype get like it is:

Make it be:

Your images are messed up because you've used PNGs. IE 6 does not have native PNG transparency support. Two options for you:
1) Change your images to GIFs.
2) Get hacks from http://www.teamserenity.com/IYTYGIB%20Final/js/ - Download both these Javascripts and put them in a conditional comment for IE>7. If you need help on doing that, you can look at the code in the head section of http://www.teamserenity.com/IYTYGIB%20Filnal/

As far as your CSS goes, you can create a stylesheet that applies to IE 6 or lower only using the same type of conditional comments. After playing around with margins in that one, you should be able to fix all the columns. If you have complications doing this, post back here.

suwanneeredhead
suwanneeredhead's picture
Offline
newbie
Florida, USA
Last seen: 13 years 39 weeks ago
Florida, USA
Timezone: GMT-5
Joined: 2008-01-31
Posts: 4
Points: 0

Thanks Aequitas! Could you

Thanks Aequitas! Got 'em, although it did take me a minute to figure out that you didn't have "final" spelled right in that second link.

I had put in the Google js hack that makes IE6 behave like IE7, in that one you just have to put "-trans" on the end of your png files to get them to work. Problem is, once i did that, the links stopped working in IE6. I will remove that and use the one on TeamSerenity if i can get the right link.

What a pain in the tail! i really don't want to have to do this up in tables! and i have sooo much to do on this site, and the client is breathing down my neck!

Let me try this and see what happens.

Thanks again!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Don't use the xhtml 1.1

Don't use the xhtml 1.1 doctype at all!

IE can't handle it properly and it goes into quirks mode. It shouldn't be used at all for any browser unless you can have your server serve it as "text/xml" and doing that really throws Ie for a loop.

Xhtml 1.1 is not useable on the web as it is. Drop down to xhtml 1.0 STRICT, or html 4.01 STRRICT.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.