Menu. Liquid. Closing the gap between list items in IE. A long-standing bug in Internet Explorer is the gaps it likes to insert between list items that contain block level elements, if there is any whitespace between the list items in the markup. You have probably seen it in action more times than you want to. This bug was thought to have been fixed in IE 7 RC 1, and perhaps it was. That doesn’t really matter since the release version of IE 7 still suffers from it in certain circumstances.
Just in case you’re looking for something that will fix this problem in both IE 6 and IE 7, I wanted to share this piece of knowledge. I originally thought this would soon be obsolete, but unfortunately that does not seem to be the case. Let’s say you have a nice list of links marked up like this: <ul><li><a href="/">List item 1</a></li><li><a href="/">List item 2</a></li><li><a href="/">List item 3</a></li></ul> You want the links to display below each other, so you use the following CSS: One suggested fix is assigning a width to the links.
That’s it. Advanced CSS Printing - Using CSS Page Breaks. I have one customer that absolutely insists his web pages print perfectly. Why? Because he refuses to look at his pages on the screen -- he tells his employees to print the website for him to look at. And since he looks at pages that way, he believes most of his customers do just this. Needless to say, I've learned quite a few tricks to making a website print properly. There are numerous spots that are good for page breaks: Between page sections (h2 or h3 tags, depending on your site format) Between the end of an article and subsequent comments / trackbacks Between longs blocks of content Luckily, using page breaks in CSS is quite easy. The CSS The all and print medias should be addressed: The first declaration ensures that the page-break is never seen visually...while the second ensures that the page break is seen by the printer. The HTML Creating a simple DIV element with the page-break class is how you implement the page break.
Quite simple, huh? The Usage There you have it. 30 Exceptional CSS Techniques and Examples - Six Revisions. In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML.
Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation. 1. Hoverbox Image Gallery A pure css-based gallery; hovering over an image enlarges it. 2. A creative and complex navigation scheme. 3. An accordion effect; hovering over an image expands it. 4. Part of an article entitled "Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting. 5. Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows". 6. Hovering over the tabs changes the category, while hovering over an image enlarges it. 7. 8. 9. 10. whatever: hover. CSS Colors: Take Control Using PHP. Neo: Do you always look at it encoded? Cypher: Well, you have to ... there's way too much information. While many web sites use powerful programming environments to create HTML, these same tools are usually ignored when it comes to creating Cascading Style Sheets (CSS).
This article describes how to take control of your colors in CSS using PHP. You will learn how to: Centralize your color definitions using variables. Separate presentation and content by referring to colors using abstract names such as base and highlight. Automatically generate a color gradient from a single base color:-5-4-3-2-10+1+2+3+4+5 Automatically adjust the contrast of foreground colors so they can viewed on top of your background colors:-5-4-3-2-10+1+2+3+4+5 Using PHP to Generate CSS To use PHP in your CSS file: Rename your style.css file to style.php, then add the following to the top of the file: <? Centralizing Your Color Definitions I don't even see the code. Let's start with the following sample stylesheet: 21 ways to streamline your CSS. These days, CSS development is a complex process. You may be working on sites with large CSS files, multiple developers ,and long development timelines.
The more complex your CSS files become, the more difficult it is to work with them. This article will present some tips and tricks for keeping your CSS files organized and easy to work with. Note: the tips listed below are listed roughly in order of difficulty. Basic techniques are described first. Put Your Content in My Pocket. A note from the editors: This historically important article—part of the first series to show web designers what they needed to know about iPhones—was brilliant for its time, but is now outdated.
Unless you’ve been hiding in a cave with Osama bin Laden, you know that Apple is selling an iPhone and that it’s a hit. Apple is well on its way to selling ten million mobile Internet devices by the end of 2008. Besides being a great phone, the iPhone also includes a sophisticated new Safari browser. This version is touted as “the most advanced web browser on a portable device” and from what I’ve seen, it deserves this accolade. Article Continues Below So what does this mean for you? (Note: For the remainder of this article, I’ll refer to this new browser as Mobile Safari to avoid confusion with its desktop sibling.) While these articles are specifically targeted at the iPhone, many of the ideas and concepts I’m presenting can be useful and effective with other mobile devices.
Adapting#section5. CSS, JavaScript and XHTML Explained » Web Development for the iPhone. Web Development for the iPhone: Targeting the iPhone Safari browser Developing for the iPhone Also check out Creating native looking iPhone web apps with CSS3 (no images). That works on the iPhone and Safari 5 only. Also see CSS, XHTML and JS support in the iPhone. It’s way more relevant than this article, which is about v1. The Safari iPhone user agent string is:Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3Platform string: (iPhone; U; CPU like Mac OS X; en)Version string: Version/3.0 Mobile/1A543a Safari/419.3 To target the iPhone with CSS, use: <!
The logic of this is that only browsers that understand screen understand only, and of these, only the iphone has a max-device-width of 480px. To target the iPhone server-side with PHP you can use: if (stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {} :hover pseudoclass on the iPhone iPhone Viewport Orientation The iPhone supports both landscape and portrait views. Notes: The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail 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 & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 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-3 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. The Highly Extensible CSS Interface. Javascript Progress / Percentage Bar with CSS by WebAppers. Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Therefore WebAppers have created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App. Bare Naked App taught us how to display Percentage Bar with 2 images only by using CSS. And then I used a little bit of Javascript to make it more interactive. Display(elementId, percentage, colorCode) Display the Percentage Bar int colorCode: 1 = Green int colorCode: 2 = Yellow int colorCode: 3 = Orange int colorCode: 4 = Red plus(elementId, percentage) Increment the Percentage Bar by the specified percentage minus(elementId, percentage) Decrement the Percentage Bar by the specified percentage setProgress(elementId, percentage) Set the Percentage Bar with the specified percentage fillProgress(elementId, percentage)
Using CSS to Fix Anything: 20+ Common Bugs and Fixes. Jun 15 2008 Without a doubt, a logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. Today we wanted to share with you some quick tips on how to avoid easy pitfalls when creating your CSS layout. This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better methods, then post a comment below or email me. You might be interested to check our other related post for some inspiration: IE Bug Fixes 1- Bug Fix: IE Double Margin Float Bug- It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size.
To something like this: 2-Overcoming the Box Model Hack- If you want to specify a width to any div, do NOT specify padding or margins. Do something like this: Centering a Block Element Column Issues <div><! 60 best CSS directories you would die to watch! Text + Image + CSS3 = Crazy Delicious. Listless Navigation - Using CSS To Do More With Less - CSS-Tricks.
The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to: Code much, much less XHTMLSeparate website formatting from contentControl as much of the website theme/design as the developer allows himself with one CSS fileEasily adapt website display to the user instead of the user adapting to the websiteChange the display of our website for specific devices and special circumstances The list goes on and on. Depending on the design of your website, you may use vertical navigation or horizontal navigation. <div id="navigation"><h3>Categories</h3><ul class="nav-list"><li><a href="/css">CSS</a></li><li><a href="/html">HTML</a></li><li><a href="/mootools">MooTools</a></li><li><a href="/php">PHP</a></li><li><a href="/xml">XML</a></li></ul></div> ...into... ...using some very basic, cross-browser compatible CSS.
The above example is all you need for vertical navigation. That's all? Before You Comment... CSS: Getting Into Good Coding Habits. Set for printing In this article we will look at what might be considered best practices, or perhaps, good coding habits to get into. To begin, we will look at removing any defaults that a browser may add to our elements and then look at how we can explicitly set the values we want. If you are new to CSS, you may want to bring yourself up to speed by reading a series of tutorials I wrote called An introduction to CSS.
This links to the first tutorial in the series, which has links to all the earlier tutorials. The beauty of CSS is the control it gives us. We can use CSS in three ways. Inline CSS Embedded CSS External CSS Inline CSS is the least flexible of the three options listed above. <p style="margin: 20px;" >My paragraph text</p> The inline style in Listing 1 above is highlighted. This situation is further complicated when we need to make changes to our code. Embedded CSS is somewhat of a halfway house between inline styles and an external style sheet. P { margin: 20px; How to Style an A to Z Index with CSS. I've always been taken with the way that the BBC styles their A-Z index using a simple list and CSS. However, because they use pixels to set the dimensions of each list item, the design breaks when you increase the text size. Consequently, I thought I'd have a go at creating an A to Z index along the same lines that doesn't break when you resize your text.
The code is pretty straight forward. Here's the CSS : And here's the HTML : <div id="azindex"> <ul id="index"> <li><a href="#a">A</a></li> <li><a href="#b">B</a></li> <li><a href="#c">C</a></li> <li><a href="#">etc</a></li> <li><a href="#z">Z</a></li> </ul> </div> Pretty simple, but hopefully it'll be useful to someone.
ShareThis Posted on: January 16, 2006 | Recent Entries in "CSS" How to Make Data Tables Viewable On Mobile Devices Is This New Browser-Based CSS Editor a Firebug Replacement? Guide to CSS Hacks for IE. Future-Proof Your Web Site Design by Planning Your CSS In Advance. 0Google + A web site is like a building. Over time it gets lived in. And, regardless of the initial intentions of the designer for how everything within it should be arranged, things get moved around, stuff gets added, some things get taken away, more stuff gets added, the occasional renovation takes place, and yet more stuff gets added. Many web sites are not really designed to be 'lived in' — i.e. to support all these changes by different owners with various intentions.
After a while they bear little resemblance to any sort of coherent design and are likely to become increasingly hard to manage. Of course, it's impossible to plan for all the 'home improvements' that will happen to a web site between major redesigns. However, it is possible to be prepared so that the addition of something new to a page doesn't break its design. A good way to future-proof a web site is to create styles in advance for the most common page elements, even if they are not yet being used. Headings Lists Tables Links. Howto: 3 Easy Ways To Speed Up CSS Development While Staying Organized | Elliot Swan.
When developing large sites, stylesheets can get fairly messy and hard to keep track of. If you don’t stay organized, you can end up making them larger than they really need to be and doing more work than you should have to. Here’s just a few ways to can help avoid that. While in most cases semantic class names really don’t help achieve much, there are a few in which they can be quite helpful. One of these is when describing element states, such as .selected. Oftentimes, people only use classes when there are multiple elements on a page that are to share the same styles–this isn’t the only way to use them, however. Say we have a tabbed horizontal navigation on the top of our page: <ul id="tabs"><li><a href="#">tab 1</a></li><li><a href="#">tab 2</a></li><li><a class="selected" href="#">current tab 3</a></li><li><a href="#">tab 4</a></li></ul> We’re going to want to give the .selected link some extra styles.
Using selectors, we can give each of these different styles: And that’s it. CSS Mastery: Advanced Web Standards Solutions - Part 2 - webreference.com. Max Design - Sample CSS Page Layouts. Ntent with Style: A CSS Framework. Ntent with Style: Modular CSS. Ten more CSS tricks you may not know. CSS. Why tables for layout is stupid: problems defined, solutions offered.