Each menu included in the list (below) has it’s own testing area. They’ve been tested for full functionality within a working ‘mini site’ and adapted to demonstrate whether it’s possible to open nested levels and display the current location without altering the body tag.
Here’s the list of menus with a link to the test and a link to the original sites:
UPDATE: Schillmaina has produced a new improved solution. See it here.
It seems like there’s a million and one different solutions for creating round corners for boxes. There’s a good summary of many of the rounded corners solutions at www.smileycat.com: CSS Rounded Corners ‘Roundup’
That’s why it’s surprising to find there’s no cross-browser solution for rounded corners using PNG transparent images.
This is the web: it moves. We have small screens, wide screens, and a variety of needs for the desktop space on any screen. Fixed layouts are for magazines.
If visitors have a 1024 pixels wide screen - and they don’t want to stretch the browser widow across the entire width - any 1024 pixel wide fixed layout means horizontal scrolling - and that’s not very nice.
In order to demonstrate liquid or fixed CSS functionality within the page it’s necessary to have a liquid layout. It’s even possible to have a liquid elastic layout.
Here’s a list of some of the best liquid layout tutorials on the web: CSS Liquid Layouts.
Liquid layouts do need a minimum width to stop the design breaking when the browser is narrowed. CSS or JavaScript can be used to do this (click here for some links.)
O.K., a rant about liquid layouts within a fixed layout design may be the epitome of irony but hypocrisy is this “blogger’s” speciality. This liquid layout for Wordpress: SeaBeast looks great. It doesn’t have a minimum width but uses a drop column technique so the design looks good at narrow widths.
Here’s a couple of liquid layouts with border images to give great flexibility with web page design:
Make like the polar ice caps: go liquid.
This Multiple CSS/AJAX rating bar from http://www.masuga.com/ is the dog’s blox. Everything is set up so you can just stick as many as you like anywhere in your site. The mark-up for any star rating component is a very simple ‘PHP require’ with a unique ID and the JavaScript id pretty unobtrusive. It automatically creates an entry in the MySQL table whenever anyone votes. Looks like a good place for design help at http://www.masugadesign.com/.
The format is:
<!–[if “condition” IE “version number”]> Only IE displays this text if the condition is met <![endif]–>
There are 6 conditions that can be applied (there’s a “logical not” case too):
Valid version numbers are 5, 5.5, 6 and 7. (There is support for specific version numbers such as 5.0453.)
For adding a style for IE v5 only:
<!–[if IE 5]> <style type=”text/css”>@import “IE5_only.css”;</style> <![endif]–>
Validators do not check the code inside the comments so take care.
selector {
min-height:500px;
height:auto !important;
height:500px;
}
Here’s some tips and tricks from a few sites:
Nearly all HTML elements are either block or inline elements.
The characteristics of block elements include:
<div>, <p>, <h1>, <form>, <ul> and <li>The characteristics of inline elements, on the other hand, are the opposite of block elements:
<span>, <a>, <label>, <input>, <img>, <strong> and <em>.This is a great way to create buttons using CSS:
Click to view in new browser window
Here’s some links to a number of good methods for creating button rollovers:
The Internet Explorer 7 beta 2 has arrived and is available to all.
First, it has to be said, IE7 a good piece of software and Microsoft should be congratulated on their good work. That’s not to say anyone should use it instead of Firefox, but credit where it’s due. (Although no idea whether the security has really improved.)
So is the end of hacking in sight? There’s a useful article entitled ‘stop hacking now or be stopped‘.
IE6 may still need hacks to cater to its own unique box model and the many bugs it contains. A good tutorial on the box model is available at Brainjar.com.
So, the battle, fought hard by geek heroes like Jeff, Holly, John and Eric, has been won, and the occupation begins now. And this time it really isn’t all about the oil.
If you’ve been using conditional comments to make adjustments for the bad models IE6 uses they will still work, your hacks are kept separate from your neat and tidy style sheets, and IE7 won’t know about them. If you’ve been using the parse hack (* html) this will also still work fine, as IE7 will ignore these as well. This method also allows you to keep the hack as you can place it next to the proper styling - so if you make any adjustments you won’t forget to update the hack.
Looking at the frames-without-frames as an example for a layout that only works in quirks mode in IE6, and uses conditional comments to set min and max with or height, it appears this won’t be a problem either. IE7 copes just like any other good browser.
As a side note, it turns out there is already a hack for IE7, produced by Brothercake, called the Triple X hack. Once again, to have to use this is bad bad wrongness.
IE7 will highlight any badly written code. The best way to avoid problems is by following proper standards. The following sites have top quality information:
The last link has more information available online so you don’t have to use a book. They have a great article on how IE7 will affect different hacks.
Looking at http://www.researchkitchen.de/… in IE7, it seems IE7 still collapses the margins. It looks similar to Opera rather than Mozilla in Example 3 and in Example 4 where the body is given padding, a div overlaps the containing block. So what does this all mean for IE7? Er.. good question.
Rob Ballou’s (Style-switcher at Contrastweb.com) has published a clarification and improvement on Chris Clark’s (A List Apart PHP style sheet switcher). The Styleswitcher V2, allows you to give the user control over any individual attribute. Another good solution is the A List Apart PHP style switcher which is used in this site’s PHP tests section.
Sitepoint style switcher is another, more simplified method.
Invasion of the Body Switchers (IOTBS) from Brothercake is an efficient object-oriented style sheet switcher, which offers independent switching of multiple media types, and supports an unlimited number of options and controls. Alterior.net has also created a nice PHP solution.
The main area where style switching becomes really practical is for offering a print and visual impairment style. Another good application as would a fast download setting with minimal images and ornamentation.
This site’s main page has style-switching options in the top right corner. It gives the option of a liquid or elastic layout. There’s also a preview of how the print style will look (the print style needs updating - to include collapsible DIVs so the menu system doesn’t need to be printed yet the style can also be used as a ‘minimal images’ style.) A few site designs that were created in the past have also been included.
This site’s flash movies section uses a layout based on the elastic layout from html dog. An Elastic design can be a viable option that enhances usability and accessibility without mandating design sacrifices. The article on elastic layouts is at A list Apart - Elastic layout
There’s another couple of good sites with information on using images with elastic designs: 1. www.michelf.com/…liquid-image/ and 2. www.clagnut.com/sandbox/imagetest/
There’s a new breed of elastic liquid layouts. The most exciting is from Gunlaug.no who sets min and max width for Internet explorer using width expressions in conditional comments.
