Guest Lotta Posted March 28, 2006 Share Posted March 28, 2006 Hi everyone, I´ve installed and modified Legend skin and when I moved the Site Docs box from the bottom of the page to the left column there were something strange happening with the background in the content area. I modified the index.tpl to this: So I changed it and modified the CSS so it looks okej in IE and in Opera like this: <!-- BEGIN: body --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" /> <title>{META_TITLE}</title> <meta name="description" content="{META_DESC}" /> <meta name="keywords" content="{META_KEYWORDS}" /> <link href="skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" /> <link href="skins/{VAL_SKIN}/styleSheets/style.css" rel="stylesheet" type="text/css" /> <script language="javascript" src="js/jslibrary.js" type="text/javascript"></script> </head> <body> <div id="pageSurround"> <div id="subSurround"> <div id="topHeader"> <div style="padding-top: 72px;">{SEARCH_FORM}</div> <div>{SESSION}</div> </div> <div> <div class="colLeft"> {CURRENCY} {LANGUAGE} {CATEGORIES} {SITE_DOCS} </div> <div class="colMid"> {PAGE_CONTENT} </div> <div class="colRight"> {SHOPPING_CART} {POPULAR_PRODUCTS} {SALE_ITEMS} {RANDOM_PROD} {INFORMATION} {MAIL_LIST} </div> </div> <br clear="all" /> </div> </div> </body> </html> <!-- END: body --> And then my Sitedocs.tpl looks like this after I modified it: <!-- BEGIN: site_docs --> <div class="boxTitleLeft">KUNDSERVICE</div> <div class="boxContentLeft"> <!-- BEGIN: a --> <a href="index.php?act=viewDoc&docId={DATA.doc_id}" class="txtSiteDocs">{DATA.doc_name}</a> <!-- BEGIN: sep --><br /><!-- END: sep --> <!-- END: a --> </div> <!-- END: site_docs --> This seems to have made the div page surround go crazy! #subSurround { border: 0px solid #5C84CE; background: url('http://www.onhands.com/shop/skins/Legend/styleImages/backgrounds/contentBg.jpg') repeat-x bottom center; position: absolute;/* IE Hack */ } So now it looks fine. Except for one thing. I had to add a height (?) in the CSS here: #pageSurround { width: 748px; height: 740px; margin: 0px auto; padding: 5px; border: 1px solid #C0C0C0; background-color: #FFFFFF; } If I dont have the height here the pageSurround are about 1 px height and that is all wrong. I don´t know what to do to make the height 100% and follow the subsurround? Gosh, I´m having difficulties to explain my problem... I´ll simply try with only one question: What do I have to do to make the pageSurround be 100% in height and not have a given height? The website are located here: www.onhands.com/shop Thanks for your time and I´ll appreciate all answers and ideas. Hope someone can help me! :) Quote Link to comment Share on other sites More sharing options...
Robsta Posted March 28, 2006 Share Posted March 28, 2006 I find the best way is to make the top level container a table, and set that to 100% height. Try changing the top level div... <div id="pageSurround"> ..... your site code.... </div> ... to something like... <table id="pageSurround" height="100%"><tr><td> ... your site code ... </td></tr></table> Of course you'll need to fiddle with the CSS for pageSurround including removing the height details from that ID in CSS... but this is one way. Quote Link to comment Share on other sites More sharing options...
Guest Lotta Posted March 28, 2006 Share Posted March 28, 2006 I find the best way is to make the top level container a table, and set that to 100% height. Try changing the top level div... <div id="pageSurround"> ..... your site code.... </div> ... to something like... <table id="pageSurround" height="100%"><tr><td> ... your site code ... </td></tr></table> Of course you'll need to fiddle with the CSS for pageSurround including removing the height details from that ID in CSS... but this is one way. Thank you!!! Why didn´t I think of that earlier on? I´ll try that!! Thanks once again!! :( Quote Link to comment Share on other sites More sharing options...
Guest Lotta Posted March 28, 2006 Share Posted March 28, 2006 I´ve tried that but it don´t seem to work with a table either... Take a look how it looks now: www.onhands.com/shop :D Quote Link to comment Share on other sites More sharing options...
Guest Lotta Posted March 28, 2006 Share Posted March 28, 2006 I´ve tried that but it don´t seem to work with a table either... Take a look how it looks now: www.onhands.com/shop YES I MADE IT! In IE it looks nice but in Opera and FireFox it don´t look nice at all.... :D Quote Link to comment Share on other sites More sharing options...
Robsta Posted March 28, 2006 Share Posted March 28, 2006 It's gone really wierd in Firefox too.... hmmm... 100% height is a pain, and can easily get broken. Try removing all the styling for it in the CSS until you can track down the problem styling. The table should be 100% without any CSS files, so to start with try removing all the CSS from loading to check the table does do 100% height. You certainly like a challenge :D Quote Link to comment Share on other sites More sharing options...
Guest Lotta Posted March 28, 2006 Share Posted March 28, 2006 It's gone really wierd in Firefox too.... hmmm... 100% height is a pain, and can easily get broken. Try removing all the styling for it in the CSS until you can track down the problem styling. The table should be 100% without any CSS files, so to start with try removing all the CSS from loading to check the table does do 100% height. You certainly like a challenge Yes, I certainly do! I think theres no other way then doing it step by step until I can track down the problem with the styling. *sigh* I´ve got a lot of work to do.... :D Quote Link to comment Share on other sites More sharing options...
Robsta Posted March 28, 2006 Share Posted March 28, 2006 Yes, I certainly do! I think theres no other way then doing it step by step until I can track down the problem with the styling. *sigh* I´ve got a lot of work to do.... I usually start from scratch, much easier. :) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.