Hi, why Firefox shows it wrong and IE right? The website is www.theoutsourcingcompany.com If I change the value of margin-top to zero for the divs div-logo and div-text it looks good on both browsers but there's too much white space on top of the logo and the text... I am very frustrated, please help me. Here's the code for the HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The Outsourcing Company - Web design, copywriting, programming. | Outsourcing Services</title> <link href="style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { text-align: center; margin: 0; background-color: #9e0b0f; background-image: url(images/back.jpg); background-repeat: repeat-x; } </style> </head> <body> <div class="div-header"></div> <div class="div-middle"> <div class="div-logo"> <p><img src="images/logo.jpg" alt="The Outsourcing Company" width="193" height="55" /></p> <p><span class="div-menu"><img src="images/home.jpg" alt="Home" width="96" height="26" /><br /> <img src="images/about-us.jpg" alt="About Us" width="96" height="26" /><br /> <img src="images/ourservices.jpg" alt="Our Services" width="96" height="26" /><br /> <img src="images/contactus.jpg" alt="Contact Us" width="96" height="26" /></span></p> </div> <div class="div-text"> <p>The Outsourcing Company is your business partner for:</p> <p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Software Development<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Content Generation / Article Writing<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Internet Marketing<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Search Engine Optimization (SEO)<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Pay-Per-Click (PPC) Campaigns Management<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Professional Copywriting Services</p> <p>We have two goals:</p> <p><img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you make more money by increasing your revenues<br /> <img src="images/bullet.jpg" alt="Bullet" width="12" height="24" /> Help you save money by optimizing your costs and processes</p> </div> </div> <div class="div-footer"></div> </body> </html> Code (markup): And this is the CSS: .div-header { background-image: url(images/header-blank.jpg); background-repeat: no-repeat; margin: auto; height: 164px; width: 800px; } .div-footer { background-image: url(images/footer.jpg); background-repeat: no-repeat; margin: auto; height: 48px; width: 800px; } .div-logo { height: 55px; width: 193px; margin-left: 40px; text-align: right; float: left; margin-top: -120px; } .div-text { float: left; text-align: left; width: 485px; padding-left: 30px; font-family: "Myriad Pro"; font-size: 13px; margin-top: -108px; } .div-middle { background-image: url(images/middle.jpg); background-repeat: repeat-y; margin: auto; width: 800px; height: 1000px; } Code (markup):
IE is a very useless browser not only is it very slow it does not interpret files correctly. This is a common thing that happens all of the time and the only thing that you can really do is google it for a solution or just make a page that will work in both browsers.
Here's an example of one way to do things. <!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 (vers 6 November 2007), see www.w3.org" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>**TEST** The Outsourcing Company</title> <link href="outsource_files/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="div-header"> <!----> </div> <div id="div-middle"> <div id="faux-box"> <div id="global-nav"> <h1><img src="outsource_files/logo.jpg" alt="The Outsourcing Company" height="55" width="193" /></h1> <ul> <li><a href="#"><img src="outsource_files/home.jpg" alt="Home" height="26" width="96" /></a></li> <li><a href="#"><img src="outsource_files/about-us.jpg" alt="About Us" height="26" width="96" /></a></li> <li><a href="#"><img src= "outsource_files/ourservices.jpg" alt="Our Services" height="26" width="96" /></a></li> <li><a href="#"><img src="outsource_files/contactus.jpg" alt="Contact Us" height="26" width="96" /></a></li> </ul> </div> <div id="div-text"> <h2>The Outsourcing Company is your business partner for:</h2> <ul> <li>Software Development</li> <li>Content Generation / Article Writing</li> <li>Internet Marketing</li> <li>Search Engine Optimization (SEO)</li> <li>Pay-Per-Click (PPC) Campaigns Management</li> <li>Professional Copywriting Services</li> </ul> <h2>We have two goals:</h2> <ul> <li>Help you make more money by increasing your revenues</li> <li>Help you save money by optimizing your costs and processes</li> </ul> </div> <!-- end div-text --> </div> <!-- end global-nav --> </div> <!-- end middle --> <div class="div-footer"><!----></div> </body> </html> Code (markup): //edit: I see that you found a solution since my last look at the page. :shrug: cheers, gary
IE is not useless; it hasn't kept up as the competition improved, but it is still the majority browser that satisfies the average user. Not, if you know what you're doing. @both: The user doesn't care, and the developer simply has to learn IE's shortcomings and apply appropriate hacks and work-arounds. That's just a part of being professional. That said, both postings were completely off topic. Are you trying to boost your post count or something? gary
In the on page styling the body margin is set to auto for all four sides, trying to center everything, left, right, up, and down. Use a margin-left : auto; and a margin-right : auto; to center left and right. I leave the margin-top and margin-bottom out completely, unless I need to have a dimension in there, or set them to 0px; if you need them.
seriously you should design with Firefox first, then test it with ie. because ie is not css friendly.
Like most above said, IE is TOO forgiving with CSS, and firefox is not. You need to validate your CSS through WC3, then fix the errors. http://jigsaw.w3.org/css-validator/
aj.eylia - CSS validation, well, apart from using it to correct typo's much of it is bull since you generally end up having to use invalid css to get all browsers on the same page. (see using -moz for inline-block if you still care about FF 2, the various non-standard opacity calls, filter calls for tranny .png, zoom for haslayout in places you can't use the holly hack, etc, etc) Valid HTML also does not mean the markup is worth a damn, it's only one aspect to make finding errors easier. The existing markup is rubbish. Gary's version is better, but still has WAY too many wrapping DIV and doesn't correct ENOUGH of it. (Gary, you are aware your comment placement could break the layout in IE around floats, right? Double render bug and/or dissapearing content) In the original your bullet images are presentational, those should be in the CSS not the markup. If that's a list of bullet points they should be marked up as a LIST, your menu is a list of options so that too should be a list, you are wasting time on using images for flat text in the menu, those are NOT paragraphs, headings should be marked up with HEADING tags not strong, you seem to have more DIV than are needed for such a simple layout and image maps are pretty much made of /FAIL/. So the first thing I would do is throw away the markup for something like this: <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Home - The Outsourcing Company </title> <link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection" /> </head><body> <div id="container"> <div id="header"> <h1> <a href="index.html"> the<b>outsourcing</b>company <span></span> </a> </h1> <ul id="mainMenu"> <li><a href="index.html">home</a></li> <li><a href="aboutus.html">about us</a></li> <li><a href="ourservices.html">our services</a></li> <li><a href="contactus.html">contact us</a></li> </ul> <!-- #header --></div> <div id="content"> <h2>The Outsourcing Company is your business partner for:</h2> <ul> <li>Website Design.</li> <li>Software Development.</li> <li>Content Generation / Article Writing.</li> <li>Internet Marketing.</li> <li>Search Engine Optimization (SEO).</li> <li>Pay-Per-Click (PPC) Campaigns Management.</li> <li>Professional Copywriting Services.</li> </ul> <h2>We have two goals:</h2> <ul> <li>To help you make more money by increasing your revenues.</li> <li>To help you save money by reducing your overhead and maximizing your processes and resources.</li> </ul> <h2>Why The Outsourcing Company?</h2> <p> At TOC we are business people. We know how other business people think and what they want. We know that you want to save money but not at the expense of quality. </p><p> We know that you need a reliable partner. A company that can always meet your deadlines. A company that can deliver world-class quality in record time. </p><p> We work harder than anybody else to increase your company profits while keeping your overhead low. </p><p> <strong>Please <a href="contactus.html">Contact Us</a> so we can provide you with a free estimate for your project and a portfolio of previous projects that we have done similar to yours.</strong> </p> <div class="boxedSubsection"> <h2>Some of our clients</h2> <ul> <li> <a href="http://www.TranslationsLCI.com"> <img src="images/clientLCITranslations.png" alt="LCI Translations" /> </a> </li><li> <a href="http://www.Denver-Community.com"> <img src="images/clientDenverCommunity.png" alt="Denver Community" /> </a> </li><li> <a href="http://www.ARGSoccerTours.com"> <img src="images/clientARGSoccerTourse.png" alt="ARG Soccer Tours" /> </a> </li><li> <a href="http://www.luxleathers.com/"> <img src="images/clientLuxLeathers.png" alt="Lux Leathers" /> </a> </li> </ul> <!-- .boxedSubsection --></div> <!-- #content --></div> <div id="footer"> The Outsourcing Company<br /> 2510 West C Street<br /> Torrington, WY 82240<br /> 888-367-6127<br /> <a href="mailto:info@TheOutsourcingCompany.com"> info@TheOutsourcingCompany.com </a> <!-- #footer --></div> </body></html> Code (markup): Everything else on that page should be in the CSS. Shaves 1.2k off your markup, will index better in search engines, and provides better accessability in things like screen readers. I have time later I'll toss together the CSS to show you how I'd go about that layout. -- edit -- my bad. I didn't see the dropshadow... or should I say I couldn't see the dropshadow until I zoomed in 5x in a paint program. Ok, so it does need at least one extra wrapper around #container. Though you know that 800px wide is not 800px friendly, right? At that point you might as well up the widths to 984px... that or down it to 768.
Ok, here's how I'd write that page: http://www.cutcodedown.com/for_others/zekell/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/zekell is unlocked to make grabbing the bits and pieces easier. You'll notice I redid all the images, combined a few down to single files, and reduced the total filesizes. Valid XHTML 1.0 Strict, Valid CSS Level 2 (the layout isn't complex enough to need any 'special' properties), Tested working in IE 5.5, 6 & 7, FF 2 & 3, Opera 9.27 and 9.52, and Safari 3. I made some changes like increasing the font sizes to accessability minimums, switching the content to dynamic fonts (which will automatically enlarge for large font/120dpi users), reducing the total width to be 800 width friendly, etc, etc. While the CSS is bigger, it's smaller HTML and with the image reductions it's 3 less images 50k less data. Oh, and take a look at it with images off.