webgyrl Posted February 1, 2008 Share Posted February 1, 2008 (edited) Hi All, I've been working on the design for my Dad's new web site and I've run into a problem with a DIV i think. I want the site to be fluid in length based on what content there is. I notice on some of the pages that the bottom has a huge gap in it and the page is not elastic like I want it to be. I can't figure out what the problem is. An example of a problematic page is: >h##p://www.sourcebindingpacific.com/productdetails.php?pID=11 The CSS file is here: >h##p://www.sourcebindingpacific.com/style.css Replace pound signs with tt to get to live URL. If you need me to post up anything else, let me know. I'm a bit gap stumped! LOL Thanks! Edited February 1, 2008 by webgyrl Quote Link to comment Share on other sites More sharing options...
TCH-Andy Posted February 1, 2008 Share Posted February 1, 2008 You are missing a /div before the /body at the end ( to close the wrapper div). There are a couple of other errors, and you have coding in xhtml but the doctype is defined as html ... so I'd suggest correcting that to. Quote Link to comment Share on other sites More sharing options...
webgyrl Posted February 1, 2008 Author Share Posted February 1, 2008 Hi Andy! Thanks for that I'll give it a whirl. What's odd is that on file here I have: <!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"> For the doctype. I did hand this over to another guy who was programming my Dad's CMS. So maybe he changed it somehow. I'll have to ask him. Unless what I did above is the wrong one? Thanks. Quote Link to comment Share on other sites More sharing options...
webgyrl Posted February 1, 2008 Author Share Posted February 1, 2008 Yup- looks like the Doctype stuff was changed when I handed it over to the guy coding the CMS. I changed it back to the correct Doctype. He's coded everything into Smarty Templates. So I'm sorting thru that as it's all different to when I gave him my basic template files. I also added in a closing </div> (DOH! on me) to three of the .tpl files, but I'm still getting the bottom gap. The guy who coded the CMS told me that he changed something to do with height in the CSS, so I have to look at that closer. I'm getting to the point with this where I can't 'see' things anymore! LOL If anyone can see why I'd still get that gap, I'm all eyes and ears. Quote Link to comment Share on other sites More sharing options...
Bob Crabb Posted February 2, 2008 Share Posted February 2, 2008 The wrapper element has a fixed height of 1000px. >/*** Layout ****/ #wrapper { background: #ffffff; margin: 0 auto; width: 776px; height: 1000px; border-left: 1px solid #f0e9eb; border-right: 1px solid #f0e9eb; } Try commenting out the height: >/*** Layout ****/ #wrapper { background: #ffffff; margin: 0 auto; width: 776px; /*height: 1000px;*/ border-left: 1px solid #f0e9eb; border-right: 1px solid #f0e9eb; } Quote Link to comment Share on other sites More sharing options...
webgyrl Posted February 2, 2008 Author Share Posted February 2, 2008 (edited) Hi Bob, Yes I realized that the guy had put in the fixed height and I didn't know it was there till I saw the CSS. I thought changing the existing property would work (from): >#wrapper { background: #ffffff; margin: 0 auto; width: 776px; height: 1000px; border-left: 1px solid #f0e9eb; border-right: 1px solid #f0e9eb; So I changed it to this: >#wrapper { background: #ffffff; margin: 0 auto; width: 776px; height: auto; border-left: 1px solid #f0e9eb; border-right: 1px solid #f0e9eb; And I also tried commenting out the height line. But when I did that I get no solid white background behind the content? This is with the 1000px in: This is with auto/height commented out in: Not sure why the background would not fill in when I take out height. Any clues? Edited February 2, 2008 by webgyrl Quote Link to comment Share on other sites More sharing options...
Bob Crabb Posted February 2, 2008 Share Posted February 2, 2008 I hate it when that happens. I copied your code and tested it in my development space. Looking at the wrapper div with Firefox web developer, it shrinks to a height of 78px. That happened to me recently on a page where I had an inner container with some floating divs. I never did figure it out, but found that I really didn't need the inner container so I didn't pursue it. I'll continue to work with this to see if I can figure it out, but hopefully someone will come along who knows this problem, and knows more than me will step in with a solution. Quote Link to comment Share on other sites More sharing options...
Bob Crabb Posted February 2, 2008 Share Posted February 2, 2008 Webgyrl, I think that I found the problem. There is a missing /div tag, so your header div isn't closed at the right location. Add a /div tag before the div id="bg" Then comment out the height declaration in the #wrapper definitions in CSS. I think that will work. Quote Link to comment Share on other sites More sharing options...
Bob Crabb Posted February 2, 2008 Share Posted February 2, 2008 Webgyrl, If you add the /div that I suggested above, you will also need to delete the last /div tag before the /body tag. ------------- Quote Link to comment Share on other sites More sharing options...
webgyrl Posted February 2, 2008 Author Share Posted February 2, 2008 Bob! I think it's solved. I added in the missing end div and removed the other div and it's working now. My goodness, I can't believe I missed this. I wish there was a closing div checker. I seem to do this all the freaking time! LOL I can't thank you and Andy enough for being the seeing eyes while mine were blind. Actually this gave me an idea. You know when you work on a site... usually you miss these little things because you've just looked at it so much? Someone should start a code checker club where members check code for each other to see things that other people are blind to. When you are so close to a project you often become blind to things. I don't know why this is. But anyway, just a werid idea I had. Thanks again all! I think it's case solved. Just have to check all the XHTML errors, but I'll have to get with the guy who coded the CMS to help on that as much of that is his code. One thing that puzzled me was this error: # Error Line 71, Column 142: element "P" undefined. …1>About Source Binding Pacific</h1><P>Source Binding Pacific was established You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by: * incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element), * by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead). * by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case). So P is not defined in XHTML? That is confusing to me. But anyway, that's a whole other ball of code... LOL Quote Link to comment Share on other sites More sharing options...
Bob Crabb Posted February 2, 2008 Share Posted February 2, 2008 Webgyrl, I'm glad that worked. I think that we all sometimes need another person to look at a problem; I can stare at a file for hours and not see the obvious. One tool that I like to use for checking to make sure that tags are closed where I think they should be closed is Notepad++. You can click on a + or - in the left column next to the opening tag of an element to collapse all the code within the element. That's how I found this problem. The Web Developer tool bar for Firefox is also a great development tool. In answer to your question about the P tag not validating, the problem is that it is an upper case P. In XHTML, only lower case is allowed. You have several tags that contain upper case. Also, the head tag is missing from your template. This probably occured when pasting the doc type into the file (I've done that before too). I looked at this page, though, and it won't take much to make it validate. Essentially, add a head tag after the html tag, change all the uppercase to lower case, add an ending / to your meta tags, make sure that any "&" are escaped as "&" , and I think there is a script that doesn't have a type parameter. There might be a couple of other things, but I think that was most of it. Cheers, --Bob Quote Link to comment Share on other sites More sharing options...
webgyrl Posted February 13, 2008 Author Share Posted February 13, 2008 Well it's up now and Dad is happy. So that is great. Thank you as usual for all the help. I sure learn a lot around here! 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.