Screwy layouts - same site - 2 stylesheets

[meganmcgees]

Yes, I am embarrassingly, painfully new to CSS. Am working on a site and trying very hard NOT to just revert to my beloved tables in frustration. Have searched numerous forums to no avail, as well the archives here with no luck.

Index page is here -

http://bigredmovie.com/

Bios page is here -

http://bigredmovie.com/pages/bios.html

Long story, but I have two issues -

#1 - The bios.html page displays exactly how I want it to in both IE6 & FF 2.0.0.13

#2 - The index.html page is aligned left instead of centered like bios.html in both FF or IE In addition, the index.html menu is "squished" vertically in IE6, but is fine in FF.

The different stylesheets are here -

http://bigredmovie.com/sitewide.css
http://bigredmovie.com/bios.css

I printed these out and have gone through the code line by line - the only differences I could find I changed in the sitewide CSS and it did not fix the problems.

So then I printed out the actual html page code and went through it line by line with the same results. What am I missing?!? Yes, I know I have a container div in the bio CSS, but when I add it to the index css, it bumps the center text UNDER the menu in both FF & IE, so I took it back out. I turned on all the borders I could to try and figure it out and just don't have a clue.

Could some one please take a look? Would like to use the bios css globally and only have one stylesheet, but am willing to have two or more if I need to, just need this to be really professional and the look consistent.

Thank you so much for any and all help.

[jcdevelopment]

you dont have the container wrapping the index page


<div id="container">

everything

</div>


it wasnt in your HTML on index.html

hope that helps!!

[meganmcgees]

Thanks, I tried that but look what it does to it- both in FF & IE

http://bigredmovie.com/

[jcdevelopment]

#container {
text-align: left;
border: 1px solid #482688;
width: 820px; margin: 0 auto;
background: background: black;
font: bold 13px/19px Verdana, Arial, Helvetica, sans-serif;
color: #472504;
}


that wont work?

[meganmcgees]

And where in the world did that border come from?

[meganmcgees]

Close in FF, though now has a border around the header? But does not work in IE6. Center DIV is under the menu.

Thank you for your help with this, BTW, I have been going nuts all day...

[jcdevelopment]

#container {
text-align: left;
border: 1px solid #482688;
width: 820px; margin: 0 auto;
background: background: black;
font: bold 13px/19px Verdana, Arial, Helvetica, sans-serif;
color: #472504;
}



its right there in the code!

[meganmcgees]

Ok, doh, she said red-faced. Perfect in FF, but still having problems in IE - center DIV still under menu and border is still showing around the container?

[jcdevelopment]

not sure why the border would be showing, and you may need to make the width a little larger. I dont have an editing tool for IE so i cant help you until the morning (US time). I will look at it if u need me too!

[meganmcgees]

Thank you so much, JC. I bumped the container width up to 1000 with no luck, so took it back down to 820, since it looks good like that in FF. I think I am pretty much fried for tonight, unless someone else has a Eureka! moment and sees it. I may take one more look after a big glass of wine and then will look at it with fresh eyes in the AM, but may yet have to ask for your help. This site is for my son and I am trying hard to make him think I am still pretty cool (in a geek kind of way) for a mom : ) I am not sure if I could pull it off without this forum and your help!

[jcdevelopment]

ok, i have looked in every browser, even an old computer that has IE5 and looked all the way through IE8! Also on every browser i could find from FF to Safari and the index page looks great. I even went as far as to look on a MAC!! The page is layed out great, not sure if you are still seeing the same thing!!

Let us know!

[meganmcgees]

Hey JC and anyone else who reads this. I apologize, I was gone all day. Yes, I played around with it some more last night and it DOES display properly in IE6 - sometimes. It jumps around on mouse-over, the center section jumps under the menu both on the index page and the bios page. I can't recreate it in FF, so it is a Javascript issue with IE I guess. But whole 'nother problem - the reason I came to this forum has been resolved by JC! Thank you, thank you, thank you!