|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
|
|
| No member browsing this thread |
|
Thread Status: Active Thread Type: Sticky Thread Total posts in this thread: 56
|
|
| Author |
|
|
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
Here is my initial CSS settings file. I use this to begin each project because it saves time and helps with cross browser compatibility. The original thread offers some explanation of the origins of the CSS settings and why I use what you see below. I explored many CSS reset and CSS framework approaches and realized that they were overkill for the majority of my projects. If you have any suggestions, changes, or improvements, will you please post it to this thread? Also, please keep replies focused to the subject of initial css files, css reset files, etc., to make this thread a useful tool for everyone at KS. Note: This file is not meant to fit everyone's projects and needs. It is a foundation to build your own reset file and will reset the most common cross browser inconsistencies and provide a method of organization and commenting. >> Download a copy of the File from Box.net :: Revision History :: ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks ---------------------------------------- [Edit 6 times, last edit by Thelma at Dec 21, 2008 5:42:08 PM] |
||
|
|
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
Thanks, shelfimage, it will be very useful. As an experiment I used your css file just as it is to see what a page would look like to before any more styles were added. I only added background-colors to certain elements. See http://www.wickham43.com/forumposts/default-css-test.html Obviously the basic CSS file is just a starting point, but beginners might need some advice as to what items they definitely ought to consider editing further. Some items I have highlighted in the link are the heading and p tag padding; line-height and list bullet markers (or the ul tag margin). I expect that there are more. ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. |
||
|
|
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
@Wickham - Looks good. What you see there is exactly what I'm after because each project has different demands. The Typography section of the file is meant to be modified for a project's needs - it only serves as an example. If you eliminate the Typography section so that the resets are in control, you'll see improvement between the browsers. Perhaps the file should contain the cross browser approach to indent lists. The UL would have margin-left:xxem; to indent across browsers after the padding is reset. Will you keep that link live? ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
I will leave my file up on the web, but it will get out of date as you edit your default CSS code so I may have to edit mine, but then my initial comments will be out of date! I'll just leave it for the moment. I was concerned that beginners might think that your CSS is ready to use, but they need to realise that it's just the starting position and they may need advice on what to do next. Padding at the sides is also something that most people would immediately add to containing elements and I usually have equal top and bottom padding to p and h tags to centralise vertically if the container has a background color. I do find that I often reduce top and/or bottom margins on headings as it tends to be too much if left to the browser defaults. You have 1em margin which is causing Firefox not to show the #wrap background color above so I would probably have top margin as 0 but use padding instead. I usually find that I have line-height default set at 1.2 or 1.3 in the body style. ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. ---------------------------------------- [Edit 1 times, last edit by Wickham at Jun 9, 2008 1:25:08 AM] |
||
|
|
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
@Wickham - if you have the time... Would you mind putting together a better starter Typography section? I realize it is lacking and that is one area that I always have to modify for projects. So, maybe something that provides just the basics to establish padding and line heights and list padding. Nothing too "stylish," just something that is usable . I like the font sizing for p, li, and h's, but I have to change those for every project anyway.Thanks for putting it to the test and trying to make better! ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
I've only edited the Typography section of your CSS file as you suggested. I've concentrated on getting all elements to line up on the left with a little padding and sorted the line-height and padding for the headings. This means that although the CSS file is still just a basis to be adapted to suit a particular page, it does show reasonably neatly at the start. My revised page looks the same in IE6, IE7, Firefox Opera and Safari for Windows should be compared with my first page which used your CSS file without editing and was different in IE7 and Firefox. http://www.wickham43.com/forumposts/default-css-test2.html CSS file:- http://www.wickham43.com/forumposts/default-styles2.css ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. |
||
|
|
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
good. I'm wondering about h1, h2, h3, h4, h5, h6, p, li, pre, address { line-height:1.2; margin:0pt; padding:0.3em 10px; } should line-height include em for clarity sake, and have you noticed problems mixing em and px in short hand values? ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
I think we should just explain why unitless line-height is better. http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ Also, what about a nested list fix. I used this to fix my nested lists. li li { font-size: 100%; font-weight: normal; } Although I believe, if I remember correctly that the recommended fix is ul ul { font-size: 100%; font-weight: normal; } Although that did not fix mine - thats why I used the li li instead - maybe a good idea? "and have you noticed problems mixing em and px in short hand values?" I mix them for ul's with no problem - the margin-left gets the px and the margin-bottom gets the em. ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 5 times, last edit by ewwatson at Jun 10, 2008 12:21:27 AM] |
||
|
|
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
should line-height include em for clarity sake, and have you noticed problems mixing em and px in short hand values? Mixing px with ems or % is not a good idea for the same direction, but is OK provided that all vertical styles are ems and all horizontal are px. I did use ems at first for side padding but found that it was greater for the headings because of the greater font-size, so the headings appeared to start further to the right which didn't line up with everything else. As far as ul ul or li li is concerned, I didn't think that the intention of this CSS file was to get in too deeply, like second levels for lists or dropdown menus. I think it needs to be just the minimum needed to get a page up and running, knowing that everyone using it will have to add and adapt it. Eric's link http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ explains line-height and I've never had a problem using 1.2 or 1.3, I've never tried using ems and won't after reading the link. As for the comment that the CSS validator has a bug that causes it to generate parse errors on unitless number values for line-height I've never seen an error for this and I always put the line-height in the body style to apply everywhere; in fact a lot of the styles shelfimage has put in individual styles I usually put in the body style. ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. ---------------------------------------- [Edit 2 times, last edit by Wickham at Jun 10, 2008 1:18:30 AM] |
||
|
|
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
Thanks for the links. Typography is my weakest link because it has to do with 'style' and well, I have none. Ask my wife LOL. So I like the 'li li' fix and do agree it might be much for a starter reset file. A standard needs to be set b/c this is meant to be a basis for your own stylesheet. But, I'll probably keep it around in my personal version. The line-height article revelation is very clever. Ok. I'm convinced. I think a few more posts like these, Iand it will be time to release a new version to reflect the changes. @John, if you need a place to host the file you've created, let me know. Or perhaps we can have a mirror of it. ---------------------------------------- "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 Jun 10, 2008 7:10:44 AM] |
||
|
|
|
|
|
Current timezone is GMT May 24, 2013 3:42:26 AM |