Sprites. Sizes. Templates. Top 10 CSS Table Designs | CSS, Events. Generate a variable 960.gs valid css/ xhtml grid system. Styling <hr> with CSS. Introduction Even though it's sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet. On the other hand, simple, unstyled <hr> does not look good in richly styled documents. That's why I tried to find a couple of cross-browser compatible ways to make it prettier. I used to hide style sheets from the version 4 browsers and older, so my targeted browsers are IE5+, Opera 5+ and Mozilla/NN6. Which properties work Various CSS properties can be applied on <hr>: All three browsers allow setting width and height of the <hr> element.
Examples Now, let's take a look at a couple of examples. So all rules are 80% wide and should have no initial borders. Let's add colors If you want to show a solid, red line, use the following code: color: #f00; background-color: #f00; height: 5px; Conclusion Notes. Lists and Indentation. In order to keep from getting too confused, I'm going to start over and present a complete exploration for what's happening with lists in general,and then in IE5/Mac and Netscape 6.1. I think there will be less chance for misunderstanding that way. The question which I was trying to answer was "how are lists styled by browsers? " This helps to answer the corollary question, "why don't IE5/Mac and NS6.1 seem to behave the same way when styling lists? " First, I'm going to start with a pure list item-- no marker, and no containing list element-- hanging in a vacuum, which is to say it isn't yet part of a document. Picture it in layout limbo, waiting to be completely constructed before the browser puts it on the screen. ---------------------- |This is a list item.| ---------------------- That box represents the content-area of the list item.
There are no margins or padding set for anything yet, so that outer box is the border of the UL, which at the moment is analogous to its content-area. CSS tutorial - Margin Collapsing. Many Web developers run into margin collapsing without realising what it is, or why it is happening. It takes place on virtually every Web page, and in most cases, it creates the desired effect without causing any undesired side effects. However, when it does cause a problem, it usually appears as strange gaps at the top of elements even when they have their top margins set to 0. The typical response is to use an unrelated workaround of some kind, such as positioning everything. Understanding the cause allows more efficient workarounds to be used, especally those that actually deal with the root cause. Historically, margin collapsing only exists because older browsers like Netscape 3 used to do it before they had CSS, and when CSS was created, it had to describe that behaviour so it could be implemented in CSS.
The box model The first thing you need to understand is the CSS box model. Almost no elements have padding by default. Take the following HTML: Three elements Negative margins Step 1: Five CSS design browser differences I can live with | For A Beau. Web designs need not look exactly the same in all browsers. I know that’s a topic I have written about and spoken on a fair amount before, but somehow I’m always amazed by the reactions that I get when the subject comes up.
Although this idea isn't new (and just for the record I know I didn't invent it), when I teach my design philosophy at workshops and conferences I'm often surprised to hear that the notion that people using different browsers (even up-to-date ones) might intentionally see differences in visual design sounds new. The belief that all browsers should see the same design often requires us to resort to presentational markup, forked CSS and JavaScript DOM wizardry. It may come from: a deeply embedded feeling that the web shares print's need for pixel perfectionthe desire of brand stewards to control every aspect of a designa misunderstanding among clients and managers perhaps reinforced byan old fashioned workflow that has its roots in print design and pre-press Border-radius. Common Problems Using CSS Descendant Selectors - Nested Lists an. One of the first things that most designers forget about CSS descendant selectors is that they are flexible. When CSS defines a descendant, it doesn't care whether the tag in question is the direct child, the grandchild, or some great-great-great-descendant of the initial element.
In each of the following examples, the span tag is a descendant of the p tag: But who cares? I mean, does it really matter whether the descendant is a child or a great-grandchild of the first element? After all, if the span tag is inside the p tag, it's a descendant and you'll want to style it - even if the HTML goes: Where the Descendant is Can Make a Difference One of the most common occurrences of descendants making a difference is in nested lists and tables. <ol><li>An ordered list</li><li>With 3 elements</li><li>And one nested list inside it: <ul><li>An unordered list</li><li>With 2 bullet points</li></ul></li></ol> This CSS forces the nested undordered list to become ordered.
Use a Child Selector Instead. The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SE. Download this layout (20kb zip file). Percentage dimensions of the left menu layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left column: 162 pixels Main page: 550 pixels 1024 x 768 Left column: 210 pixels Main page: 709 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other.
No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column. No Images No JavaScript Mac.