Abby
Posts: 1

Hey everyone. I just started how to learn how to use div to make layouts. Currently, I am building this site: http://www.msu.edu/~estockab/snd/snd.html and I'm having some problems.

First of all, the formatting is all wrong in Internet Explorer (I use Firefox). So any assistance along those lines would be helpful, as I am not 100% comfortable with my code as it is and I'm not really sure what to change to make it IE compatible.

Second, and more importantly, I wanted to set the container div (the the black div that contains everything else on the page) to run down the middle of the entire page. Right now, it stops after the banner on the top. How can I make it go down the bottom no matter what the screen resolution? I already set the frame on the right to do the same by using the following code on my frame:

border:0px;
position:absolute;

But when I do the same to my container div, it ruins the entire formatting. Any suggestions?

Thank you!

Abby

Marat Bandemer
Posts: 0

Hi, Abby,

I'm relatively new to CSS as well, but after looking at your code, I believe it was the way the two browsers treat the iframe that was causing the problems in layout. Insofar as the black going to the bottom, just create a graphic oh, 1600 pixels wide by one high and paint the part you want black, then set it as a background with: background url (name.ext) repeat fixed;

I'm attaching my version of your CSS (as a text file)--I got rid of the iframe and tweaked a few things and got the two browsers really, really close (I also set header specs in CSS, as IE and FF create default sizes much differently).

Just get rid of the iframe in your index and all should be better.

Hope this helps. If there are any other things we can puzzle out together, let me know at mmband54@gmail.com.

Marat

mystylesheet.txt - 1.33k

Abby
Posts: 1

Thanks Marat! Some of your CSS really helped with bridging the Firefox/IE gap. I'm almost there! But I'm still having some problems.

I've been constantly tweeking for a week and a half or so. And right now, I've got it looking perfect in Firefox (but only for my screen resolution -- 1680 x 1050).

I'm sort of stubborn because I really want to keep the iframe. Especially since I'm so close to perfecting it with it there. And I'm pretty sure it's not posing any issue right now (except for being able to format it in IE).

The only thing now (in Firefox) is centering the container div to any screen resolution. I've researched this and apparently margin-left:auto; margin-right:auto is supposed to do that. But I've tried and it only sticks on the left side when I do that. Right now the left is set at 25% because that works with my resolution but I'd like it to be universally centered. I've also read that sometimes putting text-align:center in the body css and then text-align:left in the container div does this, but it doesn't really and screws up everything in IE.

Further, I'm still struggling in getting it to look the same if not as close as possible in IE. Attaching the container div (and the iframe) to the bottom of the screen with the position:absolute; bottom:0px (or 20 for the iframe) will not work in IE and I cannot figure out why the iframe has a left to right scroll bar as well.

Sorry this is so long winded. Any help is appreciated. Thanks.

Oh, and here is the new link: http://www.msu.edu/~estockab/snd/snddiv.html