|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
CSS - Styling your pages with Cascading Style Sheets.
Thread: Initial CSS Settings - download available
|
| No member browsing this thread |
|
Thread Status: Active Thread Type: Sticky Thread Total posts in this thread: 56
|
|
| Author |
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
@Eric - will you post an example of the webkit bug? thanks Safari and Chrome don't draw the page at 100% height if thats included (20px short in fact). If you refresh the page then "sometimes" they do. But there is no rhyme-or-reason to it. @Eric: Can I see this in action before making that change? I'd like to update the CSS file here and was wondering if there are any must have changes to the file. Must have changes are changes needed because a rule breaks in certain browsers or is not cross browser compatible. Other must have changes would include anything that would make this file have better usability or improved settings. Remember, personal settings and preferences don't really bleong. For example the typography section is just there to get someone started. 2 of the major changes I'll be making is improved form specificity and controlling the font size of nested elements because this sheet uses relative sizes. I am going to stick with the 62.5% font size because I do not think there is a compelling enough reason to make a change there. Thanks for everyone's input! ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Hi John, I agree with you on the 62.5% thingy! I talked about "my" reasoning a few post's back. But I'm sure you came to "yours" a few years back. I didn't see your earlier request. I'll try and make a stripped down version that displays the bug. I'll post it here when I find it. ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 1 times, last edit by ewwatson at Nov 7, 2008 9:00:12 AM] |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
@Eric: Can I see this in action before making that change? Unfortunately, for me, I couldn't duplicate the bug as good as it was appearing in my site (I have no idea why?). But I was still able to recreate it - just not as obvious! But they all saw it too so I'm not crazy. Open this page in Safari or Chrome with the browser window maximized. And then minimize the window and you should see the void space appear at the bottom. On my site where I was having the problems with it - the void space was appearing regardless if it was maximized or minimized. But I think I narrowed it down a little more this time. It only happens if your footer is placed below the wrapper in the html. If the footer is placed absolutely at the bottom (and inside the wrapper) then the bug does not appear. So, not a huge deal by any means. But it was definitely more apparent on my site for some reason. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{ visibility: inherit; } 100% Height, Sticky Footer, Centered Layout!</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; } html { height: 101%; } body { height: 100%; background: #333; } #wrapper { min-height: 100%; width: 700px; margin: 0 auto; background: #CCC; } * html #wrapper { height: 100%; } #footer { height: 80px; width: 700px; margin: -80px auto 0 auto; background: #999; } --> </style> </head> <body> <div id="wrapper"> </div> <div id="footer"></div> </body> </html> ---------------------------------------- Eric :~) Knowledge is Power |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
ok cool! are there any consequences of using overflow-y:scroll; ? ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
ok cool! are there any consequences of using overflow-y:scroll; ? I applied the overflow-y to my site, so I tested pretty extensively. The only negative that I found was that in Opera it also adds a dummy horizontal scrollbar. But I think it's a good alsternative. It adds the same look to all the others that IE gives by default. Just make sure it's only applied to the html, not the body, otherwise you get two scrollbars in IE. ---------------------------------------- Eric :~) Knowledge is Power |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
overflow-x:hidden; overflow-y:scroll; ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
overflow-x:hidden; overflow-y:scroll; Cool even better! Never would have thought of that. I'll try that when I get home. Nobody thought of that over at the other thread (at Sitepoint) - good job John! ---------------------------------------- Eric :~) Knowledge is Power |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
overflow-x:hidden; overflow-y:scroll; I thought you tested it? I spoke to soon - that does not take the horizontal scrollbar in Opera away. ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 1 times, last edit by ewwatson at Nov 10, 2008 2:54:57 PM] |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
I wasn't sure - I was hoping you would test. Oh well.  ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
Any other suggestions before I send an updated version to my file site and to thelma? @Eric: The overlfow-y:scroll fix is an interesting one because it is only needed with that type of sticky footer in your example. I really don't like that horizontal scroll bug in Opera though. The original reason for html {height:101%;} is to eliminate horizontal page jumping between short and tall pages. Are there any other thoughts about this? height:101% or overflow-y:scroll P.S. I tried everything I could think of to get rid of the horiz scroll in Opera. I also tried fractions like 100.5% and it did not give a vertical scroll IE or Opera. P.S.S. In my personal css file, I'll use both the overflow or height method depending on the project. ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks ---------------------------------------- [Edit 1 times, last edit by shelfimage at Nov 11, 2008 10:26:58 PM] |
||
|
|
|
|
Current timezone is GMT Mar 18, 2010 1:56:24 PM |
