Krewe Posted December 24, 2011 Share Posted December 24, 2011 Well I am trying to finish up my wordpress template, however, Float:Left is causing me a lot of trouble.I have my site set up as a table.There are two columns in my table, the left column is for the Logo, Nav and Footer. The column on the right has a rowspan of 2 so the footer will follow it down however far it needs to. And the footer row is valign bottom so it will appear as a footer. Pretty simple. I thought this was a simple idea. And it was. However, when Wordpress makes their blog have a float:left attribute it messes everything up. I have tried everything to fix this. So I was hoping someone could help. This is the template for the page with out anything in it except for the nav, logo and footer:HTML: <body> <table border="0" style="margin:0;padding:0;" cellpadding="0" cellspacing="0" height="100%"> <tr> <td id="left" valign="top"> <img src="images/logo.png" width="200" height="115" /><br /> <a id="nav" href="#"><img src="images/home.png" alt="home" class="home" /></a><br /> <img src="images/line.png" width="200" height="2" /> <a id="nav" href="#"><img src="images/about.png" alt="about" class="home"/></a><br /> <img src="images/line.png" width="200" height="2" /> <a id="nav" href="#"><img src="images/portfolio.png" alt="portfolio" class="home"/></a><br /> <img src="images/line.png" width="200" height="2" /> <a id="nav" href="#"><img src="images/services.png" alt="services" class="home"/></a><br /> <img src="images/line.png" width="200" height="2" /><br /> <a id="nav" href="#"><img src="images/blog.png" alt="blog" class="home"/></a><br /> <img src="images/line.png" width="200" height="2" /><br /> <a id="nav" href="#"><img src="images/contact.png" alt="contact" class="home"/></a> </td> <td id="content" rowspan="2"> </td> </tr> <tr height="100%"> <td id="footer" align="left" valign="bottom"> <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Blog</a> | <a href="#">Contact</a><br /> <img src="images/line.png" width="200" height="2" /><br /> Code Krewe<br /> <a href="index.html">Www.CodeKrewe.Com</a><br /> Contact@CodeKrewe.Com </td> </tr> </table></body> CSS: html,body{height:100%;margin:0;padding:0;}body{font-family:Arial, Helvetica, sans-serif;background-image:url(../images/stripes2.png);background-color:#202020;background-repeat:repeat;color:#CCCCCC;text-shadow:0px 1px 1px #000000;}h1,h2,h3,h4,h5,h6{color:#999999;}h1{font-size:32px;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:16px;}h6{font-size:14px;}a:focus{outline:none;}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0;}ol{list-style:decimal;}ul{list-style:none;}li{margin-left:30px;}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px;}a{color:#FF9900;text-decoration:none;}a:hover{color:#FFCB7E;text-decoration:underline;}a img{border:0;}kbd{font-size:10px;}q:before,q:after{content:"\0022";}dd{margin-left:20px;}pre{font-size:11px;overflow:scroll;}p img{max-width:100%;}#left{width:200px;padding-right:20px;}#content{width:100%;min-width:900px;background-image:url(../images/stripes2.png);background-color:#333333;}#left img.home{padding-top:10px;padding-bottom:10px;padding-left:0px;-moz-transition:padding-left 1s; /* Firefox 4 */-webkit-transition:padding-left 1s; /* Safari and Chrome */-o-transition:padding-left 1s; /* Opera */}html.good #left img.home:hover{padding-left:50px;}@keyframes Spin{0% {transform:rotate(0deg);}50% {transform:rotate(360deg);}100% {transform:rotate(-360deg);}}@-moz-keyframes Spin{0% {-moz-transform:rotate(0deg);}50% {-moz-transform:rotate(360deg);}100% {-moz-transform:rotate(-360deg);}}@-webkit-keyframes Spin{0% {-webkit-transform:rotate(0deg);}50% {-webkit-transform:rotate(360deg);}100% {-webkit-transform:rotate(-360deg);}}#footer{font-size:11px;color:#CCCCCC;text-shadow:0px 1px 1px #000000;line-height:15px;}#footer a:link,#footer a:visited{color:#CCCCCC;text-decoration:none;}#footer a:hover,#footer a:active{color:#CCCCCC;text-decoration:underline;} -----------------------------------------------------------------------------------------------------------------You can also go to Http://www.codekrewe.com to view how the template looks with nothing on it.----------------------------------------------------------------------------------------------------------------- Here is the code I think you should have because this is what I am messing with. If you know Wordpress, and know I am not looking at the right area let me know and I will get the appropriate code. Style.css html,body{height:100%;margin:0;padding:0;}body{font-family:Arial, Helvetica, sans-serif;background-image:url(/images/stripes2.png);background-color:#202020;background-repeat:repeat;color:#CCCCCC;text-shadow:0px 1px 1px #000000;}h1,h2,h3,h4,h5,h6{color:#999999;}h1{font-size:32px;}h2{font-size:28px;}h3{font-size:24px;}h4{font-size:20px;}h5{font-size:16px;}h6{font-size:14px;}a:focus{outline:none;}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0;}ol{list-style:decimal;}ul{list-style:none;}li{margin-left:30px;}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px;}a{color:#FF9900;text-decoration:none;}a:hover{color:#FFCB7E;text-decoration:underline;}a img{border:0;}kbd{font-size:10px;}q:before,q:after{content:"\0022";}dd{margin-left:20px;}pre{font-size:11px;overflow:scroll;}p img{max-width:100%;}#left{width:200px;}#middle{width:100%;min-width:900px;background-image:url(/images/stripes2.png);background-color:#333333;} #left img.home{padding-top:10px;padding-bottom:10px;padding-left:0px;-moz-transition:padding-left 1s; /* Firefox 4 */-webkit-transition:padding-left 1s; /* Safari and Chrome */-o-transition:padding-left 1s; /* Opera */}html.good #left img.home:hover{padding-left:50px;} @keyframes Spin{0% {transform:rotate(0deg);}50% {transform:rotate(360deg);}100% {transform:rotate(-360deg);}}@-moz-keyframes Spin{0% {-moz-transform:rotate(0deg);}50% {-moz-transform:rotate(360deg);}100% {-moz-transform:rotate(-360deg);}}@-webkit-keyframes Spin{0% {-webkit-transform:rotate(0deg);}50% {-webkit-transform:rotate(360deg);}100% {-webkit-transform:rotate(-360deg);}}#footer{clear:both;font-size:11px;color:#CCCCCC;text-shadow:0px 1px 1px #000000;line-height:15px;}#footer a:link,#footer a:visited{color:#CCCCCC;text-decoration:none;}#footer a:hover,#footer a:active{color:#CCCCCC;text-decoration:underline;} /* ### PAGE SETTINGS ### */#content{width:960px;clear:both;margin-left:auto;margin-right:auto;} #main{width:640px}.col-full{margin:0 auto;width:960px}[u][b]--> .col-left{float:left;}[/b][/u][u][b]--> .col-right{float:right;}[/b][/u] /* ### POSTS ### */.post,div.page{border-bottom:2px groove #999999;margin-bottom:20px;padding:30px 30px 10px 30px; text-align:left;}.post a{text-decoration:none;}.post a:hover{text-decoration:underline}.post-title h1,.post-title h1 a{color:#999999;line-height:32px;margin-bottom:10px;text-decoration:none}.post-title h1 a:hover{color:#CCCCCC;text-decoration:none;border:none}.post-title h4{color:#999999;line-height:32px;padding:30px}.post-entry{}.post-entry ul li{list-style:disc}.post-meta{color:#CCCCCC;font-size:10px;margin-bottom:20px}.post-meta a{color:#FF9900}.post-meta a:hover{color:#FFCB7E;text-decoration:underline}.post-meta-info{}.post-meta-comments{float:right}.post-read-more{margin:30px 0 20px 0}.post-read-more a{color:#FF9900;font-weight:bold;text-decoration:none}.post-read-more a:hover{color:#FFCB7E;text-decoration:underline}.post blockquote{border-left:3px solid #ccc;font-size:13px;font-style:italic;margin:15px 30px 15px 10px;padding-left:20px}.post acronym,.post abbr{border-bottom:1px dashed #999;cursor:help}.wp-caption p{font-size:11px}.sticky{background:#fef5be}div.attachment{border:1px solid #ddd;margin-bottom:20px;padding:30px 30px 10px 30px}p.attachment{text-align:center} /* ### COMMENTS ### */.commentlist{border:1px solid #ddd;margin-bottom:20px;padding: 30px 0;text-align:justify}.commentlist h4{padding:0 30px}.commentlist ol{padding-right:30px}.commentlist ol li{list-style:none}.comment-meta{font-size:12px;margin:18px 10px 10px 0}.comment-meta img{float:left;margin:0 10px 0 0}.comment-meta span{line-height:42px}.comment-meta span.comment-name{font-weight:bold}.comment-meta span.comment-name a,.comment-meta span.edit a,.comment-meta span.permalink a{color:#333;text-decoration:underline}.comment-meta span.comment-name a:hover,.comment-meta span.edit a:hover,.comment-meta span.permalink a:hover{color:#cc0000;text-decoration:underline}.comment-meta span.date{font-size:11px}.comment-meta span.edit a:hover,.comment-meta span.permalink a:hover{text-decoration:underline}.comment-entry{padding:10px 15px;border-bottom:1px dotted #ccc}.comment-entry p{margin:0}.comment-entry blockquote{border-left:3px solid #ccc;font-size:13px;font-style:italic;margin:15px 30px 15px 10px;padding-left:20px}.comment-form{border:1px solid #ddd;font-size:11px;padding-top:30px}.comment-form h4{margin-bottom:18px;padding:0 30px}.comment-form a{color:#FF9900;text-decoration:underline}.comment-form a:hover{color:#FFCB7E;text-decoration:underline}.comment-form fieldset{padding:0 30px}.comment-form input{border:1px solid #666;margin:2px 0;padding: 5px}.comment-form textarea{border:1px solid #666;height:150px;margin:2px 0;padding:5px;width:98%}.comment-form .notice{color:#666;float:right}.comment-navigation{padding:10px 30px}.comment-navigation a{color:#FF9900;font-size:10px;font-weight:bold;text-decoration:underline}.comment-navigation a:hover{color:#FFCB7E}.comment-reply a{color:#FF9900;font-size:10px;font-style:italic;text-decoration:underline}.comment-reply a:hover{color:#FFCB7E}.comment-unapproved{font-size:10px;font-style:italic;color:#0000cc}#cancel-comment-reply a{color:#FF9900;font-style:italic;padding:0 30px}#cancel-comment-reply a:hover{color:#FFCB7E}.nocomments{border:1px solid #ddd;margin-bottom:20px;padding:30px} /* ### POSTS NAVIGATION ### */.more-entries{padding:20px 0 40px 0}.more-entries a{color:#FF9900;font-weight:bold;text-decoration:none}.more-entries a:hover{text-decoration: underline} /* ### WIDGETS ### */.widget{border-left:2px groove #999999;margin:40px;}.widgettitle{font-size:18px;padding:0 20px;margin:0 0 10px 0}.widgetcontent{padding:0 10px}.widget li{margin-left:10px}.widget ul,.widget_recent_comments ul{padding:0!important}.widget ul li,.widget_recent_comments ul li{font-size:12px;padding-top:10px}.widget ul li a:hover,.widget_recent_comments ul li a:hover{text-decoration:underline}.widget ul li ul .children{padding-left:10px}.widget select {margin:10px 10px 20px 10px}.textwidget{margin-bottom:20px;padding:10px}.widgetsearchform{margin-left:10px} /* ### CALENDAR ### */#wp-calendar{clear:both;font-size:12px;width:90%}#wp-calendar caption {font-weight:bold;padding:0 0 10px 0;text-transform:uppercase}#wp-calendar th,#wp-calendar td{text-align:center;padding:5px}#wp-calendar td{background:transparent}#wp-calendar td a{font-weight:bold;text-decoration:none}#wp-calendar td a:hover{text-decoration:underline}#wp-calendar td,table#wp-calendar th{padding:3px 0}#wp-calendar tfoot a{color:#333;text-decoration:underline}#wp-calendar tfoot a:hover{color:#cc0000} /* ### TAG CLOUD ### */.widget_tag_cloud .widgetcontent div{padding:10px} /* ### SEARCH ### */#searchform{margin:8px 0}#searchform label{display:none}input#s{border:1px solid #ddd;color:#666;padding:3px 0 3px 5px;width:250px}input#searchsubmit{border:1px solid #ddd;color:#666;height:25px;margin:0} /* ### MISCELLANEOUS ### */.alignleft{float:left}.alignright{float:right}.aligncenter{display:block;margin-left:auto;margin-right:auto}.error{background:#ffcdd1;border-top:2px solid #e10c0c;border-bottom:2px solid #e10c0c;text-align:left;padding:5px 20px}.alert{background:#fef5be;border-top:2px solid #fdd425;border-bottom:2px solid #fdd425;text-align:left;padding:5px 20px}.ok{background:#d7f7c4;border-top:2px solid #82cb2f;border-bottom:2px solid #82cb2f;text-align:left;padding:5px 20px}.note{background:#efefef;border-top:2px solid #dedede;border-bottom:2px solid #dedede;text-align:left;padding:5px 20px}.info{background:#f7fafd;border-top:2px solid #b5d3ff;border-bottom:2px solid #b5d3ff;text-align:left;padding:5px 20px} /* blue */.download{background:#f7fafd;border-top:2px solid #82cb2f;border-bottom:2px solid #82cb2f;text-align:left;padding:5px 20px} /* ### CLEARING FLOATS ### */html body * dd.clear,html body * div.clear,html body * li.clear,html body * span.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;height:0;list-style:none;margin:0;overflow:hidden;padding:0;visibility:hidden;width:0} Two lines in the CSS have arrow pointing at them, those are the floats that are ruining the code... The code right now looks perfect in Chrome. However In Firefox and IE it pushes the everything on the left down.When you take out the lines Here is the header.php, minus all the head stuff... <body><table border="0" cellpadding="0" cellspacing="0" height="100%"> <tr> <td id="left" valign="top"> <img src="/images/logo.png" width="200" height="115" /><br /> <a id="nav" href="#"><img src="/images/home.png" alt="home" class="home" /></a><br /> <img src="/images/line.png" width="200" height="2" /> <a id="nav" href="#"><img src="/images/about.png" alt="about" class="home"/></a><br /> <img src="/images/line.png" width="200" height="2" /> <a id="nav" href="#"><img src="/images/portfolio.png" alt="portfolio" class="home"/></a><br /> <img src="/images/line.png" width="200" height="2" /> <a id="nav" href="#"><img src="/images/services.png" alt="services" class="home"/></a><br /> <img src="/images/line.png" width="200" height="2" /><br /> <a id="nav" href="#"><img src="/images/blog.png" alt="blog" class="home"/></a><br /> <img src="/images/line.png" width="200" height="2" /><br /> <a id="nav" href="#"><img src="/images/contact.png" alt="contact" class="home"/></a> </td> <td id="middle" rowspan="2"> Here is the Main Index Area: <?php get_header(); ?><div id="content"><div id="main" class="col-left"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php include('post.php'); ?> <?php endwhile; ?> <?php if ( function_exists('wp_pagenavi') ) { ?> <?php wp_pagenavi(); ?> <?php } else { ?> <ul class="more-entries"> <li class="alignleft"><?php next_posts_link( __('« Older Entries', 'cp') ); ?></li> <li class="alignright"><?php previous_posts_link( __('Newer Entries »', 'cp') ); ?></li> </ul> <?php } else : ?> <div class="post-title"> <h4><?php _e('No posts were found', 'cp'); ?></h4> </div> <?php endif; ?></div><!-- #END main --><?php get_sidebar(); ?></div><?php get_footer(); ?> And lastly here is the footer: </td></tr> <tr height="100%"> <td id="footer" align="left" valign="bottom"> <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Blog</a> | <a href="#">Contact</a><br /> <img src="/images/line.png" width="200" height="2" /><br /> Code Krewe<br /> <a href="/index.html">Www.CodeKrewe.Com</a><br /> Contact@CodeKrewe.Com </td> </tr></table><?php if ( get_option('cp_analytics') <> '') { echo stripslashes(get_option('cp_analytics')); } ?></body></html> I'd really appreciate the help! Here is a screenshot from Chrome and Firefox (In that order): I want Firefox and IE to look like Chrome. Link to comment Share on other sites More sharing options...
Krewe Posted December 24, 2011 Author Share Posted December 24, 2011 UGH... I am so close to get it the same on every browser (Or closer than it is.)Http://www.codekrewe.com/blog In chrome there are two things right. The sidebar acts like it has a margin-top on it... and the footer now isn't on the bottom of the page (This is the same problem other browsers have).In IE, Firefox, and Opera the site looks exactly the same. The whole blog area acts like there is a margin-top on it, then an extra margin-top on sidebar. And then the footer problem... You can see how it looks on that link. Link to comment Share on other sites More sharing options...
Krewe Posted December 25, 2011 Author Share Posted December 25, 2011 I am just about finished with WordPress... I am just going to make my own blog.Later Peeps. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.