I have this website that I have developed - a very basic site I might add that works fine in IE but only the menu is messed in FF. Can someone please help? http://www.mfpc.ca/index1.html
I use FF and it looks fine to me, except for some bullet looking things in the menu to the left. Is that the problem you are talking about? edit: Ok, I loaded it in IE to look at it there as well and in IE the right top menu is screwed up and the left is fine. I don't know much about css.. I mostly tweek it and don't write it, but it seems there's some kind of spacing problem. Would be easy to fix in html but for css I'm not sure how to advise. If it was html I would say put each menu in a invisible table.
There is one error in the code that I can see so far: h2 { height: 118px; width: 250px; margin-bottom: 50px; text-indent: -99999em; background: url('http://mfpc.ca/church.png') no-repeat;; margin-left:15px; margin-right:15px; margin-top:15px } Code (markup): there are two ; after the no-repeat ALso, I do not know what you are using this for but all but one text-indents are set to -99999 with 5 9's while this one is set with only 4 ul#menu li a { display: block; width: 90px; height: 33px; text-indent: -9999em; } Code (markup): Don't know how much help this is.....
For a FrontPage document, this is remarkably well coded. Do have some bones to pick, though: The headers, h1–6 are for indicating the structural level of the header. H1 is the top level. Think of it as the chapter heading. H2 heads up sections, h3 sub-sections, h4 sub-sub-sections and so on. Think of it as the outline of the page. You seem to have used the different levels as enumerators. What would you have done had you needed another? There is no h7. The image replacement method you used is broken. If the visitor has css but images are disabled, there is nothing to see. You will see that using the image with a proper alt string works whether either or neither of images or css are enabled. The schedule of events/services could have been marked up as various types of lists. I chose the dl as most structurally correct. Others might disagree, but it's still a list of some sort. There is some merit for a table structure, but as the data are not positionally related, that's a stretch. There were redundant div elements. It is Good Practice to add divs only when you have specific need to group elements to provide a styling context. The code below has some changes from your original. I have Emacs configured for xhtml, and the syntax is xhtml. You may want to correct it for html if you use any of the code. I removed the border from the right column, because I wanted everything to fit into my 800px browser windows. That, and I thought it looked better without it. For the same reason, some of the dimensions are changed. I would give thought to losing the heavy border and its relationship to the light feel of the background and the content areas. You might consider a thin border the same color as the bg lines. This is heavy in other ways. The html and css combined are about 8kB. The images are about 179kB. Do all potential visitors have high speed connections? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> MFPC </title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } body { background: white url(http://www.mfpc.ca/bg.jpg) fixed; color: black; font: 100%/1.25 verdana, vera, helvetica, sans-serif; } p { font-size: 1em; } a:link, a:visited { color: #008; } a:hover { color: black; } a img { border: none; } del { text-decoration: strike-through; } dt { font-weight: bold; text-decoration: underline; } h2#announce { display: none; } img { vertical-align: bottom; } ins { font-style: italic; } ul { margin: 0; padding: 0; list-style: none; } #wrapper { border: 5px ridge; background: #fff; margin: 0 auto; width: 765px; overflow: hidden; } #left { float: left; text-align: left; width: 250px; padding: 0 10px; } #announce-list li { margin: 5px 0; } #buttons { margin-top: 10px; overflow: hidden; } #buttons li { float: left; margin: 2px; } ul#buttons li a { display: block; width: 120px; height: 24px; } #right { margin-top: 2em; margin-left: 280px; margin-bottom: 10px; } ul#menu { list-style: none; margin: 0; margin-top: -18px; padding: 0; overflow: hidden; } ul#menu li { float: left; margin: 0 0.2em; text-align: center; } ul#menu li a { display: block; width: 90px; height: 33px; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="left"> <h1> <img src="http://www.mfpc.ca/MFPClogo.png" height="167" width="250" alt="Mount Forest Pentecostal Church" /> </h1> <ul id="buttons"> <li> <a href="http://www.mfpc.ca/staff.html"><img src= "http://www.mfpc.ca/staff.gif" width="115" height="24" alt="Staff" /></a> </li> <li> <a href="http://www.mfpc.ca/missions.html"><img src= "http://www.mfpc.ca/missions.gif" width="115" height="24" alt="Missions" /></a> </li> <li> <a href="http://www.mfpc.ca/beliefs.html"><img src= "http://www.mfpc.ca/beliefs.gif" width="115" height="24" alt="Beliefs" /></a> </li> <li> <a href="http://www.mfpc.ca/values.html"><img src= "http://www.mfpc.ca/values.gif" width="115" height="24" alt="Core Values" /></a> </li> <li> <a href="http://www.mfpc.ca/sermons.html"><img src= "http://www.mfpc.ca/sermons.gif" width="115" height="24" alt="Sermons" /></a> </li> <li> <a href="http://www.mfpc.ca/movies.html"><img src= "http://www.mfpc.ca/movienight.gif" width="115" height="24" alt="Movies" /></a> </li> </ul><!-- end buttons --> <p> <img src="http://www.mfpc.ca/church.png" height="118" width="250" alt="A view of the church from the southwest" /> </p> <h2 id="announce"> Announcements </h2> <ul id="announce-list"> <li> <img src="http://www.mfpc.ca/pancake.gif" width="250" height="50" alt="Pancake Breakfast every Sunday @9 AM" /> </li> <li> <img src="http://www.mfpc.ca/dvd.gif" width="250" height="50" alt="Check out our church video" /> </li> <li> <img src="http://www.mfpc.ca/singlemoms.gif" width="250" height="50" alt= "Single Mom's Ministry; information coming soon" /> </li> </ul><!-- end announce-list --> </div><!-- end left --> <div id="right"> <ul id="menu"> <li> <a href="index.html"><img src= "http://www.mfpc.ca/aboutus.gif" width="90" height="33" alt="About Us" /></a> </li> <li> <a href="ministries.html"><img src= "http://www.mfpc.ca/ministries.gif" height="33" width="90" alt="Ministries" /></a> </li> <li> <a href="links.html"><img src= "http://www.mfpc.ca/links.gif" height="33" width="90" alt="Links" /></a> </li> <li> <a href="vision.html"><img src= "http://www.mfpc.ca/vision.gif" height="33" width="90" alt="Vision" /></a> </li> <li> <a href="contact.html"><img src= "http://www.mfpc.ca/contactus.gif" height="33" width="90" alt="Contact Us" /></a> </li> </ul><!-- end menu --> <p> Thank you for taking time to <del>browse</del> <ins>visit</ins> our site. I trust you will find it helpful and informative. Take time to check out all the links to find out what's happening at our Church. </p> <p> Do not hesitate to <a href= "mailto:mfpc@bellnet.ca">email</a> us or call the office if you wish more information about our programs or our Church family. </p> <h2> <img src="http://www.mfpc.ca/grid.png" width="475" height="25" alt="A Family Friendly Church" /> </h2> <p> We are pleased that you have taken time to stop by. MFPC is truly a family friendly Church that is anticipating seeing what the Lord has in store. Cathy and I truly have a desire to see God express His love and provision to our Church and to a society that is hurting and broken. </p> <p> One of our goals is to attempt to spread the good news of Christ to all in the community of Mount Forest and beyond through practical and loving ministry. If you are looking for a Church home, MFPC welcomes you with arms wide open </p> <h2> <img src="http://www.mfpc.ca/churchservices.png" width="475" height="25" alt="Our Church Services" /> </h2> <dl class="services"> <dt> Sunday </dt> <dd> 9:00 AM * Free Pancake Breakfast </dd> <dd> 10:00 AM * Sunday School for all ages </dd> <dd> 11:00 AM * Worship and the Word </dd> <dd> 6:30 PM * Small Groups </dd> <dt> Monday </dt> <dd> 7:00 PM * Gym Night (Sr. High Youth) </dd> <dt> Wednesday </dt> <dd> 7:00 PM * Family Night (PowerForce(kids) Junior High Youth, Bible Study) </dd> <dt> Friday </dt> <dd> 7:00 PM * Senior High Youth </dd> </dl><!-- end services --> </div><!-- end right --> <div id="banner"> <img src="http://mfpc.ca/banner.png" width="100%" alt="Growing God's Kingdom, one at a time" /> </div> </div><!-- end wrapper --> </body> </html> Code (markup): Notice the comments. It is good practice to comment the closing tag when there is a bunch of stuff between it and the opening tag. Debugging and maintenance are much easier when you can quickly spot both ends of an element. cheers, gary
Thanks Gary! I've been trying to do this for 3 weeks now! I use Frontpage only as a platform and that's all. Just for convenience sake. Have a look at the site now www.mfpc.ca/index1.html and tell me what you think. I just have to do the rest of the site now, and everything will be great! Thanks again! Pricer
Much better, if I do say so myself. Remove the width from the right column. The left margin gives it location, and block elements take all the width they can, so width is automagic. It looks much better with no border on #right. Make the border on #wrapper 2px solid #c5ebf6. IE does not do negative margins at all well. Try giving ul#menu {position: relative;} if you insist on keeping the border. Otherwise, make #right {margin-top: 1em;} and remove the neg top margin from #menu. (best plan) Do not ever again inline a style: <div id="left" style="width: 14; height: 579"> Code (markup): If you need a height property, you have likely already screwed up. I don't know what the width: 14 is about. You have added empty <p>s. Lose them. That's a no-no. Never do it. If you want additional spacing, use margin. It would be a Good Thing® to lose FrontPage. Get a powerful plain text editor. The two best are Emacs and Vi(m). There are other good editors for those who are intimidated by raw power. cheers, gary
Gary, Looks good and thanks for the final tweeking. The inline styling was a frontpage thing - it does it by itself for some reason. I have fixed the rest of the page and it looks awesome! I will post back again, once I get to moving some of the pictures around on the other pages. Pricer
ou should google "!important" - I use that alot - IE will ignore anytihng after !important so you can have a style that shows two settings, one for IE and one for FF I dont have an example handy but its something like: width: 50px !important 45px; FF and IE incompatiblity with CSS is MADDENING