Almost done...formatting problem on main page

[paul8agrape]

I have posted several times in here about this site - http://rain.edchinn.com/ and am almost done except for one problem.

For some reason, the index page won't format the same as the other pages (see Bio for instance). The header and footer are supposed to be flush on top and bottom. Instead, you see the gap. I had it working and have no idea what got changed.

Would someone look at the styleblack.css and see if you can identify the problem? Driving me crazy. lol

[BLiZZaRD]

Note that it only does this in IE.. all other browsers (save for Opera as I don't run Mac apps) it appears as you say you want it.

You may need to adjust something in your CSS for a "if IE" rule.

You can try changing the position: fixed in the .header and .footer to position: absolute and see what happens.

I haven't been watching your threads since the start so I am not sure what all you have been through.

[paul8agrape]

Note that it only does this in IE.. all other browsers (save for Opera as I don't run Mac apps) it appears as you say you want it.

You may need to adjust something in your CSS for a "if IE" rule.

You can try changing the position: fixed in the .header and .footer to position: absolute and see what happens.

I haven't been watching your threads since the start so I am not sure what all you have been through.

Actually what has come before doesn't really matter now because the problem is not with the css file. If you'll notice that the other pages (like bio) work correctly and use a style.css instead of the styleblack.css that is only used for the main page. I swapped the css files on the index and bio page, and nothing changed with the format.

So its something with the code in the index.html. And aside from the flash animation, everything else is the same. I do have a code that someone else wrote for me to run for IE

<!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="/ie6-fix.css">
        <script type="text/javascript" src="/ie6-fix.js"></script>
        <![endif]-->

It works for all the other pages except this one. Plus, it is only a fix for IE6. I've tried removing that code also. I just don't get it what the problem is.

[BLiZZaRD]

Change the fix version..

<!--[if lte IE 7]>

[paul8agrape]

Change the fix version..

<!--[if lte IE 7]>

I understand why you're suggesting that. I'm just confused why using this same code works for every other page in IE6 AND 7 except the index page.

[BLiZZaRD]

Mainly, the answer to your question is:

IE is really not a very good browser.

Now that being said and the fact I am not at work I will take a closer look. My guess is it has something to do with the way you have embedded the Flash file.

I will see what I can find out.

<edit>
Okay had a look and (to me) this is very confusing. Now I had a look at your sources and the 3 different css you are using. First a couple things I noticed... you are defining a <div> with the class of "container" yet you never define .container in any of the CSS. Now as far as your problem with the index page.. I did some digging and research 'cause this problem was new to me as well, but I think it stems from having Flash, tables and elements on one page and just the tables on the other. (Meaning it is not just Flash causing this).

In your IE fix css you declare that header and footer use the "static" position, which normally is fine, but your Flash doesn't take up the whole page like your content tables do on the bio page. you can see the position definitions here. I would try changing that to absolute (even if this means you need a fourth css (iefix2.css for example) just for the index page.

You see, as your table on bio.html fills up all the middle space, your header and footer are pushed (static) to the edge of their container space, since the Flash doesn't stretch, the static area is larger and the header/footer sit "where they are defined" which is NOT at the very beginning or the very end of the page. Does that make sense?

</edit>

[mburt]

IE is really not a very good browser.

Correction: IE isn't a good browser

[paul8agrape]

Mainly, the answer to your question is:

IE is really not a very good browser.

Now that being said and the fact I am not at work I will take a closer look. My guess is it has something to do with the way you have embedded the Flash file.

I will see what I can find out.

<edit>
Okay had a look and (to me) this is very confusing. Now I had a look at your sources and the 3 different css you are using. First a couple things I noticed... you are defining a <div> with the class of "container" yet you never define .container in any of the CSS. Now as far as your problem with the index page.. I did some digging and research 'cause this problem was new to me as well, but I think it stems from having Flash, tables and elements on one page and just the tables on the other. (Meaning it is not just Flash causing this).

In your IE fix css you declare that header and footer use the "static" position, which normally is fine, but your Flash doesn't take up the whole page like your content tables do on the bio page. you can see the position definitions here. I would try changing that to absolute (even if this means you need a fourth css (iefix2.css for example) just for the index page.

You see, as your table on bio.html fills up all the middle space, your header and footer are pushed (static) to the edge of their container space, since the Flash doesn't stretch, the static area is larger and the header/footer sit "where they are defined" which is NOT at the very beginning or the very end of the page. Does that make sense?

</edit>

I think I see what you're saying and agree about IE. As far as the several css sheets...this is my first time EVER using CSS so I've gotten a lot of help and I don't remember exactly why it was suggested that I remove the .container section from the css sheet. Essentially, I was advised that it wasn't necessary...which seems to be ok for all the other pages.

I tried your suggestion with adding a 4th ie-fix2.css and setting the position to absolute. Well, you can see that it made things worse. I tried adding a .container element back in and tried all of the position elements and nothing worked. Any ideas on how I could set the container element?

[BLiZZaRD]

You misunderstood. Sorry that was probably my fault.

I know you have gotten a lot of help around here with the CSS, and that is great.

What I was meaning though, is if they told you to get rid of the .container portion of your CSS, then you can get rid of the <div class="container"></div> in your source code.

If it is not there, why call for it?

As far as using absolute, static, fixed relative, you may have to play around with it til you find the right one.

Another option is to not set the header and footers in a table at all. (Would be my doing anyway)

[paul8agrape]

Well I don't know what was different but I went back to the same stylesheet as the other pages and altered it again to make the background black. Now everything works. I'd compared the 2 css sheets before making the change, and I still don't know what was different. lol

But it works now...thanks for your help and time.