Please see my site here: http://maps.peachtree-city.org/google/index.html If someone has a moment and could help me out with this; My problem: In firefox the background spans what looks like 2 columns. In ie it looks like one plain white background - which is how it should look. I can't for seem to figure out what I'm overlooking: CSS Style sheet: CSS - http://maps.peachtree-city.org/google/index.html * Collapse All * Expand All http://maps.peachtree-city.org/google/index.html http://maps.peachtree-city.org/google/style/style.css /* global */ html{height: 100%;} body { font-family: verdana, arial, sans-serif; padding: 0px; margin: 0px; font-size: .68em; } p { margin: 0px; padding: 0px 0px 16px 0px; line-height: 1.7em; } h1 { font-family: arial, sans-serif; letter-spacing: .1em; } h2 { margin: 0px; padding: 0px 0px 4px 0px; font-size: 100%; } img{border: 0px;} a{outline: none;} /* image positioning - left, right and center */ .left { float: left; padding: 0px 8px 0px 0px; } .right { float: right; padding: 0px 0px 0px 8px; } .center { display: block; text-align: center; margin: 0 auto; } /* block quote */ blockquote { margin: 20px 0px 20px 0px; padding: 10px 20px 0px 20px; border-left: 8px solid; } /* unordered list */ ul { margin: 8px 0px 0px 16px; padding: 0px; } ul li { list-style-type: square; margin: 0px 0px 11px 0px; padding: 0px; } /* ordered list */ ol { margin: 8px 0px 0px 24px; padding: 0px; } ol li { margin: 0px 0px 11px 0px; padding: 0px; } /* margin lefts / margin rights - to centre content */ #main, #links, #footer, #logo, #menu, #content { margin-left: auto; margin-right: auto; } /* main container */ #main{width: 780px;} /* links above the logo / footer */ #links, #footer { padding: 10px 21px 0px 19px; width: 720px; height: 26px; font-size: 94%; text-transform: uppercase; } #links{text-align: right;} #footer{text-align: center;} #links a, #footer a{text-decoration: none;} #links a:hover, #footer a:hover{text-decoration: underline;} /* logo */ #logo { width: 760px; height: 100px; text-align: left; } #logo h1 { margin: 0px; padding: 41px 0px 0px 19px; font-size: 150%; letter-spacing: .2em; } /* navigation menu */ #menu { height: 42px; width: 760px; } #menu ul{margin: 0px auto;} #menu li { float: left; margin: 0px; padding: 0px; list-style: none; } #menu li a { display: block; float: left; height: 37px; text-decoration: none; padding: 3px 19px 2px 19px; text-transform: uppercase; } /* main content */ #content { width: 760px; height: auto; padding: 0px; overflow: hidden; } /* column 1 - contains sidebar items */ #column1 { width: 207px; float: right; padding: 16px 0px 15px 0px; } .sidebaritem { text-align: left; width: 188px; float: left; margin: 0px 0px 25px 0px; } .sbihead { height: 14px; width: 188px; padding: 5px 0px 5px 19px; text-transform: uppercase; } .sbihead h1 { padding: 0px; margin: 0px; font-weight: bold; font-size: 112%; } .sbicontent{padding: 14px 8px 8px 19px;} .sbicontent p { line-height: 14px; padding: 0px 0px 8px 0px; } .sbilinks{padding: 0px;} .sbilinks ul{margin: 0px auto;} .sbilinks li { margin: 0px; float: left; list-style: none; } .sbilinks li a , .sbilinks li a:hover { float: left; height: 16px; text-decoration: none; padding: 5px 0px 4px 19px; width: 188px; border: 0px; } /* column 2 - page content */ #column2 { text-align: justify; width: 512px; float: left; padding: 12px 3px 15px 19px; } #column2 h1 { padding: 6px 0px 4px 0px; margin: 0px 0px 12px 0px; border-bottom: 1px solid; font-size: 150%; text-transform: uppercase; font-weight: normal; } .sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover { padding: 0px; text-decoration: none; padding-bottom: 2px; border-bottom: 1px dashed; } .sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;} /* additional colour scheme selections */ #colour{margin: 0px 0px 20px 0px;} #colour a, #colour a:hover{border: 0px;} .blue { background: #FFFFFF url(blue.png) no-repeat left center; color: #109CEF; padding: 0px 40px 0px 20px; } .green { background: #FFFFFF url(green.png) no-repeat left center; color: #94C65A; padding: 0px 40px 0px 20px; } .purple { background: #FFFFFF url(purple.png) no-repeat left center; color: #CE5AEF; padding: 0px 40px 0px 20px; } .orange { background: #FFFFFF url(orange.png) no-repeat left center; color: #FF9C21; padding: 0px 40px 0px 20px; } http://maps.peachtree-city.org/google/style/orange.css body { background: #636363; color: #70695A; } blockquote{border-color: #767676;} #main { background: #FFF url(main.png) repeat-y; color: #70695A; } #links, #footer, #menu, #menu li a { background: #FFF url(menu.png); color: #DBD7D1; border-color: #D7D7D7; } #links a, #footer a, #links a:hover, #footer a:hover { background: transparent; color: #DBD7D1; } #logo { background: #FFF url(site_logo.jpg) no-repeat; color: #70695A; } h1 { background: transparent; color: #EA8916; border-color: #CAAE90; } #menu li a:hover, #menu li a#selected, #menu li a#selected:hover { background: #FFF url(orange_menu.png); color: #70695A; } #content, #column2 a, #column2 a:hover { background: transparent; color: #70695A; } .sbihead { background: #FFF url(orange_sbi.png); color: #70695A; } .sbihead h1 { background: transparent; color: #70695A; } .sbilinks li a { background: #FFF url(link.png); color: #DBD7D1; } .sbilinks li a:hover { background: #B7B7B7; color: #EA8916; } http://maps.peachtree-city.org/google/map.html Embedded Styles from http://maps.peachtree-city.org/google/map.html <!-- #containerul, #containerul ul{ text-align:left; margin:0; /* Removes browser default margins applied to the lists. */ padding:0; /* Removes browser default padding applied to the lists. */ } #containerul li{ margin:0 0 0 5px; /* A left margin to indent the list items and give the menu a sense of structure. */ padding:0; /* Removes browser default padding applied to the list items. */ list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */ } #containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */ float:left; width:12px; height:1em; background-position:0 50%; background-repeat:no-repeat; } --> .gmnoscreen{display:none} .gmnoprint{display:none} javascript:false;
Being I'm seeing (again - this is like the eighth site today I'm saying this) six different layouts in six different browsers, with ALL of them appearing to be broken in one way or another, I can't even be sure what it is you are trying to do. I can say that fixed height seems to instantly be made of /FAIL/ as is the embedded scrollbar. There's a reason you don't see websites doing that. Apart from that, we fall back on the standard analysis. Your doctype is invalid lacking a closing > and a system identifier, and once we fix that there are 39 validation errors likely meaning you do not have HTML, you have gibberish. You seem to be loading your page content in an iFrame, the pinnacle of accessability /FAIL/ (frames went the way of the dodo for a REASON), you seem to be using the target attribute NOT to target the frame but to open in a new page (target was deprecated in strict for a reason too) though those declarations seem to be chock full of invalid markup - are those supposed to be classes or the actual target? Either way this: target=" blank""CPCopy" is gibberish. The menu appears to break on large font/120 dpi machines, and you are using tags that have no place on a modern page (center). You have wrapping DIV's that aren't adding anything to the layout, one menu marked up properly as a list with another that's not... and that's before we even TALK CSS.
Quite right; ran some validation tests and I've concentrated so much on my 'css' problem that I have completely unvalidated my page on other levels. Your points are well taken - I'll get back to work on it.
Please see my original post: "In firefox the background spans what looks like 2 columns. In ie it looks like one plain white background - which is how it should look." I made corrections to errors and warnings based on DS's input; could someone advise me on my original problem. My page and source code: CSS - http://maps.peachtree-city.org/google/index.html * Collapse All * Expand All http://maps.peachtree-city.org/google/index.html http://maps.peachtree-city.org/google/style/style.css /* global */ html{height: 100%;} body { font-family: verdana, arial, sans-serif; padding: 0px; margin: 0px; font-size: .68em; } p { margin: 0px; padding: 0px 0px 16px 0px; line-height: 1.7em; } h1 { font-family: arial, sans-serif; letter-spacing: .1em; } h2 { margin: 0px; padding: 0px 0px 4px 0px; font-size: 100%; } img{border: 0px;} a{outline: none;} /* image positioning - left, right and center */ .left { float: left; padding: 0px 8px 0px 0px; } .right { float: right; padding: 0px 0px 0px 8px; } .center { display: block; text-align: center; margin: 0 auto; } /* block quote */ blockquote { margin: 20px 0px 20px 0px; padding: 10px 20px 0px 20px; border-left: 8px solid; } /* unordered list */ ul { margin: 8px 0px 0px 16px; padding: 0px; } ul li { list-style-type: square; margin: 0px 0px 11px 0px; padding: 0px; } /* ordered list */ ol { margin: 8px 0px 0px 24px; padding: 0px; } ol li { margin: 0px 0px 11px 0px; padding: 0px; } /* margin lefts / margin rights - to centre content */ #main, #links, #footer, #logo, #menu, #content { margin-left: auto; margin-right: auto; } /* main container */ #main{width: 780px;} /* links above the logo / footer */ #links, #footer { padding: 10px 21px 0px 19px; width: 720px; height: 26px; font-size: 94%; text-transform: uppercase; } #links{text-align: right;} #footer{text-align: center;} #links a, #footer a{text-decoration: none;} #links a:hover, #footer a:hover{text-decoration: underline;} /* logo */ #logo { width: 760px; height: 100px; text-align: left; } #logo h1 { margin: 0px; padding: 41px 0px 0px 19px; font-size: 150%; letter-spacing: .2em; } /* navigation menu */ #menu { height: 42px; width: 760px; } #menu ul{margin: 0px auto;} #menu li { float: left; margin: 0px; padding: 0px; list-style: none; } #menu li a { display: block; float: left; height: 37px; text-decoration: none; padding: 3px 19px 2px 19px; text-transform: uppercase; } /* main content */ #content { width: 760px; height: auto; padding: 0px; overflow: hidden; } /* column 1 - contains sidebar items */ #column1 { width: 207px; float: right; padding: 16px 0px 15px 0px; } .sidebaritem { text-align: left; width: 188px; float: left; margin: 0px 0px 25px 0px; } .sbihead { height: 14px; width: 188px; padding: 5px 0px 5px 19px; text-transform: uppercase; } .sbihead h1 { padding: 0px; margin: 0px; font-weight: bold; font-size: 112%; } .sbicontent{padding: 14px 8px 8px 19px;} .sbicontent p { line-height: 14px; padding: 0px 0px 8px 0px; } .sbilinks{padding: 0px;} .sbilinks ul{margin: 0px auto;} .sbilinks li { margin: 0px; float: left; list-style: none; } .sbilinks li a , .sbilinks li a:hover { float: left; height: 16px; text-decoration: none; padding: 5px 0px 4px 19px; width: 188px; border: 0px; } /* column 2 - page content */ #column2 { text-align: justify; width: 512px; float: left; padding: 12px 3px 15px 19px; } #column2 h1 { padding: 6px 0px 4px 0px; margin: 0px 0px 12px 0px; border-bottom: 1px solid; font-size: 150%; text-transform: uppercase; font-weight: normal; } .sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover { padding: 0px; text-decoration: none; padding-bottom: 2px; border-bottom: 1px dashed; } .sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;} /* additional colour scheme selections */ #colour{margin: 0px 0px 20px 0px;} #colour a, #colour a:hover{border: 0px;} .blue { background: #FFFFFF url(blue.png) no-repeat left center; color: #109CEF; padding: 0px 40px 0px 20px; } .green { background: #FFFFFF url(green.png) no-repeat left center; color: #94C65A; padding: 0px 40px 0px 20px; } .purple { background: #FFFFFF url(purple.png) no-repeat left center; color: #CE5AEF; padding: 0px 40px 0px 20px; } .orange { background: #FFFFFF url(orange.png) no-repeat left center; color: #FF9C21; padding: 0px 40px 0px 20px; } http://maps.peachtree-city.org/google/style/orange.css body { background: #636363; color: #70695A; } blockquote{border-color: #767676;} #main { background: #FFF url(main.png) repeat-y; color: #70695A; } #links, #footer, #menu, #menu li a { background: #FFF url(menu.png); color: #DBD7D1; border-color: #D7D7D7; } #links a, #footer a, #links a:hover, #footer a:hover { background: transparent; color: #DBD7D1; } #logo { background: #FFF url(site_logo.jpg) no-repeat; color: #70695A; } h1 { background: transparent; color: #EA8916; border-color: #CAAE90; } #menu li a:hover, #menu li a#selected, #menu li a#selected:hover { background: #FFF url(orange_menu.png); color: #70695A; } #content, #column2 a, #column2 a:hover { background: transparent; color: #70695A; } .sbihead { background: #FFF url(orange_sbi.png); color: #70695A; } .sbihead h1 { background: transparent; color: #70695A; } .sbilinks li a { background: #FFF url(link.png); color: #DBD7D1; } .sbilinks li a:hover { background: #B7B7B7; color: #EA8916; } http://maps.peachtree-city.org/google/disclaimer.html http://maps.peachtree-city.org/ms/style_css/styles.css <?xml version="1.0" encoding="ISO-8859-1"?> <!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> <title>Object not found!</title> <link rev="made" href="mailto:twhitley@peachtree-city.org" /> <style type="text/css"><!--/*--><![CDATA[/*><!--*/ body { color: #000000; background-color: #FFFFFF; } a:link { color: #0000CC; } p, address {margin-left: 3em;} span {font-size: smaller;} /*]]>*/--></style> </head> <body> <h1>Object not found!</h1> <p> The requested URL was not found on this server. The link on the <a href="http://maps.peachtree-city.org/google/disclaimer.html">referring page</a> seems to be wrong or outdated. Please inform the author of <a href="http://maps.peachtree-city.org/google/disclaimer.html">that page</a> about the error. </p> <p> If you think this is a server error, please contact the <a href="mailto:twhitley@peachtree-city.org">webmaster</a>. </p> <h2>Error 404</h2> <address> <a href="/">maps.peachtree-city.org</a><br /> <span>09/07/08 19:54:05<br /> Apache/2.2.0 (Win32) PHP/5.1.2</span> </address> <br> <a href="http://httpd.apache.org" target="_blank" alt="Powered by Apache2"><img src=/icons/apache_pb2.gif border="0"></a> </body> </html>