I'm new to CSS and I usually start from scratch on designs, but I'm trying a template this time and I have an error on the page that is causing the background to land into incorrect places. I poured over it for a long time, but am lost... any ideas? Thanks in advance for the help! Here's the page: www.rbcavalier.com/testing.html and here's the code: <br><br> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <center> <title>RB CAVALIER</title> <style type="text/css"> body { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } #menu { position: absolute; left: 5px; padding: 0px; width: 150px; } #content { margin-left: 200px; padding: 0px; margin-right: 15px; } { margin: 0em; padding: 0em; } h1,h2,h3,h4,h5,h6 { text-transform: uppercase; letter-spacing: 0.2em; } body { font-family: "trebuchet ms", sans-serif; font-size: 10pt; background-color: #000000; color: #6F5129; } a { color: #667700; text-decoration: underline; } a:hover { text-decoration: none; } </style> </head> <body> <div id="outer"> <div id="header"> <center> <h1>RB Cavalier</h1> <h2>Arabi Fadh Onyx x BA Cerulean Ebony</h2> <style type="text/css"> #outer { width: 778px; margin: 2em auto; } #header { padding: 1.75em; text-align: center; } #header h1 { font-size: 2em; } #header h2 { font-size: 1em; color: #747474; } #header h1 a { color: #fff; text-decoration: none; } </style> </div> <div id="menu"> <style type="text/css"> #menu { background: #000000 url('images/a1.jpg') top left no-repeat; padding-top: 30px; height: 94px; width: 778px; } #menu ul { list-style: none; text-align: center; position: relative; top: 45px; } #menu li { padding: 0em 1.5em 0em 1.5em; display: inline; } #menu li a { color: #3A2000; font-weight: bold; text-transform: uppercase; text-decoration: none; font-size: 0.9em; letter-spacing: 0.2em; } #menu li a:hover { text-decoration: underline; } <ul> <li class="first"><a href="http://www.rbcavalier.com/welcome.html" accesskey="1">Home</a></li> <li><a href="breedinginfo.html" accesskey="2">Breeding Information</a></li> <li><a href="gallery.html" accesskey="3">Media Gallery</a></li> <li><a href="pedigree.html" accesskey="4">Pedigree</a></li> <li><a href="foals.html" accesskey="5">Foals</a></li> <li><a href="contact.html" accesskey="6">Contact</a></li> </ul> </style> </div> <br><br><br><br><br> <div id="content"> <div id="xbg1"></div> <div id="primaryContentContainer"> <div id="primaryContent"> <br> <style type="text/css"> #xbg1 { position: absolute; z-index: 1; background: #000000 url('images/a2.jpg') top no-repeat; width: 778px; height: 98px; } <br> #content { background: #000000 url('images/a3.jpg') top left repeat-y;} #content p { margin-bottom: 2em; line-height: 1.5em; } #content h2,h3,h4,h5,h6 { position: relative; color: #3F2109; margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: solid 1px #DFBF99; } #content h2 { font-size: 1.5em; } #content h3 { font-size: 1.1em; } #content ul { margin-bottom: 2em; padding-left: 1em; } #content blockquote { margin-bottom: 2em; } #content blockquote p { border-left: solid 8px #667700; padding-left: 1em; margin-bottom: 0em; } #content table { margin-bottom: 2em; } #content table th { text-align: left; font-weight: bold; padding: 0.5em; } #content table td { padding: 0.5em; } #content table tr.rowA { background-color: #DFBD99; color: inherit; } #content table tr.rowB { background-color: #EFDCC2; color: inherit; } </style> <br><br> <div id="xbg1"></div> <div id="primaryContentContainer"> <div id="primaryContent"> <style type="text/css"> #primaryContentContainer { position: relative; z-index: 2; float: right; margin-left: -18em; width: 100%; } #primaryContent { margin: 2em 3.0em 0em 19em; padding: 0em 0em 0em 1.5em; border-left: solid 1px #DFBF99; } </style> <h2>Welcome to Sitename.com!</h2> <p><strong>Burned</strong> is a free template from <a href="http://freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. Enjoy </p> <p>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque.</p> <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p> <h3>Example Unordered List</h3> <ul> <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li> <li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li> <li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li> <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li> <li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li> </ul> <h3>Example Blockquote</h3> <blockquote> <p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus.</p> </blockquote> <h3>Example Table</h3> <table> <tr> <th>Date</th> <th>Title</th> <th>Description</th> </tr> <tr class="rowA"> <td>December 1, 2006</td> <td>Sed vestibulum blandit</td> <td>Vivamus sollicitudin dolor sit amet eros. Vivamus ligula. Sed pretium turpis eu ipsum. Sed rutrum sapien id arcu.</td> </tr> <tr class="rowB"> <td>November 28, 2006</td> <td>Augue non nibh</td> <td>Nam adipiscing urna ac consequat dignissim massa est sodales sem.</td> </tr> <tr class="rowA"> <td>November 23, 2006</td> <td>Fusce ut diam bibendum</td> <td>Vestibulum quis urn nulla facilis nam malesuada cursus turpis.</td> </tr> <tr class="rowB"> <td>November 21, 2006</td> <td>Maecenas et ipsum</td> <td>Vivamus mi lectus gravida scelerisque, ultrices vitae cursus in neque.</td> </tr> </table> </div> </div> <div id="secondaryContent"> <style type="text/css"> #secondaryContent { position: relative; z-index: 2; float: right; width: 15em; margin-top: 2em; } </style> <h3>Etiam suscipit et</h3> <p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="http://www.free-css.com/">More…</a></p> <h3>Fusce dolor tristique</h3> <p>Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada. <a href="http://www.free-css.com/">More…</a></p> <h3>Nunc pellentesque</h3> <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="http://www.free-css.com/">More…</a></p> <h3>Ipsum Dolorem</h3> <ul> <li><a href="http://www.free-css.com/">Sagittis Bibendum Erat</a></li> <li><a href="http://www.free-css.com/">Malesuada Turpis</a></li> <li><a href="http://www.free-css.com/">Quis Gravida Massa</a></li> <li><a href="http://www.free-css.com/">Inerat Viverra Ornare</a></li> </ul> </div> <div class="clear"></div> </div> <div id="footer"> <style type="text/css"> #footer { width: 778px; height: 56px; padding-top: 30px; background: #000000 url('images/a4.jpg') top left no-repeat; text-align: center; } .clear { clear: both; } </style> <p>Copyright © 2010 rbcavalier.com. </p> </div> </div> </body> </html>
i am sorry but the coding is way too weak , you need a complete re do try doing this , pull all your css together before head tag or better, in a external stylesheet and try xhtml validating it , loads and loads of errors , and please use css a lot rather than using <br> tags
Agreed, unfortunately, trying to solve any one problem will be far too time consuming therefore a complete rewrite is needed... As Wp-Mod.com said, put all CSS before </head> or better yet place it in an external sheet. Don't forget your DOCTYPE declaration as well.... and remove the <br><br> prior to <html> Try validating the code over at W3C for suggestions, help and resources... - Good Luck!
I heartily endorse what the previous two posters said, it's a complete disaster that needs to be pitched and started over using VALID markup and modern coding techniques - as it would take too long to even try to fix what you currently have. To be more specific and to elaborate on what's wrong: 1) double breaks before the HTML element - if you're before the HTML element you shouldn't have HTML. 2) no doctype. IE is in quirks, making it even harder to write a page that works in IE and 'everyone else' at the same time. 3) style tag after the body tag. Depending on your doctype that might be invalid HTML 4) subtext on your heading is not the start of a new section, so that should not be a H2 (I'd probably make it a 'small' tag inside the h1) 5) Center tag has no place in a modern site. 6) I've got no idea where your menu actually is, though you seem to have a div for it (which is probably unneccessary since a menu is a list, and any styling would go on the UL directly) 7) line-breaks for spacing - don't waste markup doing CSS' job. 8) redundant openings to your sections. 9) more nonsensical heading orders. 10) server generated crap after the HTML is closed. If that's forced on you by your host, you might want to try and find a real host. It gets a little better down towards the bottom, but inlining CSS like that makes it such a train wreck none of us can find your markup for the styling, and you'll be hard pressed to find anyone willing to tackle that. It's so bad the validator is giving up after three errors when I easily see several dozen things that it should be notifying us on - like unclosed div. I'll dig deeper than most, and actually document what's wrong with your document by stripping out all that CSS, so we can see what's wrong in the HTML first. I'll put in HTML comments whereever I see something wrong, and I'll add comments to when your DIV are closed so we can see if indeed as I suspect there are unclosed div or mistakes from calling the same elements twice (which you do). <!-- double breaks before html - this is invalid markup, and what SHOULD be here is called a DOCTYPE --> <br><br> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- Center tag has no place in the HEAD, invalid markup --> <center> <title>RB CAVALIER</title> </head> <body> <div id="outer"> <div id="header"> <center> <h1>RB Cavalier</h1> <h2>Arabi Fadh Onyx x BA Cerulean Ebony</h2> <!-- unclosed center tag </div> <div id="menu"> </div> <br><br><br><br><br> <div id="content"> <div id="xbg1"></div> <div id="primaryContentContainer"> <div id="primaryContent"> <br> <!-- A <br> was INSIDE your style tag at this point, would not have rendered, and would have broken your CSS so it too would not have rendered! Below we have more breaks, stop using breaks to do CSS' job --> <br><br> <!-- Huh, these next few div look suspiciously like the ones preceeding it! Explains the layout being pushed way the *** over. Given that these are ID's, you can't use them more than once EITHER! --> <div id="xbg1"></div> <div id="primaryContentContainer"> <div id="primaryContent"> <h2>Welcome to Sitename.com!</h2> <p><strong>Burned</strong> is a free template from <a href="http://freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. Enjoy :)</p> <p>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque.</p> <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p> <h3>Example Unordered List</h3> <ul> <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li> <li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li> <li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li> <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li> <li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li> </ul> <h3>Example Blockquote</h3> <blockquote> <p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus.</p> </blockquote> <h3>Example Table</h3> <table> <tr> <th>Date</th> <th>Title</th> <th>Description</th> </tr> <tr class="rowA"> <td>December 1, 2006</td> <td>Sed vestibulum blandit</td> <td>Vivamus sollicitudin dolor sit amet eros. Vivamus ligula. Sed pretium turpis eu ipsum. Sed rutrum sapien id arcu.</td> </tr> <tr class="rowB"> <td>November 28, 2006</td> <td>Augue non nibh</td> <td>Nam adipiscing urna ac consequat dignissim massa est sodales sem.</td> </tr> <tr class="rowA"> <td>November 23, 2006</td> <td>Fusce ut diam bibendum</td> <td>Vestibulum quis urn nulla facilis nam malesuada cursus turpis.</td> </tr> <tr class="rowB"> <td>November 21, 2006</td> <td>Maecenas et ipsum</td> <td>Vivamus mi lectus gravida scelerisque, ultrices vitae cursus in neque.</td> </tr> </table> <!-- 'second' #primaryContent --></div> <!-- 'second' #primaryContentContainer --></div> <div id="secondaryContent"> <h3>Etiam suscipit et</h3> <p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="http://www.free-css.com/">More…</a></p> <h3>Fusce dolor tristique</h3> <p>Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada. <a href="http://www.free-css.com/">More…</a></p> <h3>Nunc pellentesque</h3> <p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="http://www.free-css.com/">More…</a></p> <h3>Ipsum Dolorem</h3> <ul> <li><a href="http://www.free-css.com/">Sagittis Bibendum Erat</a></li> <li><a href="http://www.free-css.com/">Malesuada Turpis</a></li> <li><a href="http://www.free-css.com/">Quis Gravida Massa</a></li> <li><a href="http://www.free-css.com/">Inerat Viverra Ornare</a></li> </ul> <!-- #secondaryContent --></div> <!-- unneccessary clearing div, set #secondaryContent to wrap floats instead! --> <div class="clear"></div> <!-- 'first' #primaryContent --></div> <div id="footer"> <!-- Not flow text, already has perfectly good block level container, why waste a paragraph tag on it? --> <p>Copyright © 2010 rbcavalier.com. </p> <!-- #footer --></div> <!-- 'first' #primaryContentContainer --></div> <!-- hey look, two unclosed div, #content and #outer - guaranteed to be becuase of the accidental double #primaryContent and #primaryContentContainer --> </body></html> <!-- Server generated crap below could also be ****ing your layout, and is invalid markup - get a real web host --> <!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1261257387" alt="setstats" border="0" width="1" height="1"></noscript> Code (markup): So you've got a lot to fix before you even think about applying a layout to your markup. Remember, before you start worrying/thinking about CSS and layout, you've got to get your HTML right first.
addendum For all we are saying is wrong, your markup wasn't THAT bad once you got into the body and if you ignore the heading orders and accidental opening of the same content ID pairing twice... I took a few moments to clean it up to how I'd code it, and I threw in some comments to explain my changes. <!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=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! The media types are important so that you are only sending the relevant CSS to the relevant devices. <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" /> --> <title> RB CAVALIER </title> </head><body> <!-- horizontal rules in the document below should be set to display:none, and are present just to break up content when CSS is off. You'll notice I put closing comments in for each section div, in addition to the PROPER indentation it helps me make sure I'm closing the element I want to close, as well as on long sections telling where each one ends. Placing the comment BEFORE the close prevents two bugs in IE that can occur between floats when comments are invloved - "double render" and "dissapearing content". You heard me right, IE is SO screwed up that COMMENTS can trigger bugs. --> <div id="pageWrapper"> <h1> RB Cavalier <small>Arabi Fadh Onyx x BA Cerulean Ebony</small> </h1> <!-- I can only assume you mean to have a menu, I plugged in some values since you didn't have any. Don't forget accesskeys for handheld users or Opera users like me who like to hit shift-esc --> <ul id="menu"> <li> <a href="#" accesskey="m" title="First Menu Item" ><b>M</b>enu Item</a> </li><li> <a href="#" accesskey="e" title="Second Menu Item" >M<b>e</b>nu Item</a> </li><li> <a href="#" accesskey="n" title="Third Menu Item" >Me<b>n</b>u Item</a> </li> </ul><hr /> <!-- You had an extra wrapping div, I'm going to assume that was for fauxColumns --> <div id="fauxColumns"> <div id="contentWrapper"><div id="content"> <h2>Welcome to Sitename.com!</h2> <p> <strong>Burned</strong> is a free template from <a href="http://freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. Enjoy :) </p><p> Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque. </p><p> Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa: </p> <!-- Are the following subsections of the above h2, or the start of new sections? If the former, then yes they should be h3, otherwise they are kin and should be h2 REGARDLESS of what you are doing for appearance. --> <h2>Example Unordered List</h2> <ul> <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li> <li><a href="http://www.free-css.com/">Vivamus sagittis bibendum erat.</a></li> <li><a href="http://www.free-css.com/">Nullam et orci in erat viverra ornare.</a></li> <li><a href="http://www.free-css.com/">Suspendisse quis gravida massa felis.</a></li> <li><a href="http://www.free-css.com/">Curabitur malesuada turpis nec ante.</a></li> </ul> <h2>Example Blockquote</h2> <blockquote> <p> Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus. </p><p> <cite>-- Lorem Ipsum</cite> </p> </blockquote> <h2>Example Table</h2> <table> <caption>Example Table</caption> <thead> <tr> <th>Date</th> <th>Title</th> <th>Description</th> </tr> </thead><tbody> <tr class="odd"> <td>December 1, 2006</td> <td>Sed vestibulum blandit</td> <td>Vivamus sollicitudin dolor sit amet eros. Vivamus ligula. Sed pretium turpis eu ipsum. Sed rutrum sapien id arcu.</td> </tr> <tr class="even"> <td>November 28, 2006</td> <td>Augue non nibh</td> <td>Nam adipiscing urna ac consequat dignissim massa est sodales sem.</td> </tr> <tr class="odd"> <td>November 23, 2006</td> <td>Fusce ut diam bibendum</td> <td>Vestibulum quis urn nulla facilis nam malesuada cursus turpis.</td> </tr> <tr class="even"> <td>November 21, 2006</td> <td>Maecenas et ipsum</td> <td>Vivamus mi lectus gravida scelerisque, ultrices vitae cursus in neque.</td> </tr> </tbody> </table> <!-- #content, #contentWrapper --></div></div> <div id="sideBar"><hr /> <!-- My above comment about the headings? Applies here too. Since these are likely your sidebar content, they are obviously NOT subsections of the welcome text and as such should NOT be dropped down to being h3 --> <h2>Etiam suscipit et</h2> <p> Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="http://www.free-css.com/">More…</a> </p> <h2>Fusce dolor tristique</h2> <p> Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada. <a href="http://www.free-css.com/">More…</a> </p> <h2>Nunc pellentesque</h2> <p> Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="http://www.free-css.com/">More…</a> </p> <h2>Ipsum Dolorem</h2> <ul> <li><a href="http://www.free-css.com/">Sagittis Bibendum Erat</a></li> <li><a href="http://www.free-css.com/">Malesuada Turpis</a></li> <li><a href="http://www.free-css.com/">Quis Gravida Massa</a></li> <li><a href="http://www.free-css.com/">Inerat Viverra Ornare</a></li> </ul> <!-- #sideBar --></div> <!-- #fauxColumns --></div> <div id="footer"><hr /> Copyright © 2010 rbcavalier.com. <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): NOW you start applying your CSS to it. Hope this helps.
Do ya one better, had a few spare moments and belted out the CSS to go with my markup... I re-did one of the images in the process since you were using two images and a extra container when a single image could do the job just as easily. http://www.cutcodedown.com/for_others/clueless333/template.html That's what you were trying to do, right? I got rid of the pt metric fonts and swapped it to %/EM based off default, made sure that wouldn't interfere with anything major too. Valid XHTML 1.0 Strict, Valid CSS 2, tested working 100% in IE 5.5, 6, 7 & 8, FF 2 & 3, opera 9.6 and 10.10, as well as the latest flavors of safari and chrome. The behavior of %/EM was tested at both 96dpi (small fonts) and 120dpi (large fonts), though because it's in a crappy little fixed width container it naturally breaks down at anything larger. (which is why fixed width image backgrounds are frowned upon in accessibility circles). As with all my examples the directory: http://www.cutcodedown.com/for_others/clueless333/ is unlocked so you can grab the gooey bits and pieces. Hope this helps. Any questions, fire away.
Thank you! This helps tremendously... I was trying to use a pre-fab template and couldn't get it to work... thus I kept trying to reform the code with virtually no css knowledge, hence the mess that was my template. What is the proper way to combine codes on pre-fab templates to make them appear appropriately on the page? For instance, something from freecsstemplates.com? Thanks again for your help and the in-depth explanations!
That is a sure way to hair loss. First learn CSS and HTML. With this knowledge, you can not only see which templates are even worth the bother (plenty of garbage is out there, and right now you're like a guy who's never done more than see a car, trying to buy a good one... lawlz!) and then you'll also know how to bend it to your will. If you don't have time to do that, then at least get a CSS person to look at templates you're considering to tell you which ones are garbage. Going back to the other analogy, bring a mechanic with you to help you determine which cars are worth even looking at. Avoid the Yugos.