James, On Feb 14, 2006, at 12:10 PM, CHUNG K. LEE wrote:
> http://ssw.unc.edu/jif/makingchoices/ > <snip> in Firefox/Mozilla browser, the web pages are left aligned, > even though I set the all tables and css-based menu to center-aligned > in the > codes. First, fix the html. Here's the first bit to get you started --------- <body> <div id="container"> <h1><img src="images/mchead.jpg" alt="Making Choices: social Problem-Solving Skills for Children"> <ul id="listmenu"> <li id="Home"><a href="index.htm">Home</a></li> <li id="about"><a href="#">About</a> <!-- this should go to a real page --> <ul><!-- drop down menu items --> <li><a href="about-whatmc.htm">What is Making Choices?</a></li> <li><a href="probsolve.htm">Problem-Solving Steps</a></li> <li><a href="ps-stair.htm">The Staircase Model</a></li> <li><a href="#">Sample Lessons</a> <!-- this should go to a real page --> <ul><!-- pop-out menu items --> <li><a href="lesson-g3.htm">Grade 3</a></li> <li><a href="lesson-g4.htm">Grade 4</a></li> </ul> </li> </ul> <li id="Pubs"><a href="#">Publications</a></li> <!-- this should go to a real page --> <ul> <li><a href="pubs-aggbeh.htm">Aggressive Behavior</a></li> <li><a href="pubs-mcprog.htm">The MC Program</a></li> <li><a href="pubs-mceval.htm">The MC Evaluation</a></li> <li><a href="pubs-bib">Sample Selected Bibliography</a></li> </ul> <li id="Present"><a href="present.htm">Presentations</a></li> <li id="Staff"><a href="staff.htm">Staff</a></li> </ul> <div> <!-- http://www.456bereastreet.com/archive/200411/ quotations_and_citations_quoting_text/ --> <blockquote> <p>I feel great about Making Choices. We learn about feelings and how to work out our problems. Sometimes we get celebrations! If you were in my class you would love Making Choices because it's great!</p> </blockquote> <cite>—Jamie, 3rd Grade</cite> </div> .... -------------- #container { width: 758px; margin: 0 auto; } #container h1 { margin: 0 1em 0 0; padding: 0; } #container h1 img { height: 87px; width: 758px; display: block; margin-bottom: 1em; } #listmenu { list-style-type="none"; width: 26em; /* adjust this number as needed to fit the number of top level items */ margin: 0 auto; } #listmenu li { float: left; width: 9em; border: 1px solid #fff } #listmenu li a { display: block; padding-top:4px; font: bold 10pt verdana, sans-serif; text-align:center; background: #fff url("images_pres/roll_bg4.gif") 0 0 no-repeat; } ... I've given you the flavor or the css you will need to style the markup I've suggested. the key concepts here are 'simplify' and 'understand'. If you don't know that a particular line of code does, remove it and wee what happens. If nothing happens, maybe you didn't need it after all. The web developer toolbar for firefox/mozilla is a great help in the learning process. By the way, I always suggest doing the original site design in a more standards-compliant browser such as firefox, opera, or safari/khtml. It is much easier to work around ie/win bugs than get other browsers to emulate them. hth -- Roger Roelofs "Remember, if you’re headed in the wrong direction, God allows U-turns!" ~Allison Gappa Bottke ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
