27 replies [Last post]
da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

Ok... so I'm an intermediate CSS person and I spent a long time working on a personal site making as much CSS as I could and make it look great cross-browser and on any size display and so on... It's a personal project, so I'm just doing "whatever" I need if I want something scripted, not whatever is the "easiest" way...

So the latest point I've got is that the layout is a page perfectly centered but a fixed width area... and that area has "borders" (its a repeated background gif) and that this content area, besides the top with the logo/nav, continues to the page bottom, no matter how large the page is. But if the content is less than the size of the window, it'll fill to the edge of the window and make it look smooth without any scrolling. So I built it all on that premis, and got it to work great to where it fills to the bottom edge of a window in both Mozilla/IE and works fine. But when I tested it with text that goes below (so it would scroll), it works fine in IE but does not in Mozilla. If you view the page here: http://www.everestlightingeffects.com/photo/photo.php you can see that the text "HELLO!" (scroll down to very bottom) works fine in IE but NOT in Mozilla.

I've become frustrated and stumped as to what to do next! So I'm requesting the help of advanced CSS people of what to do to fix the problem and clean up anything so that it still works as it does now (minus the extension problem). Thank you very much for any help!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

The problem revolves around the use of the height property to give dimension to your main div, remove that and ff is allowed to expand the #basediv rather than being told to show a height of 100% which is 100% of the viewport area, you can if you wish feed IE the rule using a star selector filter as in

* html #basediv{height:100%}

But this advise must be tempered by the fact that you are not using a Doctype on your page and your page is rendering at the moment in "Quirks Mode" and thus prone to misbehaving you should really switch browsers into "Standards Mode"then we will know that the rules are being followed.
There is information on this subject in the "How TO" section

I would also suggest reading up on document flow as your using a lot of position:absolute to achieve layout position which tends to break the natural flow and relationship of divs, the footer would be better moved bellow your content rather than before it and shouldn't require absolute positioning as the content should keep it pinned to the bottom of #basediv.

Hope that's of some help, post back if you need clarification,

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

I fixed what you said and added a few things and everything works great! Though I found a few more issues... In Mozilla now, when there isn't enough content to cause the page to scroll, the graphics end at the end of the content layer. But in IE since I added that * thing it does fill it out. That's the first thing... without changing it, because everything else works otherwise, how do I get it to fill the area in Mozilla. Example is if you go to the website (new address: http://www.everestlightingeffects.com/photo/news.php ) and click on LINKS and look at that page.

The last thing is, also on that LINKS page, the copyright... I was hoping what it would do, is that when the content doesn't fill that page (as in now on the links page) the copyright text would be at the bottom of the page just above the edge of the window. I have it setup to flow as you said, but it then puts it at where the text ends, not at the bottom of the window as I'd wanted it. Thank you for your help!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

da_buddha,

Try using

min-height:100%;

in the #basediv for mozi.

With the footer you can either place it outside the #basediv or add

position:absolute; bottom:0; to .copyright

As far as I can see you are still missing a DTD declaration which makes helping out difficult, please put one in, as in all honesty I tend not to deal with things if rendering in "Quirks Mode" it's too hit or miss as to how things will display, and CSS and Standards tend to go hand in hand.

Have a look at the "How To" section as there are articles written on the subjects of "Standards" "Validation" and footer placement
as well as many other subjects.

I notice one other serious problem and that is that your repeating a use of an ID, they are ubique and must only be once per page you will need to change it to a class if you are going to use it more than once.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

Ahhhh thanks man, I can't say how happy I am for getting your help!! Smile Awesome!

As for the DTD, I did add one. Right below the line: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> in the source code, I have a <!DOCTYPE line.

I'm not sure if that is the one your talking about or if I did something wrong? I read the How To about them and got the example DTDs and used one of those. Do I need a different one or one somewhere else?

Also, I'll fix that multiple ID problem now, too.

Thank you so much!! I can't say how very thankful I am for your help!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Ah no, the DTD declaration must go at the very begining of the page before the html tag.

Thanks for actualy making the effort to read and find an example one Smile it does make all the difference when people attempt to help themselves , they also tend to find a better response to questions.
When the dtd is in it's correct place and browsers switched to "Standards Mode" there may be one or two problems that arise but post back and we'll fix them at least then all conforming browsers will be singing the same song.

Thanks for the thanks Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

Fixed the DTDs as said... The new error is in IE the border gifs don't extend all the way down. Head back to the news.php page. Replying as you said to get help on that! I'm hoping I can be totally 100% finished with all of this layout problems tonight, so hopefully you read this soon! Smile

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

ahhhh any help whenever you wake up?! Shock I'm baffled because I've found tons of errors and don't know what to do about them!! let me know, I'll be around a lot tomorrow!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Alex, this is a problem with using Absolute positioning ,I'll try and have a look at the layout a bit later and see if I can rework it but the absolutes will need to go .
Bear with me as I'm rushing around a bit today but will see what I can do .

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

Please let me know whenever you get a chance!! I am hanging out around quite a bit and will be checking this post about every 10 minutes!! I'm working on this site pretty much all day today, so whatever you can help me out with, that'll be great. Again thanks so much for all your help! Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Right this is at a bit of a rush but these changes should make for a better layout.

In the html were going to make the #borderl a div within the #basediv so it needs to left open; remove it's closing tag and move it to the end of the #basediv so that now you have two closing divs before the closing body tag.

This #borderl is going to carry the left hand image and the CSS wants to be along these lines:

 #borderl { 
position: relative; 
background: url(border.gif) repeat-y left; 
height: 100%; 
}


The #borderr div is now redundant so remove the div from the html altogether and likewise from the style sheet

The image for the right border is going to placed in the #basediv
and positioned right so you will need :
#basediv { 
position: relative; 
margin: 0 auto; 
background: url(border.gif) repeat-y right #224960; 
width: 772px; 
min-height:100%; 
 
}


also set the logo div to position relative and remove the left co-ordinates .

this should give a working layout but there are still one or two problems height 100% is required on the #borderl div otherwise the layout breaks which aint good
and may have something to do with the menu divs , these really should be an ul list given a display inline to force the horizontal line.
position absolute and 11 divs isn't correct and may lead to further problems .
I don't have more time to re-write that at the moment but will see if I can do so this evening .
have a go with what i've suggested and see how you get on, there may be other problems that I've missed , but am working at a rush, sorry Smile

Oh an after thought with the changes comment out code rather than delete things just in case it needs putting back, can save time .

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

Hey... sorry for the delay (if you've been waiting for a response). I'm actually sitting in the airport now waiting for a flight and will be on a plane for 5 hours. I'm gunna save your suggestion so far and work on it until my battery runs out (or until I fall asleep) but if you have time and can post the rest of your suggestion, that will help a LOT! I'm planning on working on it when I get in tonight, and that might be when you are asleep... Let me know! Thanks for your help!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Alex,
Try these changes,
in the html surround all your link classes with a div with an id #nav
in the CSS add:

#nav{position :relative; 
     margin:0 auto; 
     padding: 0; 
     width:748px;  
     height:15px;}

Then you will need to reduce all the left position co-ordinates on the link classes by 12px and remove the top co-ordinate completly,this will set all the absolute links in a relative container which should take up it's position within the natural flow it's not the ideal situation and would suggest that when you have time read a few tutorials on creating ul nav lists, the listomatic site has some good ones.

In the .copyright change the absolute to a position:relative, loose the positioning and give it width:748px;

I would next create a #content div that surrounds the <p> and becomes a wrapper for the main contents you can remove the .content from the p

#content {width:748px;margin:0 auto; 
	  }


change the .content in the css to:
#content p{ color: #F0F0F0; 
            font-family: Verdana, Tahoma; 
            font-weight: normal; 
            font-size: 10px; 
            padding-top: 171px; 
            padding-left: 18px; 
            padding-bottom: 10px; 
            margin: 0; 
}


Also add margin;0 auto to the logo/header div to ensure it's centered .

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

Done as you said...!! Laughing out loud Still some problems though... There is a mysterious amount of space in Mozilla under the title logo and above the nav area... it only shows up in Mozilla, but is otherwise not present in IE...

The second problem is that, in Mozilla, the basediv still does not extend all the way to the edge of the window. If you look at link or find, still doesn't, but does in IE...

And lastly, we've kept changing this back and forth... The copyright footer. I want it to be the last thing at the bottom of the page IF it extends (and requires a scrollbar) but if it does not and the basediv (and borders) fill to 100% of the window, then I want the copyright footer to be at the exact bottom of the window, where it is when you have it extend... It worked before with the absolute and bottom:0 but I don't think that is an option anymore.

Sorry to keep going and going, but it seems like we're cleaning up the scripting/CSS on this site a LOT and its definitely helping me learn immensely. I can't thank you enough!! Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Alex, at the moment your link isn't responding I'm getting a "no input file specified" message so cannot check your code against my version to see if there are any discrepancies, as far as I can tell I'm not getting any of those problems you mention and need sight of the changes you have made.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

Hey... sorry... check this link here: http://www.everestlightingeffects.com/photo/news.php
Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

That's better Smile

but I am seeing the layout as I have it locally, so is there something I've missed :?

Posted at 35000 feet "how cool is that" quite cool I suppose if your impressed by that sort of thing which of course I'm not whatsoever :^o
Dam little pangs of envy, that's ruined my evening Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

these are the latest problems on the page...

da_buddha wrote:
Done as you said...!! Laughing out loud Still some problems though... There is a mysterious amount of space in Mozilla under the title logo and above the nav area... it only shows up in Mozilla, but is otherwise not present in IE...

The second problem is that, in Mozilla, the basediv still does not extend all the way to the edge of the window. If you look at link or find, still doesn't, but does in IE...

And lastly, we've kept changing this back and forth... The copyright footer. I want it to be the last thing at the bottom of the page IF it extends (and requires a scrollbar) but if it does not and the basediv (and borders) fill to 100% of the window, then I want the copyright footer to be at the exact bottom of the window, where it is when you have it extend... It worked before with the absolute and bottom:0 but I don't think that is an option anymore.

Sorry to keep going and going, but it seems like we're cleaning up the scripting/CSS on this site a LOT and its definitely helping me learn immensely. I can't thank you enough!! Smile
you can see the height issue at: http://www.everestlightingeffects.com/photo/link.php

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Alex, are the problems you are seeing in Mozilla or Firefox?

Check your PMs as I've attached a copy of the working file for you to compare.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

Hey. I worked with it as much as I could and did as much tweaking as I could, but I'm still stuck at some point. I've re-uploaded all that I've completed to the internet. I'm not really looking into rebuilding it all from scratch at this point, and would rather just fix it from here still. I still need ANY help I can get to get this working!! The copyright footer is now having some position problems when you set it to absolute and bottom: 0. Please let me know! Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Alex can you be as specific as possible when you say problems as the layout revision I posted was stable at the time and I did spend quite a while going through the options with the footer, at the moment looking at the link in FF there do not appear to be any problems nor with IE, but that may just be the content length.
Check the "how To" section here, there's a footer article that may help
You may have to accept some compromises cross browser with this layout but post back and let me know the circumstances under which the problems manifest.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

go here:
http://www.everestlightingeffects.com/photo/find.php
and
http://www.everestlightingeffects.com/photo/link.php
in FF... and you'll see the borderL problem and the copyright footer problem... I can't get the copyright to properly go to the bottom... try it using my CSS and html, because I looked at yours, edited it as closely to that, and still am having problems, so work with mine, not your build.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Try putting height:100% in the #basediv and setting the .copyright back to absolute bottom:0 but I think this may well upset the other pages with more content and no floats.
This is the trouble with trying to use the height property in this way it's poorly implemented cross browser when it seems to work in one it breaks in another so it becomes a matter of selectively filtering out rules until you get a combination that works which is why it would be better if you could rethink the layout combine the graphic into one image that can be set in a single div thus eliminating some of hassle trying to get multi divs to stretch without content.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

I can make a 772px by 2px gif that is the border/cont background and put that in as a bg image and remove the borders and try that. Let me see how it works out...

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

WOW! All I do is work on that and wallah its almost 100% completely working! Damn!!

Check it over for me fully (all 3 working pages, NEWS, FIND, and LINK) and tell me if you see anything or any other "clean-up" tips...!! Thanks

http://www.everestlightingeffects.com/photo/news.php

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Excellent, well done, thats why I was going on about a re-style Smile in fact it 's taken one new image and the dropping of a div and leaner code to boot .
Checking through the pages it all looks fine except for one problem still with the footer on the links page in IE I'll have a look at that a bit later and also see if the code can be tightened. other than that it looks to be there =D>

There is going to be a further issue with the use of the doc type you have with an xhtml strict dtd you must close off all open tags such as
meta tags and <br>with a space and /> ( you may have noticed I closed the open tags in the page I posted)also it wont like the target attributes on the links and 'language' is also deprecated these will cause the page to fail on validation and will need to fixed or you could drop down to a 'transitional' dtd but you will still need to close all tags and use 'alt' on the images. I also removed the body property attributes from the html all styling should be in the style sheet.
I'll get back to a bit later about the footer.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

bottom of page DIV extension

Alex, add padding-bottom:10px (or value to suit) to the #content div which will just pull the contents away from the footer I also changed the left:0; to 12px to ensure centering of the footer , give that a try and see how it responds through the other pages.

I noticed that with your font-family declarations there is no generic font at the end, which will cause the validator to kick up a fuss; also as you are using the same font familys you can just declare them the once in the body rule which will save on file size.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

da_buddha
Offline
Regular
Pittsburgh, PA (CMU)
Last seen: 15 years 5 weeks ago
Pittsburgh, PA (CMU)
Timezone: GMT-5
Joined: 2004-12-19
Posts: 21
Points: 0

bottom of page DIV extension

Yay!! Laughing out loud Finished as much as I could, checked as much CSS and scripting as I could, and filled the content as best... and now it's complete enough (for tomorrow)!!

Check it out in finished form: http://www.billingtonphoto.com

The gallery (click VIEW) is pretty cool, too... If you find any problems or anything, just reply or PM me or let me know somehow...!! Thanks again SO MUCH for all of your help!! Regards,

Alex