|
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 |
|
Wickham
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
You're welcome to copy/paste the code of my html and css file and use them. The html file isn't intended to be a proper web page, it's just to show the main elements and how they apply your stylesheet with my edits. ---------------------------------------- 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. |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
- UPDATED - I've updated the file with the latest round of suggestions by Wickham to provide a consistent and cross browser compatible starting point for typography. I was within the 3 days alloted to edit one's post without admin help. So, I wonder if by editing today, I get another 3 days?  @eewatson and others - do you know if li li {font-size:100%;} will behave the same as li li {font-size:inherit;}  ---------------------------------------- "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 8:27:40 AM] |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
- UPDATED - I've updated the file with the latest round of suggestions by Wickham to provide a consistent and cross browser compatible starting point for typography. I was within the 3 days alloted to edit one's post without admin help. So, I wonder if by editing today, I get another 3 days? @eewatson and others - do you know if li li {font-size:100%;} will behave the same as li li {font-size:inherit;} I just tried it on mine and it seems to work perfect. Just like 100% PS - shelfimage - might want to respell from box.net (the download link). It's funny I do the same thing - but only recently since I started building forms. Every single time I spell it form instead of from. ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 2 times, last edit by ewwatson at Jun 10, 2008 9:21:43 AM] |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
PS - shelfimage - might want to respell from box.net (the download link). It's funny I do the same thing - but only recently since I started building forms. Every single time I spell it form instead of from. Thanks. I do that all the time... ---------------------------------------- "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 |
I'm constantly working on improving my initial css. I find I keep having to tackle the same bugs and none bugs over and over again. What do you guys think about adding these following rules? It automatically clears all floats - which is huge! And I believe they would fix 80% of IE bugs without causing any harm to other browsers. Do you guys see any thing that could possibly be harmful to other browsers below - as of yet, I don't? #wrapper, #header, #nav, #content, #left, #right, #footer { min-height: 0; /* haslayout for IE7 */ width: 100%; /* haslayout for IE6 */ } #content { overflow: auto; /* clear floats */ } #left { float: left; display: inline; /* fix IE6 float bug */ } #right { float: right; display: inline; /* fix IE6 float bug */ } If you declare a different width (other than 100%) later on in the css - no harm done. height: 1% fixes IE6 better than width 100% but it also breaks others. So thats why I went with 100% rule. What do think? EDIT - I know every rule above does not break any body - the only one thats questionable to me would be width 100% - but I think it's all good. ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 1 times, last edit by ewwatson at Jun 16, 2008 3:35:44 PM] |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
@eewatson thanks for looking at good ways to keep the file going. I think all of those are valid fixes for specific problems, but not all of those problems will occur. They actually occur less than you might think. Creating haslayout (applies to IE only) for all of those divs may not be a good use of resources and can cause other problems if the container shouldn't have haslayout. Also, haslayout bugs are usually present when floating or positioning something. Declaring a width, or height, or any of the other methods to gain layout on the object in question is a better practice. Matter of fact, I believe that any block element that is positioned or floated should have at least a width and height declared for sanity's sake. #content { overflow: auto; /* clear floats */ } This doesn't really clear floats, it just allows a container with other floated objects inside of it to expand fully. But, this is only applicable in some cases. #left { float: left; display: inline; /* fix IE6 float bug */ } This is a good one, and I use it often. But, it is only applicable if the item floated left also has left margin applied. Then IE6 doubles the margin. vice versa for float right / margin right Often I'll group elements that have similar rules together. So if my template is 870px wide, I might #wrapper, #header, #nav, #content, #left, #right, #footer { width:870px; } This creates haslayout for the ones that need it and helps to reduce repetition in css. I don't think applying 100% would be useful for a starter css file. If those work for you and you see yourself using those 80% of the time, then I'd keep them in your file because those are valid fixes for a lot of problems. ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
gigaturn
Stranger  Joined: Jun 17, 2008 Post Count: 6 Status: Offline |
Nice post, it will really helpful for web designers/developers. - gjit [URL deleted as spam] ---------------------------------------- [Edit 1 times, last edit by LSW at Jun 17, 2008 12:23:32 PM] |
||
|
|
newseed
Advanced Member Joined: Apr 2, 2005 Post Count: 2141 Status: Offline |
Just so you know, I am putting the global.css to the test by recoding a non-css website for a client. So far, things are looking good. I will post a url when I get it done. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
||
|
|
newseed
Advanced Member Joined: Apr 2, 2005 Post Count: 2141 Status: Offline |
One thing I have noticed that probably should be adjusted in this default stylesheet is the ordered list. By default, you cannot see the number/text when used. I had to add this line to get it to display at a reasonable location visually: ol {margin-left: 35px;} ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
yep, good catch. to be consistent with the UL already there, it should have been: ol,ul{margin-left:25px;} The Typography section is really just an example and part of the overall organization. That section goes through a lot of mods in an actual site. ---------------------------------------- "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 20, 2008 8:39:52 AM] |
||
|
|
|
|
Current timezone is GMT Mar 20, 2010 11:06:05 PM |
