I've got a design that I've tried to control through CSS and I've added a section - standard story, looks great in Firefox but needs a few hacks in IE If anyone had a few minutes to take a look I'll PM you the access codes. thanks Sarah
Sarah, have you got fixed up yet? I mean your page, not for Saturday night. If not, PM the necessaries and I'll take a look. cheers, gary
I've had a look, and the first thing I noticed was the xml declaration. You must remove that. IE is running in quirks mode where, among other evils, it uses the wrong box model. The second thing is that the page has about 117 errors in the html markup. All browsers are fault tolerent, though IE less so than FF (a Good Thing, imo), so the page is rendering much in spite of the markup. One quick example is line 63, where a div resides within a p, a no-no. Another example is several instances of td elements with the attribute width having an invalid value of eg. "100px". The width attribute metric unit may only be null or percentage, i.e., width="100" or width="100%". That could be a contributer to the problem. Even though browsers can manage with the errors, it is very difficult to debug in the presence of so many; one can have no expectation of particular results due to changes. If you wish the page to be centered in the viewport, add {margin: 0 auto;} to #outer. That won't work with IE until you remove the xml declaration. Fix the errors, and we'll be better able to sort out the little offsets. It wouldn't hurt if you would run the html through Tidy (available at w3 or sourceforge) to clean the markup and pretty print the doc. Debugging is much easier when code is nicely indented and the lines sanely wrapped. Here's a bit that's been Tidy'd. <body> <div id='outer'> <table border="0" cellpadding="0" cellspacing="0" width="804" bgcolor="#00104A"> <tr> <td valign="bottom" align="left" width="429"> <img src='/images/stories/page_bars/pools.gif'> </td> <td width="236px" background= "http://www.kidslessons.co.nz/templates/swim/images/searchtop.gif"> <form action="index.php" method="post"> <div class="search c1"> <input alt="search" class="inputbox" type="text" name= "searchword" size="15" value="search..." onblur= "if(this.value=='') this.value='search...';" onfocus= "if(this.value=='search...') this.value='';"> </div><input type="hidden" name="option" value="search"> </form> </td> <td width="139px"> <a href="http://www.kidslessons.co.nz" title= "Community Leisure Management information"><img src= "http://www.kidslessons.co.nz/templates/swim/images/clmbutton.gif" width="139" height="81" title= "Community Leisure Management information" border="0"></a> </td> </tr> </table> <div id='inner'> <div id='inner_block'> <table border="0" cellspacing="0" cellpadding="0" width= '808'> Code (markup): Machines can read anything; my old eyes need help. cheers, gary
Gary, you're a star. Because the site is Mambo the indenting can get a bit random - and I tidy as I debug. The doctype and xml bits have been removed and I've tidied it up as much as is practical. There's a tidier version at /test1.html Sarah
Hi Sarah, You must absolutely keep the DTD, else you can't begin to make IE act as a modern browser. The xml declaration/prolog is optional on xhtml delivered as xhtml+xml and is not a part of any html document. It wouldn't really matter, except putting anything ahead of the required DTD will cause IE to have a brain fart and drop back into quirks mode, a bad neighborhood. I removed most, if not all of the css rules that had no effect on this page. I'm pretty sure now that the trouble lies somewhere in the html table layout. Fortunately, for me at least, I haven't messed with table layouts in over three years. I just don't see where things are going wrong. The html is now xhtml strict valid and both IE and Firefox both exhibit the same rendering. From this point you won't have to sweat browser differences all that much and can concentrate on the table issues. That's pretty much the limit of my help. I'd bet some table user would spot the problem right off. Perhaps you could make the images available to the others. Guess that dims my star a bit <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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>local-CLM New Zealand - CLM</title> <meta name="description" content="Community Leisure Management" /> <meta name="keywords" content= "wave pools, swimsation, fitness, leisure, spa, train" /> <meta name="Generator" content= "Mambo - Copyright 2000 - 2005 Miro International Pty Ltd. All rights reserved." /> <meta name="robots" content="index, follow" /> <link rel="shortcut icon" href="http://www.kidslessons.co.nz/images/favicon.ico" /> <style type="text/css"> /*<![CDATA[*/ body { margin: 0px; background: #d2d6df; font-family: verdana, arial, helvetica, sans-serif; color: #050f4c; font-size: 11px; } * { padding:0; margin:0; } # div, h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 5%; } tr, p, div { font-size: 11px; color: #333333; } td { vertical-align: top; } hr { height: 1px; width: 100%; } h1 { font-size: 16px; margin-bottom: 10px; } img { border: none; } /*setting for the greetings*/ .mainpage { color: #0a288a; font-size: 13px; } .greybg { background: #eeeeee; } #active_menu { color: #0a288a; } /* --Default Class Settings-- */ /* --Default Class Settings-- */ a.mainlevel:link, a.mainlevel:visited { color: #0A288A; font-weight: bold; background-repeat: no-repeat; text-indent: 15px; text-decoration: none; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 20px; margin-bottom: 1px; margin-left: 15px; background: url(/images/bullet.gif) no-repeat left; padding-left: 8px; } a.mainlevel:hover { color: #0A288A; } ul { margin: 0; padding: 0; list-style: none; } li { line-height: 15px; padding-left: 10px; background-image: url(test1-sarah_files/arrow.png) ; background-repeat: no-repeat; background-position: 0px 3px; } #outer{ margin: 0 auto; /*added to center page --gt */ background-color: white; background: url(test1-sarah_files/wave.gif) no-repeat bottom; width: 804px; text-align: right; vertical-align: bottom; padding-bottom: 91px; } #outer img { border: 0; } /* inner is setup on the fly */ #inner{ text-align: left; vertical-align: top; background: white; background-image: url(test1-sarah_files/clm.jpg); background-repeat: no-repeat; padding-top: 110px; } #inner_block { /* border-left: 3px solid #F5C839; */ border-right: 4px solid #F5C839; } .minus3{ margin-left: -3px; } #mam-copy div{ background-color: #00104A; color: #295284; width: 804px; font-size: smaller; } #mam-copy a, #mam-copy a:visited{ color: #295284; } .fb_location{ border-bottom: 1px solid black; padding-top: 4px; padding-bottom: 4px; padding-left: 10px; } .fb_boxes{ text-align: right; border-right: 1px solid black; border-bottom: 1px solid black; padding-right: 10px; vertical-align: middle; } .fb_side{ border-right: 1px solid black; } #adminForm td{ vertical-align: top; padding: 5px; } #clmboard{ width: 138px; background: url(test1-sarah_files/boardbottom.gif) no-repeat bottom; padding-bottom: 32px; margin-left: -1px; } #clmboard div{ background: white url(test1-sarah_files/boardmid.gif) repeat-y; margin: 0 0 0 1px; padding: 0; width: 138px; } /*table at the top of the page */ .pagetop{ border-right: 4px solid #F5C839; background-color: #00104A; vertical-align: middle; } .pagetop td{ padding-top: 20px; } img{ border: none; } .clmbanner { background: url(test1-sarah_files/banner.gif) no-repeat top; margin-top: 45px; height: 260px; width: 168px; padding: 0; } .clmbanner img { } .clmbanner a { padding: 0 0 0 12px; } /*]]>*/ </style> </head> <body> <div id="outer"> <table class="pagetop" border="0" cellpadding="0" cellspacing="0" width="100%" summary=""> <tbody> <tr> <td align="left" valign="middle"><img src="test1-sarah_files/corplogo.gif" height="36" width="388" alt="" /></td> </tr> </tbody> </table> <div id="inner"> <div id="inner_block"> <table border="0" cellpadding="0" cellspacing="0" width="100%" summary=""> <tbody> <tr> <td valign="top"> <div id="clmboard"> <div> <img src="test1-sarah_files/boardtop.gif" alt= "Check out the pools other activities here" /> <table border="0" cellpadding="0" cellspacing="0" width="100%" summary=""> <tbody> <tr align="left"> <td><a href="#" class="mainlevel" id="active_menu" name="active_menu">CLM</a></td> </tr> <tr align="left"> <td><a href="#" class="mainlevel">News</a></td> </tr> <tr align="left"> <td><a href="#" class="mainlevel">Contact Us</a></td> </tr> <tr align="left"> <td><a href="#" class="mainlevel">Pools</a></td> </tr> </tbody> </table> </div> </div> </td> <td><img src="test1-sarah_files/pixel.png" alt="" height="1" width="6" /></td><!-- removing spacer alt text --> <td class="mainpage" valign="top"> <table class="blog" cellpadding="0" cellspacing="0" summary=""> <tbody> <tr> <td valign="top"> <div> <table class="contentpaneopen" summary=""> <tbody> <tr> <td colspan="2" valign="top"><img src= "test1-sarah_files/titlec_03.jpg" alt= "Welcome to Community Leisure Managment" title= "Welcome to Community Leisure Managment" height="27" width="115" /><br /> <br /> CLM is dedicated to running fun and safe recreational, fitness and aquatic facilities. We have a variety of great programmes and activities catering to all members of your family and friends.<br /> <br /> The CLM web site will give you information on all our facilities, programmes and activities that we offer. All our facilities and programmes run at the highest health and safety standards in New Zealand, enabling us to run quality programmes and activities for all the family.<br /> <br /> All CLM Facility staff are qualified and trained in First Aid, Customer Service and their specialized fields in sport, recreation and fitness. We are proud of our staff and consistently promote a fun and professional relationship with all users and members of our facilities.</td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </td> <td><img src="test1-sarah_files/pixel.png" alt="" height="1" width="1" /></td> <!-- don't show text for a spacer --> <td valign="top"> <div class="clmbanner"> <a href="#"><img src="test1-sarah_files/banner1.gif" alt="Advertisement" /></a> </div> </td> </tr> </tbody> </table><br /> </div> </div> </div><!-- 1147907797 --> </body> </html> Code (markup): cheers, gary