What’s Table-less CSS Menu Markup?
These concerns in combination with the rise of mobile web devices have caused many designers to look elsewhere for web design enabling technology. The recent emergence of “tableless” cascading style sheets (CSS) markup language is one answer that promises much greater flexibility and control, smaller bandwidth requirements and better overall performance.
The linear “table” approach to web development caused HTML pages to require complex formatting and substantial bandwidth. Before a browser could load a page, it would have to download all components completely before displaying anything on the screen. This slowed the load-time process and sometimes caused jumbled content on the screen. The main reason for this is that the use of tables in programming integrates the “content” and the “presentation” components of web pages resulting in far less flexibility and heavier content.
Furthermore, the table approach does not support mobile devices such as telephones and PDAs which are certainly becoming a large player in the Internet landscape. Tableless CSS markup is becoming quite ubiquitous around the world for its ability to separate the “content” from the “presentation” on web pages and create a more semantic – rather than linear – organization of content on web pages.
With the absence of tables, pages are able to load sequentially rather than all at once, which speeds up download times for users. Other key benefits of a tableless web environment include:
1. Greater flexibility and control over page design – content and presentation aspects of pages can be managed individually and centrally for changes across entire websites. An example would be in the a sites CSS Menu navigation system where by changing the style sheet the entire site navigation can be updated instantly.
2. Browser interoperability – different browsers can all present HTML pages the way they were meant to be displayed, using CSS markup espeically in CSS Menu can often resolve these issues.
3. Less bandwidth usage – with the separation of content and style, pages are smaller and require less bandwidth.
4. Support for mobile devices – Laptops, PDAs, cell phones, etc. have a much easier time properly accessing and displaying web pages
When designing HTML documents, and espeically CSS Menu navigation it is important to follow proper CSS markup standards to make future changes easier and to enable other developers in the organization (that have been given access) to modify both content and presentation without problems.
The use of CSS style sheets in developing and maintaining CSS menus within web pages is also growing in popularity. Today CSS menus are used pervasively across the Web and the ability to easily create and modify them is important to designers.
Ethan Kaufman a developer at PluginLab with over 7 years experience in developing standards compliant websites. His expertise are Web Site Navigation and CSS Menu scripts.
CSS Menus – 5 Key Ingredients
CSS menus offer a greatly expanded range of creative options to site designers. But the benefits to using CSS menus only begins with more expansive design flexibility. There are numerous additional benefits to using CSS menu-based navigation – benefits that will save you time and money in the development and management of all of your client sites.
5 Ingredients for an ideal CSS Menu
Because CSS design separates design elements from site text, changes to the look of a site can be made by swapping out one CSS template for another without changing the text. In addition:
1. CSS Menus better be Recyclable. A CSS menu is a template. Once created it can be used over and over, amortizing development costs with each site you design and build.
With a file folder full of CSS templates, you can adapt existing design elements, give them a different look and employ them on another site without any re-coding. Consider how much that will cut down on site development time and expense.
2. CSS Menus need to be Easily Customizable. Pick and click saves hours of expensive hand-coding. Client requested re-dos can be completed in minutes instead of hours. Change the background color, change the type font, the size whatever the request, fixes are fast using CSS Menus.
And, as you build your client base, expect satisfied clients to come back for updates and upgrades to their sites. These updates are simple and cost effective. They also deliver great margins on work for hire assignments.
3. CSS Menus Must be 100% SEO friendly. That makes site navigation readable to bots and menu text is given high priority in search engine algorithms. Sites show up faster in SE indices when CSS complaint menu technology is deployed.
4. CSS Menus should be Section 508 Compliant. Section 508 of the Rehabilitation Act of 1973 requires equal access to all non-classified information. There are also state regulations used by schools, public institutions, corporations, even restaurants and movie theaters.
5. CSS horizontal and CSS vertical flyouts and dropdown menus should be easily changeable for those with low vision, increasing font size and even background colors for easier accessibility. CSS menus are strongly advocated by the W3C in their site compliance rankings.
One other point. There’s an active, robust support community for CSS menu design and development. This means there’s plenty of access to good, reliable information from professionals who have already discovered the money-saving, money-making benefits of CSS menu modules.
Ethan Kaufman a developer at PluginLab with over 7 years experience in developing standards compliant websites. His expertise are Web Site Navigation and CSS Menus scripts.
CSS Menus and 508 Accessibility Compliant
The Section 508 federal U.S. mandate requires web developers to create alternative means of viewing content on websites so that people with disabilities can also experience it. When compliant with 508, web content also becomes more available to all users including those using mobile devices, laptops, voice browsers etc. Therefore, while 508 compliance is something every company needs to be working towards by law, it also affords the same businesses certain benefits that are applicable to not only users with disabilities but to all potential users.
The use of certain types of content on a website makes it difficult or impossible for people without sight or the ability to read, for example, to comprehend the given content expressed.
World Wide Web Consortium (W3C) Guidelines and Levels of Compliance
The W3C has been tasked with establishing levels of Section 508 compliance based on the regulations set forth in the Rehabilitation Act of 1973.
It is not always easy to retro-engineer existing software to comply with Section 508 regulations. The W3C – an impartial group of web and Internet authorities. To help companies work towards compliance sequentially rather than all at once, the W3C has broken the law into three priority levels: A, AA and AAA.
Levels of 508 Compliance:
Priority 1, Level A: Provide content that, when presented to the user, conveys essentially the same function or purpose as auditory or visual content. This guideline emphasizes the importance of providing text equivalents of non-text content (images, pre-recorded audio, video). (text from the mandate itself)
Priority 2, Level AA: Ensure that text and graphics are understandable when viewed without color and that all information conveyed with color is also available without color, for example from context or markup. (text from the mandate itself)
Priority 3, Level AAA: Mark up documents with the proper structural elements. Control presentation with style sheets rather than with presentation elements and attributes. Use style sheets to control layout and presentation. (text from the mandate itself)
Validation of CSS Menu Compliance with Section 508 of the Rehabilitation Act
There are several validation tools available to software developers to determine if their products are compliant with 508 standards. Pluginlab employed several validation methodologies to ensure the highest level of 508 regulation compliance. These include:
Cynthia Says by Highsoftware is a premium validation tool for 508 compliance. The software detects inconsistencies between site content and Section 508 standards. Pluginlab passed this validation test with zero errors at levels A, AA, and AAA – validating that Pluginlab CSS menus comply with all accessibility ratings.
WAVE by WebAim is used to assist developers and designers in the creation of software with AAA level 508 compliance. All Pluginlab modules passed without error at level AAA compliance, putting it in a singular class of software.
Site Valet by WebThing provides diagnostics for forms, scripts, HTTP, mark-up analysis and processing, HTML, XML, EARL, Link Checking and spell checking. All Pluginlab modules passed validation with zero errors at levels A, AA and AAA. Once again, a third validation that Pluginlab CSS Menu Modules simplify compliance with 508 regulations.
CSS menus in particular are becoming a primary means of navigating a website’s many pages and thus are a key component in 508 compliance. CSS menus that provide the necessary support should include such features as keyboard-only support, voice and text reader support and so on. In turn, this level of compliance will also help with search engine optimization of site pages containing CSS menus.
Ethan Kaufman a developer at PluginLab with over 7 years experience in developing standards compliant websites. His expertise are Web Site Navigation and CSS Menus scripts.
How To Fix CSS Float Issues
CSS is great. On somedays I’d go so far as to say it’s a lifesaver. But every now and then you’ll encounter a CSS issue that will drive you crazy.
In this case we’ll talk about two of the more common issues when using the float property to create your layout.
For those of you who’re new to CSS, Float is a CSS property that allows you to align your elements, such as DIVs, to create website layouts. The values for Float include Left, Right and None. You can use Floats to align elements and if done properly you can do in such a way that it’s dynamic — almost fluid.
Let’s say you need to create an image gallery. Your idea is to place 4 images on each line, but after you place the first image the second image goes to the next line.
I’ll admit in the past I used to use negative values to align my images so that the second image would show up next to the first one using the margin-left, right, top, bottom property. I even considered using tables, but opted to use negative values instead. There’s nothing wrong with using negative margin property, but not when there’s a better solution for it, such as using floats.
If you apply Float to those images then they’ll align in one row, then you can continue to add more images using the float property and you wouldn’t have to worry about whether they’d line up or not because the float property will recognize that there’s too many elements on this line and it will push the images to the next line.
But what if you’re using Floats for your website layout, for your divs and not just the images.
There are 2 main issues that you’ll face with Floats.
Let’s say you have three elements. Parent1(website’s main container), Child1(left navigation bar), and Child2(content area). Parent1 is the main div container and your goal is to float the child divs side by side sort of like having a left navigation area and a right content area. Sounds great.
You’ve set your parent1′s height to auto, and you’ve set child1 and child2′s height as auto. But once you open and view it in a webpage the parent element’s height is only 1 or 2pixels in height, the child elements seem to look like they’re floating above the parent container, and the parent container doesn’t seem to recognize the div’s height. (see test link 1 on website).
No worries, here is an easy solution for it.
Add overflow:auto; for the CSS of the parent container and it will automatically recognize the floats and will increase in height so that it appears that the floats are part of the parent container just as you wanted. Wow all that in one line.
But don’t forget there’s still one more Float issue.
The second issue is more of a cross browser compatibility issue with floats, but still as important. If you try to Float for ex: three images to the left and are using margin property, then sometimes the first container that floats will have double the margin in Internet Explorer.
Welcome to the Float Peekaboo Bug / IE Float Doubled Margin Bug.
That’s right if you’ve tried to Float an element and use any kind of margin then you’ll notice that it will double the margin in IE.
I’m sure there are some decent hacks, but there’s an easy way to fix this in CSS. The Float Margin Killer. In the CSS for that container add display:inline I don’t know why but for some reason this property seems to fix the double margin property.
That’s it? Yes that’s it. Now you can start using floats.
Sam is the founder of Netlyte Houston website Design, A Website Design firm that’s geared specifically for building websites for Businesses. Websites that have generated real results such as increase in newsletter sign ups to increase in sales. Plus all of their services are backed by a 100% Guarantee.