Jump to content

Problem With A Div


webgyrl
 Share

Recommended Posts

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 by webgyrl
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

}

Link to comment
Share on other sites

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:

height-1000.jpg

 

This is with auto/height commented out in:

height-auto.jpg

 

Not sure why the background would not fill in when I take out height. Any clues?

Edited by webgyrl
Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...