The design/layout looks great in FF but the far right column goes all buggy in both IE and Opera. I can't seem to find a reason for it. I was able to move the column down and to the right so that the top two sections of it are in the right position, but everything from there on seems to be taking the entire page where possible. Any ideas? There is definitely some Rep involved as reward for help. Thanks! http://www.thatedeguy.com/dev EDIT: It seems to be affecting the footer as well in IE and Opera Here's the CSS for it body { font: 80% Arial,"Trebuchet MS", "Lucida Sans Unicode", Tahoma, sans-serif; padding: 0; margin: 0; background: #666 url(images/greystripebg.png); color: #000; background-repeat: repeat; } #body_container { overflow: hidden; width: 942px; margin: 0 auto; padding: 0 12px; background: #ddd; } #nav_container { overflow: hidden; display: block; padding: 0; background: #33d url(images/transgrey.gif); } #nav_main { float: left; width: 635px; margin: 0 10px 0 0; padding: 0; background: #33d url(images/transgrey.gif); display: inline; } #nav_main ul { float: left; margin: 0; padding: 0; } #nav_main ul li { float: left; margin: 0; padding: 0; display: inline; } #nav_main ul li a { font-size: 1em; font-weight: bold; float: left; color: #ffe; text-align: center; margin: 0; padding: 8px 25px; text-decoration: none; } #nav_main ul li a:hover, #nav_main ul li a:active { border: none; margin: 0; background: #c60; text-decoration: underline; color: #000; } #nav_main ul li#current a { background: #c60; color: #000; } #search form { float: right; margin: 0; padding: 0 5px 0 0; } #search input#s { width: 235px; padding: 5px; margin: 2px 0; color: #333; background: #f7f7f7; border: 1px solid #c60; } #search input#search-submit { width: 50px; padding: 4px; margin: 0 0 0 0; color: #fff; border: 1px solid #333; background: #660000; } #header { float: left; width: 921px; margin: 0; padding: 10px 10px; display: block; clear: left; border-width: 1px 0; border-style: solid; border-color: #000; background: #fff; } #header h1 { display: inline; float: left; font-size: 2.5em; font-weight: bold; margin: 0; padding: 0; } #header h1 a { padding: 0; margin: 0 0 0 5px; } #header_title { float: left; } #header_banner { float: right; } #feed { padding: 2px 0px 0 0; } #feed ul { padding: 0px 0 5px 26px; margin: 0; } #feed ul li { margin: 0; padding: 0; list-style-type: none; } #feed ul li a { text-decoration: none; } #feed ul li a:hover { text-decoration: none; color: #000; background: #ccc; } #main_content { float: left; width: 921px; margin: 0; padding: 0 5px; background: #ddd; height: 100%; } #left_column { float: left; margin: 0; width: 611px; padding: 10px 0; background: #ddd; height: 100%; } #left_left { float: left; margin: 0; width: 300px; } #center_column { float: right; margin: 0; width: 300px; } #right_column { float: right; margin: 0px; width: 300px; background: #ddd; display: inline; } #single_left { width: 190px; float: left; margin: -10px 0 0 0; display: inline; z-index:1; } #single_center { float: right; margin: 0; width: 410px; } #single_center h2 { background: #fff url(images/transgrey.gif); } .navigation { margin:10px; width: 300px; display: inline; } .post { background: #fff; padding: 5px; } h1, h2, h4, h5, h6 { font-family: "times new roman",serif; font-weight: normal; color: #33c; margin: 0; } h3 { font-weight: normal; color: #000; margin: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: normal; text-decoration: none; color: #33c; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; } a { color: #33c; text-decoration: none; border: none; } a:hover { color: #000; } img { border: none; } img a { border: none; } #featured_post { float: left; width: 600px; border: 1px solid #c60; margin: 0px 0 0px 0; padding: 5px 5px 5px 5px; background: #fff; display: inline; } #featured_post img { float: left; width: 300px; height: 175px; margin: 3px 15px 10px 5px; display: inline; } #featured_post h2 { margin: 10px 5px 0 0px; padding: 0; font-size: 1.6em; background: #fff url(images/transgrey.gif); } #featured_post p { margin: 0px 0 0 9px; } #featured_post small { color: #c60; padding-top: 0; margin: 0px 0 0 10px; } #recent_posts { background: #fff; margin: 10px 0 5px 0; padding: 5px; } #skybanner { background: #fff; margin: 10px 0 5px 0; padding: 5px 10px 5px 10px; } #recent_posts h2 { background: #fff url(images/transgrey.gif); } #recent_posts p { font-size: 1.0em; margin: 0px 0 0px 9px; } #recent_posts li { list-style-type: none; padding-bottom: 15px; } #recent_posts small { color: #c60; padding-top: 0; margin: 0px 0 00px 10px; } .bar_item { background: #fff; margin: 10px 0 5px 0; padding: 5px; } #footer { color: #fff; clear: both; width: 940px; margin: 0 auto; background: #ddd; } #footer p { float: left; width: 50%; margin: 0 auto; padding: 5px 0; display: inline; } #footer a { color: #ccc; font-weight: bold; } #footer a:hover { text-decoration: underline; } #footer img { margin: 0 10px; border: none; } #addendum { float: left; color: #000; margin: 10px 0 10px 0; width: 630px; display: inline; } #addendum a { color: #c60; } #addendum_left { background: #ddd; border: 1px solid #c60; float: left; width: 307px; } #addendum_right { background: #ddd; border: 1px solid #c60; float: right; width: 307px; margin: 0 5px 0 5px; display: inline; } #aside { background: #ddd; border: 1px solid #c60; width: 305px; float: right; color: #000; margin: 10px 0 10px 0; display: inline; } #aside a { color: #c60; } #adblock_top { margin: 5px; height: 125px; background: #fff; } #adblock_bottom { margin: 10px 5px 5px 5px; height: 125px; background: #fff; } .adblock_left { margin: 0 0 0 10px; float: left; display: inline; } .adblock_right { margin: 0 10px 0 0; float: right; display: inline; } #adblock img { width: 125px; height: 125px; border: none; } .tab_result { margin: 10px 0 0 0; background: #fff; } .tab_result ul { padding: 40px 0 5px 40px; margin: 0; } .tab_result ul li { padding: 0; } .subscribe_tab { margin: 10px 0 0 0; padding: 40px 10px 10px 10px; background: #fff; } .subscribe_tab a { text-decoration: none; border: none; } .subscribe_tab ul { padding: 40px 0 5px 40px; margin: 0; } .subscribe_tab ul li { padding: 0; } .sub_left { float: left; } .sub_left a { border: none; } .sub_right a { border: none; } .sub_right { float: right; } .sub_bottom { padding: 65px 0 0 0; text-align: center; } ul.domtabs { float: left; width: 300px; list-style-type: none; margin: 0; padding: 0 0 0 0; clear: both; background: #ddd; } ul.domtabs li { float: left; display: inline; } ul.domtabs li a{ display: inline; padding: 5px; text-decoration: none; color: #000; background: #ccc; } ul.domtabs li a:hover { text-decoration: underline; } ul.domtabs li.active a { background: #fff; } #respond { margin: 0 auto; } #commentform { width: 290px; margin: 0; padding: 0; } Code (markup):
since Opera's also bugging out on this, it's more likely to be coding than a bug (Opera has its bugs but they're nothing like IE's). Have you added up all your widths of main boxes inside the main container? Do they add up to something under the total of the main page wrapping container? Also, no need for display: block on divs. I'll try to really look at it when I have some time. Husband says I have to go to sleep : )
I won't rule out a coding issue, but it appears fine in Firefox and does the exact same thing in Opera and IE. Also, it doesn't seem to be the width setting because the right column doesn't seem to respect it's boundaries in Opera and IE and the bottom overflows all the way over to the left. I haven't been able to figure that part out. Also, I don't think that it would affect the footer either, but that might be an entirely different problem as well.
Could you post screenshots of the display errors? Sorry, I just cant seem to have all browsers installed on my system. IE6 and IE7 is a one or the other deal. I only have FF and it appears fine? Circle what the errors are in the conflicting browsers or something...
These are from IE7, but the problem presents identically in Opera. I use browsershots to test crossbrowser. That way I don't have to have them all installed. In the first, you can see how the right column slips over to the left and up a little. Also, the background for the 125x125 ads on the right doesn't extend all the way down. In the second, you can see the right column still slipped over, then completely over after the column extends past the length of the other two columns. Also, you can see how the background of the footer is messed up as well. Both of these issues don't exist in Firefox.
UPDATE: The right column problem has been fixed. Still have the issue in the Footer, but I'm not as concerned about that, so there will be no reward for that. Edit: Ah, what the heck. $5 to the person who fixes the issue on the footer.
Hrm, in the #footer, i see background: #ddd;.... is that what that color is? Looks like it... I imagine that's what the problem you were describing was?
Bingo! It looks fine in FF, but IE and Opera were picking that up correctly. Actually a FF bug it seems. Removed that line and it looks great in IE and Opera now. BMHRULES!!! PM me your paypal address and I'll get you the $5!
Might want to submit that to Mozilla as a page that isn't displaying correctly. So they can fix it in FF3.
You don't just submit a page. You have to identify what property/value pair is not being interpreted correctly by the rendering engine and then submit it to bugzilla.
Your CSS is a messup (sorry but its the truth) Try to slowly clear the CSS and than you can easily locate your errors. For example, you are floating elements that don't need to be floated, for example whats the need of floating a li element as linked when it is already floating as li stand alone? Also for example the header id is floating and in the same CSS rule it clears (make up your mind, want to float it or clear?). Also overflow:hidden is used on container divs that does have a background and has floating elements within, and only that div does need a overflow hidden (aka, the container). Hope this will direct you to a solution.
Atleast he solved the majority of his browser problems though. Now he can go into depth about his other problems.