MinusMyThoughts Posted January 8, 2007 Share Posted January 8, 2007 hey, guys!...i'm attempting to reduce my CSS to the bare minimum necessary to get it to display correctly. however, i've run into a weird issue that i can't seem to wrap my head around: some of my divs are simply NOT displaying in FF, or they're displaying out of order and out of size. however, they're working just fine in IE......so, if you please, have a look at my code and let me know if you can see which part of it opens the wormhole into a parallel universe where IE works......also, here's a link to the site: MY BROKEN CSS...if you open it with IE, it should look roughly the way i'm aiming for. but, in FF, it looks ridiculous...HTML File <html> <head> <title>Clean CSS Attempt</title> <link rel="stylesheet" href="MYCSSFILE.css" type="text/css" media="screen,projection" /> </head> <body> <!--// Master div. This should center the website and allow the header, body, and footer to align properly. //--> <div id="master"> <!--// Begin the header div. I'm notating ABOVE the tag in question for clarity's sake. //--> <div id="header"> <!--// End the header div. //--> </div> <!--// Begin the body div. //--> <div id="body"> <!--// Begin Column Holder. This div ensures that the three columns don't slip behind the Fans module. //--> <div id="columnHolder"> <!--// Begin Column One. //--> <div id="column"> <!--// Begin Nutrition Log. //--> <div id="3colSide"> THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. <!--// End Nutrition Log. //--> </div> <!--// Begin Training Log. //--> <div id="3colSide"> THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. <!--// End Nutrition Log. //--> </div> <!--// End Column One. //--> </div> <!--// Begin Column Two. //--> <div id="column"> <!--// Begin About Me. //--> <div id="3colMiddle"> THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. <!--// End About Me. //--> </div> <!--// End Column Two. //--> </div> <!--// Begin Column Three. //--> <div id="column"> <!--// Begin Blog. //--> <div id="3colSide"> THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. <!--// End Blog. //--> </div> <!--// Begin Member Stats. //--> <div id="3colSide"> THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. THIS IS TEST CONTENT. <!--// End Member Stats. //--> </div> <!--// End Column Three. //--> </div> <!--// End Columns. //--> </div> <!--// End the body div. //--> </div> <!--// Begin the footer div. //--> <div id="footer"> <!--// End the footer div. //--> </div> <!--// End the Master Div. //--> </div> </body></html> CSS File /* Basic Body Settings */body { background-color: #404040; margin:0px; padding:0px; border:0px; }div { margin:0px; padding:0px; }/* This div Centers the Pages */#master { background-color: #FFFFFF; position:absolute; width: 800px; height: auto; top:0px; left:50%; margin-left:-400px; }/* The Header. This is NOT the Menu. */#header { width: 800px; height: 275px; background-image:url('images/FITannica_02.gif'); position:relative; top:0px; clear:both; }/* The Body. Contains the Modules. */#body { width: 800px; height: auto; position:relative; background: #E6E6E6; }#columnHolder { width:100%; }#column { float:left; height: auto; left:0px; position: relative; }#3colSide { width: 210px; height: auto; border: 1px solid #404040; background-color: #FFFFFF; margin-left:10px; margin-bottom:10px; position: relative; }#3colMiddle { width: 340px; height: auto; border: 1px solid #404040; background-color: #FFFFFF; margin-left:10px; margin-bottom:10px; position: relative; }/* The Footer. Contains legal notices. */#footer { width: 800px; height: 115px; background-image:url('images/FITannica_05.gif'); position:relative; } ...if you see anything, please let me know! it'll save my sanity...love,jason Link to comment Share on other sites More sharing options...
jlhaslip Posted January 8, 2007 Share Posted January 8, 2007 Can you remove the authorization requirement on that link up there, please?and what is this all about" #master { background-color: #FFFFFF; position:absolute; width: 800px; height: auto; top:0px; left:50%; margin-left:-400px; } In particular, the last two lines of css... Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted January 8, 2007 Author Share Posted January 8, 2007 Can you remove the authorization requirement on that link up there, please?and what is this all about"#master { background-color: #FFFFFF; position:absolute; width: 800px; height: auto; top:0px; left:50%; margin-left:-400px; } In particular, the last two lines of css... i relocated the link and updated it in here. the link will work now. sorry about that!...this: left:50%; margin-left:-400px;is a work-around i found to center a div with position:absolute; everything else i found only worked on relatively positioned divs, which were leaving me with a margin i couldn't get rid of......is that a faulty code? it seems to work in both browsers (IE and FF), but i've learned that doesn't mean it's good code...love,jason Link to comment Share on other sites More sharing options...
MinusMyThoughts Posted January 9, 2007 Author Share Posted January 9, 2007 i figured it out: apparently, FF doesn't read #3colSide. it has to be written #threeColSide......so. i learned something today. maybe this will save someone else a little heartache...love,jason Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now